<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <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="model" :options="options" label="Select Test" />
              </q-card-section>
            </q-card>
            <q-card>
              <q-card-section>
                <div class="q-gutter-y-md">
                  <q-tabs
                    v-model="tab"
                    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="tab" animated style="border:1px solid #eee;">
                    <q-tab-panel name="overall">
                      <div class="text-h6 text-grey-9 q-pb-lg">
                        <strong>{{model}}</strong>
                      </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>10</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>3</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 Incorrect Qs:</q-item-section>
                              <q-item-section side>7</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>0</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 Flagged Qs:</q-item-section>
                              <q-item-section side>0</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>0</q-item-section>
                            </q-item>
                          </q-list>
                        </div>
                        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
                          <div class="text-h6">Pie chart not show</div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                          <pie-chart
                            class="q-mt-md"
                            background-color="#d1d1d1"
                            style="padding: 10px;display: flex;justify-content: center;
                  align-items: center;width: 98%;height: 98%;margin:10px;border-radius:6px;"
                            color="black"
                            :plot="plot"
                          ></pie-chart>
                        </div>
                      </div>
                    </q-tab-panel>

                    <q-tab-panel name="topicwise">
                      <q-list>
                        <q-expansion-item
                          group="somegroup"
                          label="Internal Medicine"
                          header-class="bg-grey-3 text-grey-9 q-my-xs"
                          expand-icon-class="text-grey-9"
                        >
                          <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>10</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>3</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>Incorrect:</q-item-section>
                                      <q-item-section side>7</q-item-section>
                                    </q-item>
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Favourite:</q-item-section>
                                      <q-item-section side>0</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>Flagged:</q-item-section>
                                      <q-item-section side>0</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>0</q-item-section>
                                    </q-item>
                                  </q-list>
                                </div>
                              </div>
                            </q-card-section>
                          </q-card>
                        </q-expansion-item>

                        <q-separator />

                        <q-expansion-item
                          group="somegroup"
                          label="Surgery"
                          header-class="bg-grey-3 text-grey-9"
                          expand-icon-class="text-grey-9"
                        >
                          <q-card class="bg-grey-1">
                            <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>10</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>3</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>Incorrect:</q-item-section>
                                      <q-item-section side>7</q-item-section>
                                    </q-item>
                                    <q-item class="q-mb-md bg-grey-3">
                                      <q-item-section>Favourite:</q-item-section>
                                      <q-item-section side>0</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>Flagged:</q-item-section>
                                      <q-item-section side>0</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>0</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 v-for="m in 5" :key="m" >
                        <q-expansion-item
                          group="somegroup"
                          header-class="bg-grey-3 text-grey-9 q-my-xs"
                          expand-icon-class="text-grey-9"
                        >
                          <template v-slot:header>
                            <q-item-section>{{topicwise[m]}}</q-item-section>
                            <q-item-section side>
                              <div
                                class="row items-right"
                              >Total Questions: {{Math.floor(Math.random()*m*10)}}</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">correct</th>
                                    <th class="text-uppercase">Incorrect</th>
                                    <th class="text-uppercase">UnAttempted</th>
                                    <th class="text-uppercase">Favourite</th>
                                    <th class="text-uppercase">Flagged</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr v-for="n in 5" :key="n">
                                    <td class="text-left">{{subtopicwise[n]}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</td>
                                    <td class="text-center">{{n*Math.floor(Math.random()*n)}}</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 PieChart from "@tygr/vue-pie-chart";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      current: 3,
      model: "Dental Guide",
      tab: "overall",
      options: ["Dental Guide", "Surgery", "Abc course", "USMLE Step 1 course"],
      subtopicwise: [
        "",
        "Internal Medicine",
        "Respiratory",
        "Infectious Deseases",
        "GIT",
        "Cardiavascular"
      ],
      topicwise: [
        "",
        "Internal Medicine",
        "Surgery",
        "Peads",
        "Dentistry",
        "Bevaioural Science"
      ]
    };
    data: () => ({
      plot: [
        {
          value: 55,
          color: "green",
          label: "Completed",
          id: 1
        },
        {
          value: 15,
          color: "red",
          label: "Not Start",
          id: 2
        },
        {
          value: 30,
          color: "#04b1ed",
          label: "Inporgress",
          id: 3
        }
      ]
    });
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      return date.formatDate(timeStamp, "dddd D MMMM");
    }
  }
};
</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>
