<template>
  <div v-if="loading">
    <div>
      <div class="q-pa-md q-py-md">
        <q-skeleton height="40px" square style="width: 250px;" />
      </div>
      <div class="row">
        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
          <div class="q-pa-md">
            <q-card>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    <q-skeleton type="text" />
                  </q-item-label>
                  <q-item-label caption>
                    <q-skeleton type="text" />
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-skeleton height="200px" square>
                <q-item-section class="flex flex-center">
                  <q-skeleton style="width: 150px;height:150px;" type="QAvatar" />
                </q-item-section>
              </q-skeleton>

              <q-card-actions>
                <q-skeleton class="no-border-radius full-width" type="QBtn" />
              </q-card-actions>
            </q-card>
          </div>
        </div>
        <div class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm">
          <div class="q-pa-md">
            <q-card>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    <q-skeleton type="text" />
                  </q-item-label>
                  <q-item-label caption>
                    <q-skeleton type="text" />
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-skeleton height="200px" square>
                <q-item-section class="flex flex-center">
                  <q-skeleton style="width: 150px;height:150px;" type="QAvatar" />
                </q-item-section>
              </q-skeleton>

              <q-card-actions>
                <q-skeleton class="no-border-radius full-width" type="QBtn" />
              </q-card-actions>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="q-pa-md" v-else>
    <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
      <div>
        <div class="text-h5 q-pb-md">Welcome</div>
        <div class="row">
          <div
            class="col-6 col-md-6 col-sm-12 col-xs-12 q-pa-sm"
            v-for="(record) in records"
            :key="record.id"
          >
            <q-card>
              <q-banner class="bg-green-1" v-if="isSubscriptionActive(record)">
                <div class="text-subtitle1 text-green-5">Subscription Active!</div>
                <span :class="[subscriptionType(record)+'-badge']"></span>
                <template v-slot:avatar>
                  <q-icon name="fas fa-check-circle" />
                </template>
                <div class="text-caption text-green-5">Subscription is Active.</div>
              </q-banner>

              <q-banner class="bg-red-1" v-else>
                <div class="text-subtitle1 text-red-5">Subscription Expired!</div>
                <span :class="[subscriptionType(record)+'-badge']"></span>
                <template v-slot:avatar>
                  <q-icon name="cancel" color="negative" />
                </template>
                <div class="text-caption text-red-5">
                  Subscription Has Expired.
                  <a href>Click here</a> to renew
                </div>
              </q-banner>

              <q-card-section>
                <div class="row">
                  <div class="col-12 text-body1 text-bold text-uppercase">
                    {{ record.qbank.name }}
                    <span
                      v-if="subscriptionType(record)=='paid'"
                      class="text-primary"
                    >({{ record.subscription_history[0].qbank_subscrip.period.name }})</span>
                    <span
                      v-else
                      class="text-primary"
                    >({{record.subscription_history[0].subscription_type}})</span>
                  </div>
                  <div class="col-6 col-md-6 col-sm-6 col-xs-12">
                    <q-list>
                      <q-item>
                        <q-item-section>Total Questions:</q-item-section>
                        <q-item-section side>{{ record.qbank.qbank_question_info.all_count }}</q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section>Subscribed at:</q-item-section>
                        <q-item-section side>{{ record.subscription_history[0].activation_date }}</q-item-section>
                      </q-item>
                    </q-list>
                  </div>
                  <div class="col-6 col-md-6 col-sm-6 col-xs-12">
                    <q-list>
                      <q-item>
                        <q-item-section>Demo Ques:</q-item-section>
                        <q-item-section side>{{ record.qbank.qbank_question_info.demo_count }}</q-item-section>
                      </q-item>

                      <q-item>
                        <q-item-section>Expires at:</q-item-section>
                        <q-item-section
                          side
                          v-if="subscriptionType(record)=='paid'"
                        >{{ record.subscription_history[0].expiration_date }}</q-item-section>
                        <q-item-section side v-else>-</q-item-section>
                      </q-item>
                    </q-list>
                  </div>
                </div>
              </q-card-section>
              <q-no-ssr>
                <apexchart
                  type="pie"
                  height="200"
                  width="300"
                  :options="chartOptions"
                  :series="series"
                ></apexchart>
              </q-no-ssr>
              <div class="row" v-if="subscriptionType(record)!='paid'">
                <div class="col-6 col-md-6">
                  <router-link
                    :to="{
                    name: 'qbank-create-test',
                    query: { id: record.qbank.id }
                  }"
                  >
                    <q-btn color="primary" class="no-border-radius fit" label="Create Test" />
                  </router-link>
                </div>
                <div class="col-6 col-md-6">
                  <q-btn
                    color="secondary"
                    class="no-border-radius fit"
                    label="Buy Premium Version"
                  />
                </div>
              </div>
              <q-btn
                color="red"
                v-else-if="!isSubscriptionActive(record) && subscriptionType(record)=='paid'"
                class="full-width no-border-radius"
                label="Renew Subscription"
                @click="showQbankRenewModal(record.qbank)"
              />
              <router-link
                v-else
                :to="{
                    name: 'qbank-create-test',
                    query: { id: record.qbank.id }
                  }"
              >
                <q-btn color="primary" class="full-width no-border-radius" label="Create Test" />
              </router-link>
            </q-card>
          </div>
        </div>
      </div>
    </transition>
    <q-dialog v-model="dialogVisible" persistent transition-show="scale" transition-hide="scale">
      <q-card style="width: 95%" class="q-px-sm q-pb-md bg-blue text-white">
        <q-card-section>
          <div class="text-h6">Qbank Subcription Renewal</div>
        </q-card-section>
        <q-item dense>
          <div class="q-pa-sm" style="min-width: 100%;">
            <q-card-section class="text-h6 text-center">
              {{qbankForm.qbank.name}}
              <p>Qbank Plans</p>
              <div class="q-plan column">
                <div v-for="(plan) in qbankForm.qbank.qbank_subscrip" :key="plan.id">
                  <q-item tag="label" v-ripple>
                    <q-item-section avatar>
                      <q-radio
                        v-model="qbankForm.selectedPlan"
                        :val="plan.id"
                        :label="plan.period.name"
                      />
                    </q-item-section>
                    =
                    <q-item-section>
                      <q-item-label style="padding-left: 12px;text-align:left;">
                        US $
                        <span class="text-strike">{{plan.actual_price}}</span>
                        <span
                          style="color:#d10000;font-size: 24px;"
                        >${{plan.actual_price -plan.discount_price}}</span>
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                </div>
              </div>

              <div v-if="planError" class="plan-error">please choose plan to continue..</div>
            </q-card-section>
          </div>
        </q-item>

        <div class="q-pa-sm" style="min-width: 100%;">
          <q-item dense class="flex-center">
            <q-btn :loading="false" type="submit" color="primary" class="full-width" label="Submit">
              <template v-slot:loading>
                <q-spinner-hourglass class="on-left" />Submitting...
              </template>
            </q-btn>

            <q-btn
              class="q-ma-sm bg-white text-blue"
              color="negative"
              text-color="white"
              label="Cancel"
              v-close-popup
            />
          </q-item>
        </div>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { skeleton } from "../../mixins/SkeletonMixin.js";
export default {
  mixins: [skeleton],
  data() {
    return {
      records: [],
      dialogVisible: false,
      qbankForm: {
        qbank: {
          id: "",
          name: "",
        },
        qbank_subscrip: [],
        selectedPlan: "",
      },
      planError: false,
      isRequestInProgress: false,
      series: [0, 100],
      chartOptions: {
        colors: ["#00e396", "#f34f4f"],
        labels: ["Correct", "Incorrect"],
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 200,
              },
              legend: {
                position: "bottom",
              },
            },
          },
        ],
      },
    };
  },
  components: {
    apexchart: () => import("vue-apexcharts"),
  },
  computed: {
    ...mapGetters(["cart"]),
    addedTocart: function () {
      return this.cart.find((e) => e.id == this.qbankForm.qbank.id)
        ? true
        : false;
    },
  },
  mounted() {
    this.getUserSubscribedQbanks();
  },
  methods: {
    getUserSubscribedQbanks() {
      let t = this;
      axios
        .get("/get-user-subscribed-qbanks")
        .then((response) => {
          console.log(response.data);
          t.records = response.data;
          this.hideSkeletonLoader();
        })
        .catch((e) => {
          this.hideSkeletonLoader();
        });
    },
    showQbankRenewModal(qbank) {
      this.qbankForm.qbank = qbank;
      this.dialogVisible = true;
    },
    createTest(record) {
      if (
        record.active_subscription_count == 0 &&
        record.subscription_history[0].subscription_type == "Paid"
      ) {
        this.showQbankRenewModal(record.qbank);
        return;
      }
      this.$router.push({
        name: "qbank-create-test",
        query: { id: record.qbank.id },
      });
    },
    renewSubscription() {
      if (this.isRequestInProgress) {
        return;
      }
      if (this.qbankForm.selectedPlan == "") {
        this.planError = true;
        return;
      }
      this.isRequestInProgress = true;
      this.addToCart();
    },
    addToCart: function () {
      if (this.addedTocart) {
        this.$router.push({ name: "shoppig-cart" });
        return;
      }
      let plan = this.qbankForm.qbank.qbank_subscrip.find((e) => {
        return e.id == this.qbankForm.selectedPlan;
      });
      let product = {
        id: this.qbankForm.qbank.id,
        name: this.qbankForm.qbank.name,
        price: plan.actual_price,
        discount: plan.discount_price,
        type: 1,
        by: "Docexams",
        doctype: this.qbankForm.qbank.doctype,
        plan: plan.id,
        subscriptionType: 1,
      };

      this.$store.dispatch("addToCart", product).then(() => {
        this.$router.push({ name: "checkout" });
      });
    },
    isSubscriptionActive(record) {
      if (
        record &&
        record.subscription_history.length > 0 &&
        record.active_subscription_count > 0
      ) {
        return true;
      }
      return record.subscription_history[0].subscription_type == "Paid"
        ? false
        : true;
    },
    subscriptionType(record) {
      if (record && record.subscription_history.length > 0) {
        return record.subscription_history[0].subscription_type == "Paid"
          ? "paid"
          : "free";
      }
      return "error-badge";
    },
  },
  watch: {
    "qbankForm.selectedPlan": function (e) {
      if (!isNaN(e)) {
        this.planError = false;
      }
    },
  },
};
</script>

<style lang="css" scoped>
a {
  text-decoration: none;
  color: #222222;
}
a:hover {
  color: #04b1ed;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
.border {
  border: none;
}
.my-card {
  width: 100%;
  /* max-width: 430px; */
}
.hover-fx {
  transform: scale(1);
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  transform: scale(0.96);
  transition: all 0.3s ease-in;
}
.paid-badge {
  position: absolute;
  background-color: green;
  color: #ffffff;
  width: 100px;
  height: 70px;
  right: 0;
  top: 0;
  text-align: right;
  padding: 2px;
  font-size: 22px;
  clip-path: polygon(20% 0%, 100% 0%, 100% 85%);
}
.paid-badge:after {
  content: "Paid";
}
.free-badge {
  position: absolute;
  background-color: red;
  color: #ffffff;
  width: 100px;
  height: 70px;
  right: 0;
  top: 0;
  text-align: right;
  padding: 2px;
  font-size: 22px;
  clip-path: polygon(20% 0%, 100% 0%, 100% 85%);
}
.free-badge:after {
  content: "Free";
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
  .border {
    border: 1px solid #d1d1d1;
    margin: 5px;
  }
}

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