<template>
  <div v-if="loading">
    <div class="row">
      <div class="col-9 col-md-9 col-sm-12 col-xs-12">
        <div class="q-ma-lg flex flex-center q-gutter-sm q-pb-lg">
          <q-skeleton type="text" width="30%" height="30px" />
        </div>
        <div class="items-start q-gutter-lg flex-center q-pa-md row">
          <q-card class="my-card bg-grey-2">
            <q-item>
              <q-item-section avatar>
                <q-skeleton type="QAvatar" />
              </q-item-section>

              <q-item-section>
                <q-item-label>
                  <q-skeleton type="text" width="40%" />
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-skeleton height="220px" class="bg-grey-2">
              <div class="q-ma-xl">
                <q-skeleton type="text" />
                <q-skeleton type="text" />
                <q-skeleton type="text" />
                <q-skeleton type="text" />
                <q-skeleton type="text" width="60%" />
              </div>
            </q-skeleton>
          </q-card>
          <div class="q-pa-lg flex flex-center" style="width: 90%;">
            <q-item>
              <q-item-section class="q-pl-sm">
                <div class="row items-center justify-between no-wrap">
                  <div class="row items-center">
                    <q-icon name="first_page" color="grey-4" class="q-mr-sm" size="24px" />
                    <q-icon name="navigate_before" color="grey-4" class="q-mr-sm" size="24px" />
                  </div>

                  <div class="row items-center">
                    <q-skeleton type="text" width="40px" />
                  </div>

                  <div class="row items-center">
                    <q-icon name="navigate_next" color="grey-4" class="q-mr-sm" size="24px" />
                    <q-icon name="last_page" color="grey-4" class="q-mr-sm" size="24px" />
                  </div>
                </div>
              </q-item-section>
            </q-item>
          </div>
        </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">
          <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-pa-md">
            <q-card class="bg-grey-2" v-for="(t) in testimonials" :key="t.id">
              <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>
            <div class="q-pa-lg flex flex-center">
              <q-pagination
                v-model="currentPage"
                :max="pagesCount"
                input
                input-class="text-orange-10"
                @input="handleCurrentChange"
              />
            </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"></div>
      </div>
      <!-- end of row -->
    </section>
    <!-- <div class="w-h bg-deep-orange-2"></div> -->
  </q-page>
</template>

<script>
import { skeleton } from "../mixins/SkeletonMixin.js";
export default {
  mixins: [skeleton],
  data() {
    return {
      testimonials: [],
      currentPage: 1,
      pageSize: 5,
      baseTestimonialsUrl: `/testimonials/`,
      pagesCount: 0,
    };
  },
  mounted() {
    this.getTestimonials(this.baseTestimonialsUrl + this.pageSize);
  },
  methods: {
    getTestimonials(url) {
      let t = this;
      axios
        .get(url)
        .then((res) => {
          t.testimonials = res.data.data;
          t.currentPage = res.data.current_page;
          t.pagesCount = res.data.last_page;
          window.scrollTo(0,0);
          this.hideSkeletonLoader();
        })
        .catch((e) => {
          this.hideSkeletonLoader();
        });
    },
    handleCurrentChange(val) {
      let url = this.baseTestimonialsUrl + this.pageSize + `?page=${val}`;
      this.getTestimonials(url);
    },
    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>
.my-card {
  width: 100%;
  max-width: 100%;
}
.borders {
  border: 1px solid red;
}
.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>