<template>
  <div v-if="loading">
    <div class="q-ma-md">
      <q-skeleton height="420px" />
    </div>
    <div class="flex flex-center q-pt-lg">
      <q-skeleton width="300px" height="40px" />
    </div>
    <div class="row q-mx-xl">
      <div class="col-3 q-mt-xl" v-for="n in 12" :key="n">
        <div class="q-pa-sm">
          <q-card>
            <q-item>
              <q-item-section></q-item-section>
            </q-item>

            <q-skeleton height="250px" square />

            <q-card-actions align="right" class="q-gutter-md flex flex-center">
              <q-skeleton type="QBtn" />
              <q-skeleton type="QBtn" />
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
    <div class="row q-ma-lg" style="float: right !important;">
      <div class="col-12">
        <q-skeleton width="250px" height="40px" />
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
      <div class="col-12">
        <q-skeleton height="400px">
          <div class="flex flex-center column q-pt-lg">
            <q-skeleton width="300px" height="40px" />
            <q-skeleton size="100px" class="q-my-lg" />
          </div>
          <div class="q-pa-lg">
            <q-skeleton />
            <q-skeleton />
            <q-skeleton />
          </div>
          <div class="col-12 flex flex-center">
            <q-skeleton width="150px" height="40px" />
          </div>
        </q-skeleton>
      </div>
    </div>
  </div>

  <q-page v-else>
    <div class="q-pa-none">
      <div>
        <q-carousel
          animated
          v-model="slide"
          navigation
          infinite
          :autoplay="autoplay"
          arrows
          transition-prev="slide-right"
          transition-next="slide-left"
          @mouseenter="autoplay = false"
          @mouseleave="autoplay = true"
          class="mob-size"
        >
          <q-carousel-slide :name="1" :img-src="storageUrl+'images/1h-slider.jpg'" />
          <q-carousel-slide :name="2" :img-src="storageUrl+'images/2h-slider.jpg'" />
          <q-carousel-slide :name="3" :img-src="storageUrl+'images/3h-slider2.jpg'" />
        </q-carousel>
      </div>
    </div>

    <div class="row flex flex-center">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="q-pb-xl" style="color: #5c5c5c;margin-top: 60px;">
          <span class="text-h4 flex flex-center text-center text-bold q-pt-md">POPULAR QBANKS</span>
          <h5 class="q-pa-none q-ma-none text-primary text-center">_____________________</h5>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="row items-start q-gutter-md flex-center q-pa-lg">
          <!-- <q-card class="hover-fx my-card bg-grey-1 q-mb-lg" v-for="(qb) in qbanks" :key="qb.id">
          <img v-if="images=12" width="265px" height="95px" :src="storageUrl+'qbank/l/'+qb.image" />-->
          <q-card class="hover-fx my-card bg-grey-1" v-for="(qb) in 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>
    </div>

    <div class="row q-mb-xl" style="float: right !important;">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <q-btn
          color="primary q-ma-lg"
          outline
          icon-right="navigate_next"
          label="VIEW ALL QBANKS"
          to="/find-medical-qbank"
        />
      </div>
    </div>

    <!-- <div class="w-h bg-deep-orange-2" style="margin-top: 100px;"> -->
    <div class="testi-bg q-mt-xs flex flex-center containers">
      <div class="text-h2 text-bold text-black text-center q-pa-lg" style="width: 100%;">
        <div
          class="text-h5 text-center text-bold q-pt-md text-secondary"
          style="letter-spacing: 1px;"
        >
          WHAT CUSTOMERS ARE SAYING ABOUT US
          <h5 class="q-pa-none q-ma-none text-primary">____________________________</h5>
        </div>
      </div>
      <q-carousel
        v-model="testimonials"
        transition-prev="scale"
        transition-next="scale"
        swipeable
        animated
        control-color="white"
        padding
        autoplay
        infinite
        arrows
        height="auto"
        class="bg-transparent no-shadow text-black shadow-1 rounded-borders"
      >
        <q-carousel-slide name="style" class="column no-wrap flex-center">
          <q-avatar circled size="100px">
            <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
          </q-avatar>
          <div class="q-mt-md text-center text-body1 text-secondary">
            {{ lorem }}
            <div class="text-overline text-white">- Alina Khan -</div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="tv" class="column no-wrap flex-center">
          <q-avatar circled size="100px">
            <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
          </q-avatar>
          <div class="q-mt-md text-center text-body1 text-secondary">
            {{ lorem }}
            <div class="text-overline text-white">- Asim Khan -</div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="layers" class="column no-wrap flex-center">
          <q-avatar circled size="100px">
            <img src="https://cdn.quasar.dev/img/avatar3.jpg" />
          </q-avatar>
          <div class="q-mt-md text-center text-body1 text-secondary">
            {{ lorem }}
            <div class="text-overline text-white">- Razia Sultana -</div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="map" class="column no-wrap flex-center">
          <q-avatar circled size="100px">
            <img src="https://cdn.quasar.dev/img/avatar4.jpg" />
          </q-avatar>
          <div class="q-mt-md text-center text-body1 text-secondary">
            {{ lorem }}
            <div class="text-overline text-white">- Janifer Dave -</div>
          </div>
        </q-carousel-slide>
      </q-carousel>
      <q-btn class="q-mb-lg" outline color="secondary" style="width: 150px">
        Read More
        <template v-slot:loading>
          <q-spinner-hourglass class="on-left" />Loading...
        </template>
      </q-btn>
    </div>
  </q-page>
</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],
  data() {
    return {
      slide: 1,
      autoplay: true,
      qbanks: [],
      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.",
      testimonials: "style",
      images: [
        {
          image: "1584373520.jpg",
        },
        {
          image: "1584373272.jpg",
        },
        {
          image: "1584373113.jpg",
        },
        {
          image: "1584372853.jpg",
        },
        {
          image: "1584372692.jpg",
        },
        {
          image: "6.jpg",
        },
        {
          image: "7.jpg",
        },
        {
          image: "8.jpg",
        },
        {
          image: "9.jpg",
        },
        {
          image: "10.jpg",
        },
      ],
    };
  },
  mounted() {
    axios
      .get("/popular/products")
      .then((response) => {
        this.qbanks = response.data.qbanks;
        this.hideSkeletonLoader();
      })
      .catch((e) => {
        this.hideSkeletonLoader();
      });
  },
  computed: {
    ...mapGetters("auth", ["isLoggedIn"]),
  },
  methods: {},
};
</script>
<style lang="css" scoped>
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.borders {
  border: 1px solid red;
}
.links a {
  text-decoration: none;
  color: #7dddfd;
}
.links a:hover {
  color: #04b1ed;
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}
.w-h {
  width: 100%;
  height: 50vh;
}
.my-card {
  width: 100%;
  max-width: 265px;
}
.my-custom-image {
  width: 200px !important;
  height: 200px !important;
}
.text-align {
  text-align: left;
}

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

.testi-bg {
  height: 80%;
  width: 100%;
  background-image: radial-gradient(
      circle,
      rgba(247, 199, 155, 0.92),
      rgba(253, 132, 62, 0.94)
    ),
    url(../statics/testiBg.svg);
  background-repeat: repeat;
}
.mob-size {
  max-width: 100%;
  height: 500px !important;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .mob-size {
    margin: 0;
    max-width: 100%;
    height: 150px !important;
  }
  .font-size {
    font-size: 14px;
  }
  .my-custom-image {
    width: 120px !important;
    height: 120px !important;
  }
  .text-align {
    text-align: center;
  }

  .testi-bg {
    height: 100% !important;
  }
}
</style>

