<template>
  <div v-if="loading">
    <div>
      <div class="q-pa-md q-py-lg">
        <q-skeleton height="40px" square style="width: 200px;" />
      </div>
      <div class="row q-pa-md">
        <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="row q-pa-md desktop-only">
                <q-skeleton class="q-ma-xs" type="QBtn" />
                <q-skeleton class="q-ma-xs" type="QBtn" />
                <q-skeleton class="q-ma-xs" type="QBtn" />
              </div>
              <div class="q-pa-md">
                <q-separator inset />
              </div>
              <div class="row q-pa-md">
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
                <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                  <q-skeleton class="q-ma-sm" type="QInput" />
                </div>
              </div>

              <div class="col-12 col-md-6 col-sm-12 col-xs-12 q-pa-md">
                <q-skeleton type="rect" />
              </div>
            </q-skeleton>
          </div>
        </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">Performance Analysis Report</div>
      <div class="row flex flex-center">
        <div class="col-12 col-md-12">
          <div class="q-pa-mdd">
            <q-card class="my-card q-mb-md q-pa-md">
              <q-card-section>
                <q-select
                  outlined
                  v-model="selectedQbank.id"
                  :options="qBankOptions"
                  label="Select Qbank"
                  emit-value
                  map-options
                  @input="fetchQbankPerformanceReport($event)"
                >
                  <template v-slot:option="scope">
                    <q-item
                      v-bind="scope.itemProps"
                      v-on="scope.itemEvents"
                      class="justify-between"
                    >
                      <q-item-section>
                        <q-item-label v-html="scope.opt.label" />
                      </q-item-section>
                      <q-item-section avatar>
                        <div class="text-blue-8">( {{scope.opt.qCount}} Question)</div>
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </q-card-section>
            </q-card>
            <q-card>
              <q-card-section>
                <div class="q-gutter-y-md">
                  <q-tabs
                    v-model="activeTab"
                    class="text-grey-9"
                    active-color="primary"
                    indicator-color="secondary"
                    align="left"
                    narrow-indicator
                  >
                    <q-tab style="border:1px solid #f3f3f3;" name="overall" label="Over All" />
                    <q-tab style="border:1px solid #f3f3f3;" name="topicwise" label="Topic Wise" />
                    <q-tab
                      style="border:1px solid #f3f3f3;"
                      name="subtopicwise"
                      label="Sub Topic Wise"
                    />
                  </q-tabs>
                  <q-tab-panels v-model="activeTab" animated style="border:1px solid #eee;">
                    <q-tab-panel name="overall">
                      <div class="text-h6 text-grey-9 q-pb-lg">
                        <span v-html="activeQbankName"></span>
                      </div>
                      <q-separator />
                      <div class="row">
                        <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                          <q-list>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Quesitons:</q-item-section>
                              <q-item-section side>{{ selectedQbank.overAllReport.total }}</q-item-section>
                            </q-item>

                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Demo Qs:</q-item-section>
                              <q-item-section side>{{ selectedQbank.overAllReport.demo }}</q-item-section>
                            </q-item>

                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total UnAttempted Qs:</q-item-section>
                              <q-item-section side>{{ selectedQbank.overAllReport.unAttempted }}</q-item-section>
                            </q-item>
                          </q-list>
                        </div>
                        <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                          <q-list>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Used Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.used}}</q-item-section>
                            </q-item>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Favourite Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.favourite}}</q-item-section>
                            </q-item>

                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Correct Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.correct}}</q-item-section>
                            </q-item>
                          </q-list>
                        </div>
                        <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                          <q-list>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Unused Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.unUsed}}</q-item-section>
                            </q-item>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Flagged Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.flagged}}</q-item-section>
                            </q-item>
                            <q-item class="q-mb-md bg-grey-3">
                              <q-item-section>Total Incorrect Qs:</q-item-section>
                              <q-item-section side>{{selectedQbank.overAllReport.incorrect}}</q-item-section>
                            </q-item>
                          </q-list>
                        </div>
                        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
                            <apexchart type=pie height=300 width=600 :options="chartOptions" :series="series" ref="progressChart" />
                        </div>
                      </div>
                    </q-tab-panel>

                    <q-tab-panel name="topicwise">
                      <q-list>
                        <q-expansion-item
                          group="somegroup"
                          header-class="bg-grey-3 text-grey-9 q-my-xs"
                          expand-icon-class="text-grey-9"
                          v-for="(t,index) in selectedQbank.topicWiseReport.topics" :label="t.name" :key="t.id" :name="(index+1).toString()"
                        >
                          <q-card class>
                            <q-card-section>
                              <div class="row">
                                <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                                  <q-list>
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Total Quesitons:</q-item-section>
                                      <q-item-section side>{{t.total}}</q-item-section>
                                    </q-item>

                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Correct:</q-item-section>
                                      <q-item-section side>{{t.correct}}</q-item-section>
                                    </q-item>
                                  </q-list>
                                </div>
                                <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                                  <q-list>
                                 
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Used:</q-item-section>
                                      <q-item-section side>{{t.used}}</q-item-section>
                                    </q-item>

                                    
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Incorrect:</q-item-section>
                                      <q-item-section side>{{t.incorrect}}</q-item-section>
                                    </q-item>

                  
                                  </q-list>
                                </div>
                                <div class="col-4 col-md-4 col-sm-6 col-xs-12 q-pa-sm">
                                  <q-list>
                                     <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>UnUsed:</q-item-section>
                                      <q-item-section side>{{t.unUsed}}</q-item-section>
                                    </q-item>

                              
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>UnAttempted:</q-item-section>
                                      <q-item-section side>{{t.unAttempted}}</q-item-section>
                                    </q-item>
                                  </q-list>
                                </div>
                              </div>
                            </q-card-section>
                          </q-card>
                        </q-expansion-item>
                      </q-list>
                    </q-tab-panel>

                    <q-tab-panel name="subtopicwise">
                      <q-list >
                        <q-expansion-item
                          group="somegroup"
                          header-class="bg-grey-3 text-grey-9 q-my-xs"
                          expand-icon-class="text-grey-9"
                          v-for="(t,index) in selectedQbank.topicWiseReport.topics" :label="t.name" :key="t.id" :name="(index+1).toString()"
                        >
                          <template v-slot:header>
                            <q-item-section>{{t.name}} </q-item-section>
                            <q-item-section side>
                              <div
                                class="row items-right"
                              >Total Questions: {{t.total}}</div>
                            </q-item-section>
                          </template>
                          <q-card class>
                            <q-card-section>
                              <q-markup-table>
                                <thead>
                                  <tr>
                                    <th class="text-left text-uppercase">Subtopics</th>
                                    <th class="text-uppercase">Total</th>
                                    <th class="text-uppercase">Used</th>
                                    <th class="text-uppercase">UnUsed</th>
                                    <th class="text-uppercase">Correct</th>
                                    <th class="text-uppercase">Incorrect</th>
                                    <th class="text-uppercase">UnAttempted</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr v-for="(subtopic) in t.subtopics" :key="subtopic.id">
                                    <td class="text-left">{{ subtopic.name }}</td>
                                    <td class="text-center">{{ subtopic.total }}</td>
                                    <td class="text-center">{{subtopic.used}}</td>
                                    <td class="text-center">{{subtopic.unUsed}}</td>
                                    <td class="text-center">{{subtopic.correct}}</td>
                                    <td class="text-center">{{subtopic.incorrect}}</td>
                                    <td class="text-center">{{subtopic.unAttempted}}</td>
                                  </tr>
                                  <q-separator style="width:0%" inset />
                                </tbody>
                              </q-markup-table>
                            </q-card-section>
                          </q-card>
                        </q-expansion-item>
                      </q-list>
                    </q-tab-panel>
                  </q-tab-panels>
                </div>
                <!-- -->
                <!-- <div class="q-pa-lg flex flex-center">
                  <q-pagination v-model="current" :max="5" 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 {
      records: [],
      topics: "",
      series: [0, 0, 0, 0],
      chartOptions: {
        colors: ["#00e396", "#f34f4f", "#04b1ed", "rgb(212, 214, 214)"],
        labels: ["CORRECT", "INCORRECT", "UNATTEMPTED", "UNUSED"],
      },
      selectedQbank: {
        id: 0,
        overAllReport: {
          total: 0,
          demo: 0,
          used: 0,
          unUsed: 0,
          correct: 0,
          incorrect: 0,
          favourite: 0,
          flagged: 0,
        },
        topicWiseReport: {},
        subtopicWiseReport: {},
      },
      qBanks: [],
      qBankOptions: [],
      activeTopic: "1",
      isDataLoaded: false,
      model: "Dental Guide",
      activeTab: "overall",
    };
  },
  components: {
    apexchart: () => import("vue-apexcharts"),
  },
  computed:{
     activeQbankName() {
      let item = this.qBanks.find((e) => {
        return e.qbank.id == this.selectedQbank.id;
      });
      if (item) {
        return `<span>${item.qbank.name} </span><span class="text-primary">(${item.subscription_history[0].subscription_type})</span>`;
      } else {
        return "NA";
      }
    },
  },
  mounted() {
    this.getQbanks();
  },
  methods: {
    getQbanks: function () {
      let t = this;
      axios
        .get("/get-user-subscribed-qbanks-list")
        .then((response) => {
          console.log(response.data);
          t.qBanks = response.data;
          t.qBanks.forEach((e) => {
            t.qBankOptions.push({
              label: t.qbankName(e),
              value: e.qbank.id,
              qCount: e.qbank.qbank_question_info.all_count,
            });
          });
          if (t.qBanks.length > 0) {
            t.selectedQbank.id = t.qBanks[0].qbank.id;
          }
          t.fetchQbankPerformanceReport(t.selectedQbank.id);
        })
        .catch((e) => {
          this.hideSkeletonLoader();
        });
    },
    qbankName(item = null) {
      if (item) {
        return (
          item.qbank.name +
          "   (  " +
          item.subscription_history[0].subscription_type +
          "  )"
        );
      } else {
        item = this.qBanks.find((e) => {
          return e.qbank.id == this.selectedQbank.id;
        });
        if (item) {
          return `<span>${item.qbank.name} </span><span class="text-primary">(${item.subscription_history[0].subscription_type})</span>`;
        } else {
          return "NA";
        }
      }
    },
    fetchQbankPerformanceReport: function (qbank_id) {
      this.showSkeletonLoader();
      axios
        .get(`/get-qbank-performance-report/${qbank_id}`)
        .then((response) => {
          let topics = [];
          let usedStack = JSON.parse(
            response.data.qbank_test_question_modes.used
          );
          let incorrectStack = JSON.parse(
            response.data.qbank_test_question_modes.incorrect
          );
          let unAttemptedStack = JSON.parse(
            response.data.qbank_test_question_modes.un_attempted
          );
          response.data.qbank_test_topic.forEach((e) => {
            let used = 0;
            let incorrect = 0;
            let unAttempted = 0;
            let subtopics = [];
            let uniqueSubtopics = [];
            let totalTopicQs = 0;
            e.qbank_test_subtopic.forEach((s) => {
              let paid_easy = JSON.parse(s.paid_easy);
              let paid_medium = JSON.parse(s.paid_medium);
              let paid_hard = JSON.parse(s.paid_hard);
              let paid = [];
              paid = paid.concat(paid_easy);
              paid = paid.concat(paid_medium);
              paid = paid.concat(paid_hard);

              let demo_easy = JSON.parse(s.demo_easy);
              let demo_medium = JSON.parse(s.demo_medium);
              let demo_hard = JSON.parse(s.demo_hard);
              let free = [];
              free = free.concat(demo_easy);
              free = free.concat(demo_medium);
              free = free.concat(demo_hard);

              let all = paid.concat(free);

              totalTopicQs += all.length;

              let usedSub = 0;
              let incorrectSub = 0;
              let unAttemptedSub = 0;
              //topic
              used += all.filter((value) => usedStack.includes(value)).length;
              incorrect += all.filter((value) => incorrectStack.includes(value))
                .length;
              unAttempted += all.filter((value) =>
                unAttemptedStack.includes(value)
              ).length;
              //subtopic
              usedSub = all.filter((value) => usedStack.includes(value)).length;
              incorrectSub = all.filter((value) =>
                incorrectStack.includes(value)
              ).length;
              unAttemptedSub = all.filter((value) =>
                unAttemptedStack.includes(value)
              ).length;

              subtopics.push({
                id: s.subtopic_id,
                name: s.subtopic.name,
                total: all.length,
                used: usedSub,
                unUsed: all.length - usedSub,
                correct: usedSub - incorrectSub - unAttemptedSub,
                incorrect: incorrectSub,
                unAttempted: unAttemptedSub,
              });
            });
            topics.push({
              id: e.id,
              topic_id: e.topic_id,
              name: e.topic.name,
              total: totalTopicQs,
              used: used,
              unUsed: totalTopicQs - used,
              correct: used - incorrect - unAttempted,
              incorrect: incorrect,
              unAttempted: unAttempted,
              subtopics: subtopics,
            });
          });
          this.selectedQbank.overAllReport = {
            total: response.data.qbank_question_info.all_count,
            demo: response.data.qbank_question_info.demo_count,
            used: usedStack.length,
            unUsed:
              response.data.qbank_question_info.all_count - usedStack.length,
            correct:
              usedStack.length -
              incorrectStack.length -
              unAttemptedStack.length,

            incorrect: incorrectStack.length,
            favourite: JSON.parse(
              response.data.qbank_test_question_modes.favourite
            ).length,
            flagged: JSON.parse(response.data.qbank_test_question_modes.flagged)
              .length,
            unAttempted: unAttemptedStack.length,
          };

          this.selectedQbank.topicWiseReport = {
            topics: topics,
          };
          let chartData = [];
          chartData[0] =
            (this.selectedQbank.overAllReport.correct /
              this.selectedQbank.overAllReport.total) *
            100;
          chartData[1] =
            (this.selectedQbank.overAllReport.incorrect /
              this.selectedQbank.overAllReport.total) *
            100;
          chartData[2] =
            (this.selectedQbank.overAllReport.unAttempted /
              this.selectedQbank.overAllReport.total) *
            100;
          chartData[3] =
            (this.selectedQbank.overAllReport.unUsed /
              this.selectedQbank.overAllReport.total) *
            100;
          this.isDataLoaded = true;
          this.updateChart([...chartData]);
        });
    },
    updateChart: function (data) {
      this.chartOptions = {
        colors: ["#00e396", "#f34f4f", "#04b1ed", "rgb(212, 214, 214)"],
        labels: ["CORRECT", "INCORRECT", "UNATTEMPTED", "UNUSED"],
      };
      this.series = [...data];
      this.hideSkeletonLoader();
    },
    generateTabHeading: function (id) {
      return "heading" + id;
    },
    generateTabId: function (id) {
      return "collapse" + id;
    },
    generateTablink: function (id) {
      return "#collapse" + id;
    },
    handleTabswitching(newVal, oldVal) {
      if (newVal == 0 && this.isDataLoaded) {
        let chartData = [];
        chartData[0] =
          (this.selectedQbank.overAllReport.correct /
            this.selectedQbank.overAllReport.total) *
          100;
        chartData[1] =
          (this.selectedQbank.overAllReport.incorrect /
            this.selectedQbank.overAllReport.total) *
          100;
        chartData[2] =
          (this.selectedQbank.overAllReport.unAttempted /
            this.selectedQbank.overAllReport.total) *
          100;
        chartData[3] =
          (this.selectedQbank.overAllReport.unUsed /
            this.selectedQbank.overAllReport.total) *
          100;
        this.updateChart([...chartData]);
      }
    },
  },
};
</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;
}

.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;
}

.circle {
  border-radius: 50%;
}

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>
