<template>
  <div v-if="loading">
    <div class="row">
      <div class="col-12 col-md-8 col-sm-12 col-xs-12 order-start">
        <q-card class="q-ma-md">
          <q-card-section>
            <div class="row">
              <div class="col-4 col-md-4 col-sm-12 col-xs-12 q-pa-none flex flex-center">
                <div class="q-pa-none">
                  <q-skeleton square height="160px" width="240px">
                    <div class="flex flex-center items-center q-pt-lg">
                      <q-icon size="60px" name="play_circle_filled" color="grey" />
                    </div>
                  </q-skeleton>
                </div>
              </div>
              <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-md column items-center">
                <q-skeleton type="text" width="65%" height="50px" />
                <q-skeleton type="text" width="100%" height="25px" />
                <q-skeleton type="text" width="99%" height="25px" />
                <q-skeleton type="text" width="40%" height="25px" />
                <div class="q-py-md row">
                  <q-icon size="sm" name="forum" color="grey" class="q-mr-md" />
                  <q-skeleton type="text" width="100px" />
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>

        <q-skeleton type="rect" width="25%" height="30px" class="q-pa-md q-ma-md q-my-xl" />
        <q-card class="q-mx-md q-my-sm no-shadow bg-grey-3" bordered>
          <q-card-section class>
            <div class="q-pa-md text-body1 text-grey-8 bullets-grey">
              <ul>
                <li>
                  <q-skeleton type="text" width="36%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="44%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="25%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="30%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="45%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="40%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="30%" height="20px" />
                </li>
                <li>
                  <q-skeleton type="text" width="20%" height="20px" />
                </li>
              </ul>
            </div>
          </q-card-section>
        </q-card>
        <q-skeleton type="rect" width="25%" height="30px" class="q-pa-md q-ma-md q-my-xl" />
        <q-card class="q-mx-md q-my-sm" elevated bordered>
          <q-card-section>
            <q-skeleton type="text" width="75%" class="q-pa-md q-my-xs" />

            <div class="row" v-for="n in 6" :key="n">
              <div class="col-9 text-body1 bg-grey-3 q-pa-md borders-grey q-ma-xs rounded-borders">
                <q-skeleton type="text" width="45%" height="20px" />
              </div>
              <div
                class="col-2 bg-grey-3 q-pa-md q-ma-xs rounded-borders flex flex-center items-center"
              >
                <q-skeleton type="text" width="20%" height="25px" />
              </div>
            </div>
            <div class="row">
              <div
                class="col-9 text-body1 bg-grey-3 text-bold q-pa-md borders-grey q-ma-xs rounded-borders"
              >
                <q-skeleton type="text" width="45%" height="20px" />
              </div>
              <div
                class="col-2 bg-grey-4 q-pa-md q-ma-xs rounded-borders flex flex-center items-center"
              >
                <q-skeleton type="text" width="25%" height="25px" />
              </div>
            </div>
          </q-card-section>
        </q-card>

        <q-skeleton type="rect" width="25%" height="30px" class="q-pa-md q-ma-md q-my-lg" />

        <q-card class="q-mx-md q-my-sm">
          <q-card-section v-for="comment in 3" :key="comment" class="q-pa-none">
            <div class="q-pa-sm">
              <q-card flat bordered>
                <q-item>
                  <q-item-section avatar>
                    <q-skeleton type="QAvatar" />
                  </q-item-section>
                  <q-item-section avatar>
                    <div class="row">
                      <q-skeleton type="text" width="50px" />
                    </div>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>
                      <q-skeleton type="text" width="40%" height="30px" />
                    </q-item-label>
                    <q-item-label>
                      <q-skeleton type="text" />
                    </q-item-label>
                    <q-item-label caption>
                      <q-skeleton type="text" width="80%" />
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section avatar />
                  <q-item-section class="q-pl-sm">
                    <div class="row items-center justify-center">
                      <div class="row items-center">
                        <q-skeleton type="text" width="40px" />
                      </div>
                    </div>
                  </q-item-section>
                </q-item>
              </q-card>
            </div>
          </q-card-section>
        </q-card>
        <div class="row flex flex-center justify-center">
          <q-skeleton type="rect" width="10%" height="40px" class="q-pa-md q-ma-md q-my-lg" />
        </div>
        <div class="row flex flex-center">
          <q-skeleton square width="100%" height="50px" class="q-mb-sm" />
          <q-skeleton square width="100%" height="50px" class="q-mb-sm" />
          <q-skeleton square width="100%" height="50px" class="q-mb-sm" />
          <q-skeleton square width="15%" height="40px" class="q-my-xl" />
        </div>
      </div>
      <!--  end of col-8 -->

      <div class="col-12 col-md-4 order-end">
        <q-card class="info-card-for-loader q-ma-md fix">
          <q-card-section>
            <div class="flex flex-center">
              <q-skeleton type="rect" width="50%" height="35px" class />
            </div>

            <q-separator class="q-my-sm" inset />

            <div class="q-gutter-sm column q-ml-xl q-pl-lg">
              <div class="row flex flex-start q-mb-xs q-mt-md">
                <q-skeleton type="QRadio" size="20px" />
                <q-skeleton type="text" width="60%" height="25px" class="q-ml-md" />
              </div>
              <div class="row flex flex-start q-mb-xs">
                <q-skeleton type="QRadio" size="20px" />
                <q-skeleton type="text" width="60%" height="25px" class="q-ml-md" />
              </div>
              <div class="row flex flex-start q-mb-xs">
                <q-skeleton type="QRadio" size="20px" />
                <q-skeleton type="text" width="60%" height="25px" class="q-ml-md" />
              </div>
              <div class="row flex flex-start q-mb-xs">
                <q-skeleton type="QRadio" size="20px" />
                <q-skeleton type="text" width="60%" height="25px" class="q-ml-md" />
              </div>
            </div>

            <q-separator class="q-my-sm" inset />
            <q-card-actions class="q-gutter-xs">
              <q-skeleton type="QBtn" class="full-width show" height="30px" />
              <q-skeleton type="QBtn" class="full-width show" height="30px" />
            </q-card-actions>
            <q-card-actions class="flex flex-center q-gutter-sm row fixed-bottom z-max">
              <q-skeleton type="QBtn" class="hide" width="48%" />
              <q-skeleton type="QBtn" class="hide" width="48%" />
            </q-card-actions>
          </q-card-section>
          <q-card-section>
            <div class="flex flex-center q-pa-sm">
              <q-skeleton type="text" width="80%" height="25px" />
              <div>
                <div class="q-pa-md q-gutter-sm row">
                  <q-skeleton type="circle" size="43px" />
                  <q-skeleton type="circle" size="43px" />
                  <q-skeleton type="circle" size="43px" />
                  <q-skeleton type="circle" size="43px" />
                  <q-skeleton type="circle" size="43px" />
                </div>
              </div>
            </div>
          </q-card-section>
          <q-card-section class="q-pb-xl"></q-card-section>
        </q-card>
      </div>
    </div>
  </div>
  <q-layout class="bg-white shadow-24" v-else>
    <div class="row">
      <div class="col-12 col-md-8 col-sm-12 col-xs-12 order-start">
        <q-card class="q-ma-md" elevated bordered>
          <q-card-section>
            <div class="row">
              <div class="col-4 col-md-4 col-sm-12 col-xs-12 q-pa-none flex flex-center">
                <q-img :src="imgUrl" spinner-color="white" class="round-img" />
              </div>
              <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-md text-center text-grey-8">
                <div class="text-h4 text-bold text-grey-9">{{qbank.name}}</div>
                <div class="text-subtitle1" v-html="qbank.description"></div>

                <div class="text-blue text-body1 q-py-md">
                  <q-icon size="sm" name="forum" />
                  <a :href="'/qbank/'+slug+'#'">Testimonials</a>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Key Features</div>
        <q-card class="q-mx-md q-my-sm no-shadow bg-grey-3" bordered>
          <q-card-section class>
            <div class="q-pa-md text-body1 text-grey-8 bullets" v-html="qbank.key_feature"></div>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Topics Covered</div>
        <q-card class="q-mx-md q-my-sm" elevated bordered>
          <q-card-section>
            <div
              class="text-subtitle1"
            >The number of shown questions may change as our Qbank is subjected to constant updation.</div>
            <div class="row" v-for="t in qbank.qbank_test_topic" :key="t.id">
              <div
                class="col-9 text-body1 bg-grey-3 q-pa-md borders-grey q-ma-xs rounded-borders"
              >{{t.topic.name}}</div>
              <div
                class="col-2 text-body1 bg-blue-3 q-pa-md borders-primary q-ma-xs rounded-borders text-center"
              >{{t.total_questions}}</div>
            </div>
            <div class="row">
              <div
                class="col-9 text-body1 bg-grey-3 text-bold q-pa-md borders-grey q-ma-xs rounded-borders"
              >Total Number of Questions</div>
              <div
                class="col-2 text-body1 bg-blue-6 text-bold q-pa-md borders-primary q-ma-xs rounded-borders text-center"
              >{{qbank.qbank_question_info.all_count}}</div>
            </div>
          </q-card-section>
        </q-card>

        <div
          class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs"
          v-if="qbank.qbank_testimonial.length>0"
        >QBank Testimonials</div>
        <q-card class="q-mx-md q-my-sm" v-if="qbank.qbank_testimonial.length>0">
          <q-card-section v-for="t in qbank.qbank_testimonial" :key="t.id" class="q-pa-none">
            <div class="row">
              <div
                class="col-12 row justify-between q-pa-sm rounded-borders"
                style="border:1px solid #d1d1d1;"
              >
                <q-avatar>
                  <img :src="userImg(t.user_testimonial.user)" />
                </q-avatar>
                <div class="text-caption">{{t.user_testimonial.updated_at}} min ago</div>
                <div class="q-pa-sm">
                  <div class="text-bold">Behavioural Science</div>
                  <span
                    class="text-weight-bold"
                  >{{t.user_testimonial.user.fname}} {{t.user_testimonial.user.lname}}</span>
                  --
                  <div>
                    {{t.user_testimonial.message}}
                    <span v-if="moreComments"></span>
                    <span v-else>...</span>
                  </div>

                  <div v-show="moreComments">
                    Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, perferendis laborum, sapiente necessitatibus molestiae dolores sed dignissimos vel eaque nam amet nostrum vero. Minus, iste non dolorum ducimus et fugit.
                  </div>
                  <div class="flex flex-center">
                    <q-btn
                      flat
                      dense
                      size="sm"
                      color="primary"
                      @click="moreComments =! moreComments"
                    >
                      <span v-if="moreComments" class="q-mt-sm">- Read Less</span>
                      <span v-else class="q-mt-sm">+ Read More</span>
                    </q-btn>
                  </div>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <div class="q-my-lg">
          <comments class="hidden" />
        </div>
        <faqs v-if="qbank.qbank_faq.length>0" :faqs="qbank.qbank_faq" />
      </div>
      <!--  end of col-8 -->

      <div class="col-12 col-md-4 order-end">
        <q-card class="info-card q-ma-md fix" elevated bordered>
          <q-card-section>
            <div class="text-h5 text-grey-9 text-bold text-center">QBANK PLANS</div>

            <q-separator class="q-my-sm" inset />

            <div class="q-gutter-sm column q-ml-xl q-pl-lg">
              <q-radio
                v-model="qbankPlan"
                :val="plan.id"
                v-for="(plan) in qbank.qbank_subscrip"
                :key="plan.id"
              >
                {{plan.period.name}}
                US $
                <span
                  class="text-strike text-grey-7 text-caption"
                >{{plan.actual_price}}</span>
                <span class="text-red-10">{{plan.actual_price -plan.discount_price}}</span>
              </q-radio>
            </div>

            <q-separator class="q-my-sm" inset />
            <q-card-actions class="q-gutter-sm">
              <q-btn
                class="full-width add-cart-btn"
                color="secondary"
                :label="productStatus"
                @click="addToCart"
              ></q-btn>
              <q-btn  @click="freeTrial(qbank.id)" class="full-width free-trial-color free-trial-btn" outline label="Free Trial"></q-btn>
            </q-card-actions>
          </q-card-section>
          <q-card-section>
            <div class="text-center text-body1 text-grey-8 q-pa-sm">
              Share this course with your friend
              <!-- <social-link /> -->
            </div>
          </q-card-section>
          <q-card-section class="q-pb-xl"></q-card-section>
        </q-card>
      </div>
    </div>
  </q-layout>
</template>

<script>
import { mapGetters } from "vuex";
import { skeleton } from "../mixins/SkeletonMixin.js";
import { loader } from "../mixins/LoaderMixin.js";
import { freeTrialQbank } from "../mixins/FreeTrialQbank";
export default {
  mixins: [skeleton,loader,freeTrialQbank],
  props: ["slug"],
  data() {
    return {
      qbank: {
        qbank_subscrip: [],
        qbank_question_info: {
          all_count: 0,
        },
        qbank_faq: [],
        qbank_testimonial: [],
      },
      acrdianId: 0,
      qbankPlan: "",
      loginMode: true,
      loading: false,
      dialogFormVisible: false,
      //temp variable for quasar components alive
      text: "",
      readMore: false,
      readMore2: false,
      moreComments: false,
      morePoints: false,
      options: null,
      left: false,
      miniState: true,
      slide1: 1,
      slide2: 1,
      radios: "one",
      shape: "line",
      slide: 1,
      slides: "style",
      lorem:
        "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo. sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.",
      loading4: false,
      loader: true,
      filteredOptions: [],
      //temp variable for quasar components alive
    };
  },
  components: {
    faqs: () => import("components/FaqsLink.vue"),
    // "social-link": () => import("components/SocialLinks.vue"),
    comments: () => import("components/Comments.vue"),
  },
  mounted() {
    this.getQbankDetails();
  },
  computed: {
    imgUrl() {
      if (this.qbank) {
        return `${this.storageUrl}qbank/m/${this.qbank.image}`;
      }
      return "";
    },
    addedTocart: function () {
      return this.cart.find((e) => e.id == this.qbank.id) ? true : false;
    },
    productStatus() {
      return this.addedTocart ? "Go To Cart" : "Add To Cart";
    },
    ...mapGetters("auth", ["isLoggedIn"]),
    ...mapGetters("cart", ["cart"]),
  },
  methods: {
    userImg(user) {
      if (user.provider && user.avatar) {
        return user.avatar;
      } else {
        if (user.image) {
          return "/images/user/profile/" + user.image;
        }
        return "http://mahaexam.org.in/assets/images/user.png";
      }
    },
    getQbankDetails() {
      let t = this;
      axios
        .get("/get-qbank-details/" + this.slug)
        .then((response) => {
          t.qbank = response.data;
          if (t.qbank.qbank_subscrip.length > 0) {
            t.qbankPlan = t.qbank.qbank_subscrip[0].id;
          }
          this.hideSkeletonLoader();
        })
        .catch((e) => {
          this.hideSkeletonLoader();
          this.$router.replace({name:'notFound'});
        });
    },
    addToCart: function () {
      if (this.addedTocart) {
        this.$router.push({
          name: "cart",
        });
        return;
      }
      let plan = this.qbank.qbank_subscrip.find((e) => {
        return e.id == this.qbankPlan;
      });
      let product = {
        id: this.qbank.id,
        name: this.qbank.name,
        price: plan.actual_price,
        discount: plan.discount_price,
        type: 1,
        by: "Docexams",
        doctype: this.qbank.doctype,
        plan: plan.id,
        plans: this.qbank.qbank_subscrip.map((e) => {
          return {
            id: e.id,
            label: e.period.name,
            value: e.id,
            actual_price: e.actual_price,
            discount_price: e.discount_price,
          };
        }),
        subscriptionType: 0,
      };

      this.$store
        .dispatch("cart/addToCart", product)
        .then(() => {
          this.$q.notify({
            message: "Congrats",
            type: "success-notify",
            caption: "Added To Cart Successfully!!",
          });
        })
        .catch((e) => {
          this.$q.notify({
            message: "Failed",
            type: "error-notify",
            caption: "Sorry!! Add to cart failed.Please try again later...",
          });
        });
    }
  },
};
</script>
<style lang="css" scoped>
.bullets >>> ul {
  list-style-image: url("/statics/chkIcn.png");
}
.bullets >>> ul li {
  padding: 15px 0;
}
.bullets-grey >>> ul {
  filter: grayscale(100%);
  list-style-image: url("/statics/chkIcn.png");
}
.bullets-grey >>> ul li {
  padding: 15px 0;
}

.info-card,
.info-card-for-loader {
  width: 100%;
  max-width: 30vw;
  max-height: auto;
}

.q-card__section--vert {
  padding: 10px;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
a {
  text-decoration: none;
  color: #04b1ed;
}

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

.fix {
  position: fixed;
}
.order-start {
  order: 1;
}
.order-middle {
  order: 2;
}
.order-end {
  order: 3;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .fix {
    position: relative;
  }

  .order-start {
    order: 2;
  }
  .order-end {
    order: 1;
  }

  .bullets ul li {
    padding: 10px 0;
  }
  .bullets-grey ul li {
    padding: 10px 0;
  }
  .justify-around {
    justify-content: left;
  }
  .info-card {
    width: 100%;
    max-width: 92%;
    max-height: 420px;
  }
  .info-card-for-loader {
    width: 100%;
    max-width: 92%;
    max-height: 90%;
  }

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

  .text-h4 {
    font-size: 26px !important;
  }
  .q-card__section--horiz > div:not(:last-child),
  .q-card__section--horiz > img:not(:last-child) {
    /* top: -80px; */
    top: 0px;
  }
  .add-cart-btn {
    position: fixed;
    bottom: 0;
    z-index: 1111;
    left: 0;
    margin: 0 auto;
    max-width: 50%;
    height: 50px;
    font-size: 20px;
    border-radius: 0;
    line-height: 40px;
  }
  .free-trial-btn {
    position: fixed;
    bottom: 0;
    z-index: 1111;
    right: 0;
    margin: 0 auto;
    max-width: 50%;
    height: 50px;
    font-size: 20px;
    border-radius: 0;
    line-height: 40px;
  }
}
</style>