<template>
  <div v-if="loading">
    <div class="row">
      <div class="col-9 col-md-9 col-sm-12 col-xs-12">
        <q-skeleton type="text" width="100%" height="100px" />

        <div class="q-ma-lg flex flex-center">
          <q-skeleton type="text" width="60%" height="40px" />
        </div>
        <div class="items-start q-gutter-lg flex-center q-pa-md row">
          <q-card class="my-card bg-grey-1" v-for="cards in 1" :key="cards">
            <q-item>
              <q-item-section>
                <q-item-label>
                  <q-skeleton type="text" />
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-skeleton height="280px" square>
              <div class="q-ma-lg q-pa-md line-height">
                <q-skeleton type="text" />
                <q-skeleton type="text" />
                <q-skeleton type="text" />
              </div>
              <div class="q-gutter-sm flex-center q-ma-md row">
                <q-skeleton type="QBtn" />
                <q-skeleton type="QBtn" />
              </div>
            </q-skeleton>
          </q-card>
        </div>
        <div class="q-ma-xl flex flex-center q-py-lg">
          <q-skeleton type="text" width="40%" height="30px" />
        </div>
        <div class="full-widthh q-ma-xl">
          <q-skeleton type="text" />
          <q-skeleton type="text" />
          <q-skeleton type="text" />
          <q-skeleton type="text" />
          <q-skeleton type="text" />
        </div>
      </div>
      <div class="col-3 col-md-3 col-sm-12 col-xs-12">
        <div class="flex flex-center q-my-xs">
          <q-skeleton type="text" width="95%" height="340px" class="bg-white">
            <div class="flex flex-center column">
              <q-skeleton type="text" width="50%" height="30px" />
              <q-skeleton type="text" size="80px" class="q-my-md" />
              <q-skeleton type="text" width="90%" />
              <q-skeleton type="text" width="80%" />
              <q-skeleton type="text" width="60%" />
              <q-skeleton type="text" width="30%" />
              <q-skeleton type="text" width="50%" class="q-my-md" />
              <q-skeleton type="text" width="25%" class="q-my-md" />
            </div>
          </q-skeleton>
        </div>
      </div>
    </div>
  </div>
  <q-page v-else>
    <section>
      <div class="row">
        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
          <q-img class="width" :src="storageUrl+'page/'+page.header_img" alt="exam logo"></q-img>
          <div class="text-h5 text-bold text-grey-8 text-center q-py-xl">{{page.title}}</div>
          <div class="row items-start q-gutter-md flex-center q-pa-md">
            <q-card class="hover-fx my-card bg-grey-1" v-for="(qb) in page.qbanks" :key="qb.id">
              <img width="265px" height="95px" :src="storageUrl+'qbank/l/'+qb.image" />

              <q-card-section>
                <div class="text-h6 text-uppercase" style="line-height:1;width: 256px;">{{qb.name}}</div>
              </q-card-section>

              <q-card-section class="q-pt-none q-pl-none">
                <p style="font-size: 14px;">
                  <span class="qbank-key-feature" v-html="qb.short_key_feature"></span>
                </p>
                <div class="text-h6 text-center">
                  US $
                  <span
                    class="text-strike"
                    v-if="qb.qbank_subscrip.length>0"
                  >{{qb.qbank_subscrip[0].actual_price}}</span>
                  <!-- <span
                    style="color:#d10000;font-size: 24px;"
                    v-if="qb.qbank_subscrip.length>0"
                  >{{qb.qbank_subscrip[0].actual_price-qb.qbank_subscrip[0].discount_price}}</span>
                  <span v-show="qb.qbank_subscrip.length==0">0</span>-->
                </div>
                <!-- <div
                  class="text-caption text-center"
                  style="color:#d10000;"
                  v-if="qb.qbank_subscrip.length>0"
                >( {{qb.qbank_subscrip[0].period.name}} subscription )</div>-->
              </q-card-section>
              <q-card-section class="row flex flex-center q-gutter-xs">
                <q-btn dense color="primary" label="More Details" :to="'/qbank/'+qb.slug" />
                <q-btn dense color="secondary" label="Free Trial" @click="freeTrial(qb.id)" />
              </q-card-section>
            </q-card>
          </div>

          <div class="q-ma-lg">
            <div class="q-mx-md q-px-md text-secondary text-body1">
              <!-- <a href="https://www.youtube.com/watch?v=gwPOx9qfaAQ" style="text-decoration: none;">
                <q-btn
                  :dense="$q.screen.lt.sm"
                  flat
                  color="transparent"
                  class="full-width text-blue-8 q-mb-lg"
                  label="Watch Live Online Learning Course"
                  icon="videocam"
                />
              </a>-->
              <div v-html="page.content"></div>
            </div>
          </div>
        </div>
        <!-- end of col-9 -->
        <div class="col-3 col-md-3 col-sm-12 col-xs-12 q-ma-none q-pa-none">
          <section>
            <div class="row">
              <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                <div class="text-h5 text-bold text-grey-8 text-center q-pa-xl">
                  <span class="text-h4 text-grey-5">?</span>
                  <span class="text-h4">Testimonials</span>
                  <span class="text-h4 text-grey-5">?</span>
                </div>
                <div class="row items-start q-gutter-md flex-center">
                  <q-carousel
                    animated
                    v-model="slide"
                    navigation
                    infinite
                    :autoplay="true"
                    transition-prev="slide-right"
                    transition-next="slide-left"
                    @mouseenter="autoplay = false"
                    @mouseleave="autoplay = true"
                    control-color="secondary"
                  >
                    <q-carousel-slide v-for="(t,index) in testimonials" :key="t.id" :name="index+1">
                      <q-card class="bg-grey-2">
                        <q-card-section class="q-pt-xs q-pl-xs">
                          <div
                            class="text-secondary bg-grey-2 text-left q-mx-md q-mt-md q-mx-mobile-xl"
                            style="height: auto;"
                          >
                            <q-list>
                              <q-item>
                                <q-item-section thumbnail>
                                  <q-avatar size="80px">
                                    <img
                                      :src="userImage(t.user)"
                                    />
                                  </q-avatar>
                                </q-item-section>
                                <q-item-section class="text-bold">{{userNameWithCountry(t.user)}}</q-item-section>
                              </q-item>
                            </q-list>
                            <q-card-section>
                              <p class="text-body1">{{t.message}}</p>
                            </q-card-section>
                          </div>
                        </q-card-section>
                      </q-card>
                    </q-carousel-slide>
                  </q-carousel>
                     
                    <q-btn
                    :dense="$q.screen.lt.sm"
                    flat
                    color="transparent"
                    class="full-width text-blue-8 q-mb-lg"
                    label="View More"
                    icon="fas fa-arrow-circle-right"
                    :to="{name:'testimonials'}"
                    />
                </div>
              </div>
              <!-- end of col-9 -->
            </div>
            <!-- end of row -->
          </section>
        </div>
      </div>
      <!-- end of row -->
    </section>
    <!-- <div class="w-h bg-deep-orange-2"></div> -->
  </q-page>
</template>

<script>
import { mapGetters } from "vuex";
import { skeleton } from "../mixins/SkeletonMixin.js";
import { freeTrialQbank } from "../mixins/FreeTrialQbank";
import { loader } from "../mixins/LoaderMixin.js";
export default {
  mixins: [skeleton, loader, freeTrialQbank],
  props: ["slug"],
  data() {
    return {
      page: {
        header_img: "",
        title: "",
        content: "",
        meta_description: "",
        meta_keywords: "",
        meta_title: "",
        qbanks: [],
      },
      slide: 1,
      testimonials: [],
    };
  },
  computed: {
    pageSlug() {
      return this.slug.split(".")[0];
    },
    ...mapGetters("auth", ["isLoggedIn"]),
  },
  meta () {
    return {
      // this accesses the "title" property in your Vue "data";
      // whenever "title" prop changes, your meta will automatically update
      title: this.page.title
    }
  },
  mounted() {
    this.getPageDetails();
  },

  components: {
    testimonials: () => import("components/Testimonial.vue"),
  },
  methods: {
    getPageDetails: function () {
      axios
        .get("/medical/page/" + this.pageSlug)
        .then((res) => {
          this.page = res.data.page;
          this.testimonials = res.data.testimonials;
          this.hideSkeletonLoader();
        })
        .catch((e) => {
          this.hideSkeletonLoader();
          this.$router.replace({ name: "notFound" });
        });
    },
    userImage(user) {
      if (user.provider && user.avatar) {
        return user.avatar;
      } else {
        if (user.image) {
          return (
            "http://interfaceedu.docexams.com/storage/user/m/" +
            user.image
          );
        }
        return "http://interfaceedu.docexams.com/storage/user/s/default.png";
      }
    },
    userNameWithCountry(user) {
      if (user) {
        let name = `${user.fname} ${user.lname}`;
        if (user.Country) {
          name += `, ${user.country.name}`;
        }
        return name;
      }
      return "N/A";
    },
  },
};
</script>
<style lang="css" scoped>
.q-carousel {
  height: 100%;
  margin-left:0px;
}
.q-carousel__slide {
  padding: 0px;
}

.watch-link {
  background: lightblue !important;
}
.my-card {
  width: 100%;
  max-width: 265px;
}
.borders {
  border: 1px solid red;
}
a {
  text-decoration: none;
}
.links a {
  text-decoration: none;
  color: #7dddfd;
}
.links a:hover {
  color: #04b1ed;
  text-decoration: underline;
}
.links-blue a {
  text-decoration: none;
  color: #0059ff;
}
.links-blue a:hover {
  color: #000bac;
  text-decoration: underline;
}

.ul-style {
  list-style-type: circle;
}
.ul-style li {
  padding: 6px 5px;
}
.ul-style a {
  text-decoration: none;
  color: #056f92;
  font-size: 18px;
}
.ul-style a:hover {
  color: #029fd3;
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}
.w-h {
  width: 100%;
  height: 50vh;
}
.my-custom-image {
  width: 200px !important;
  height: 200px !important;
}
.text-align {
  text-align: left;
}
.bullets ul {
  list-style-image: url("../statics/chkIcn.png");
}
.bullets ul li {
  padding: 5px 0;
}
.bullets-grey ul {
  filter: grayscale(100%);
  list-style-image: url("../statics/chkIcn.png");
}
.bullets-grey ul li {
  padding: 5px 0;
}
.line-height .q-skeleton {
  margin: 12px 0;
}
.hover-fx {
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2),
    0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in;
}
.on-hover {
  transition: all 0.3s ease-in;
}
.on-hover:hover {
  background-color: #015e8a !important;
  transition: all 0.3s ease-in;
}
.fix-top {
  position: fixed;
}
.width {
  width: 70%;
}
.q-mx-mobile-xl {
  margin-left: 6px;
  margin-right: 6px;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .font-size {
    font-size: 14px;
  }
  .my-card {
    /*width: 100%;*/
    max-width: 100%;
  }
  .my-custom-image {
    width: 120px !important;
    height: 120px !important;
  }
  .text-align {
    text-align: center;
  }
  .fix-top {
    position: relative !important;
  }
  .width {
    width: 100%;
  }
  .q-mx-mobile-xl {
    margin-left: 32px;
    margin-right: 32px;
  }
}
</style>