<template>
  <div>
    <section class="bg-map">
      <!-- <div class="column col-height-tuts bg-map-mob hide">
        <div class="col-sm-6 q-mb-sm absolute">
          <q-card class="my-card2 bg-transparent" flat>
            <q-card-section horizontal>
              <q-card-section class="q-pt-xs">
                <div class="flex flex-center">
                  <div
                    class="text-h3 text-bold text-grey-10 text-center q-ml-md q-mt-md q-pl-lg"
                  >Meet some of our best tutors</div>
                  <div
                    class="text-h6 text-grey-8 text-center q-pa-xs q-ml-sm q-pl-lg"
                  >Fastest growing list of qualified tutors from globally recognized medical institutions.</div>
                  <div class="q-mb-md q-gutter-sm q-pl-lg q-mt-lg">
                    <q-btn size="md" color="secondary" label="Find A Tutor" to="/search/tutors" />
                    <q-btn size="md" color="primary" label="Become A Tutor" />
                  </div>
                </div>
              </q-card-section>
            </q-card-section>
          </q-card>
          <q-card class="my-card2 bg-transparent q-ml-xl" flat>
            <div class="col-6">
              <div class="q-col-gutter-none row">
                <div class="face-card">
                  <q-img class="img-hover" src="statics/photo1.jpg" />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center middle"
                    self="center middle"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>Abe A.</h3>
                      <p>Oklahoma State University 2015</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div
                        class="text-subtitle1"
                      >“He is very descriptive and polite. His passion for Chemistry is also pretty obvious.”</div>
                    </div>
                  </q-tooltip>
                </div>
                <div class="face-card">
                  <q-img class="img-hover" src="statics/photo2.jpg" />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center middle"
                    self="center middle"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>Abe B.</h3>
                      <p>Oklahoma State University 2015</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div
                        class="text-subtitle1"
                      >“He is very descriptive and polite. His passion for Chemistry is also pretty obvious.”</div>
                    </div>
                  </q-tooltip>
                </div>
              </div>
              <div class="q-col-gutter-none row">
                <div class="face-card">
                  <q-img class="img-hover" src="statics/photo5.jpg" />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center middle"
                    self="center middle"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>Abe E.</h3>
                      <p>Oklahoma State University 2015</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div
                        class="text-subtitle1"
                      >“He is very descriptive and polite. His passion for Chemistry is also pretty obvious.”</div>
                    </div>
                  </q-tooltip>
                </div>
                <div class="face-card">
                  <q-img class="img-hover" src="statics/photo6.jpg" />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center middle"
                    self="center middle"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>Abe F.</h3>
                      <p>Oklahoma State University 2015</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div
                        class="text-subtitle1"
                      >“He is very descriptive and polite. His passion for Chemistry is also pretty obvious.”</div>
                    </div>
                  </q-tooltip>
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>-->
      <div class="column col-height-tuts q-mt-xl best-tutors-container">
        <div class="">
          <q-card class="my-card2 bg-transparent" flat>
            <q-card-section horizontal>
              <q-card-section class="q-pt-xs">
                <div class>
                  <div
                    class="text-h4 text-bold text-grey-10 q-pa-lg q-mt-xl best-tutors-heading"
                  >Meet some of our best tutors</div>
                  <div class="text-h6 text-grey-8 text-left q-pa-xs q-pl-lg">
                    Fastest growing list of qualified tutors from globally
                    <br />recognized medical institutions.
                  </div>
                  <div class="q-mb-md q-gutter-sm q-pl-lg q-mt-lg">
                    <q-btn size="md" color="secondary" label="Find A Tutor" to="/search/tutors" />
                    <q-btn size="md" color="primary" label="Become A Tutor" />
                  </div>
                </div>
              </q-card-section>
            </q-card-section>
          </q-card>
        </div>
        <div class="tutor-seprator">
          <q-card class="my-card2 bg-transparent" flat>
            <q-card-section horizontal></q-card-section>
          </q-card>
        </div>
        <div class="col-sm-6 w-50 tutors-container">
          <q-card class="my-card2 bg-transparent q-ml-xl" flat>
            <div class="q-ml-md-lg q-pa-none">
              <div class="q-col-gutter-none row mobile-tutors">
                <div class="face-card" v-for="t in firstRow" :key="t.id">
                  <q-img class="img-hover" :src="'http://docexams.com/storage/tutor/profile/m/'+t.image" />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center left"
                    self="center right"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>{{t.user.fname}} {{t.user.lname}}</h3>
                      <p>{{t.tutor_education[0].degree}} from {{t.tutor_education[0].institute}} in {{t.tutor_education[0].year.name}}</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div
                        class="text-subtitle1"
                        v-html="truncate(tutors[0].user.about_me,8)"
                      ></div>
                    </div>
                  </q-tooltip>
                </div>
              </div>
              <div class="q-col-gutter-none row">
                <div class="face-card" v-for="t in secondRow" :key="t.id">
                  <q-img
                    class="img-hover"
                    :src="'http://docexams.com/storage/tutor/profile/m/'+t.image"
                  />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center left"
                    self="center right"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>{{t.user.fname}} {{t.user.lname}}</h3>
                      <p>{{t.tutor_education[0].degree}} from {{t.tutor_education[0].institute}} in {{t.tutor_education[0].year.name}}</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div class="text-subtitle1" v-html="truncate(tutors[0].user.about_me,8)"></div>
                    </div>
                  </q-tooltip>
                </div>
              </div>
              <div class="q-col-gutter-none row">
                <div class="face-card" v-for="t in thirdRow" :key="t.id">
                  <q-img
                    class="img-hover"
                    :src="'http://docexams.com/storage/tutor/profile/m/'+t.image"
                  />
                  <q-tooltip
                    content-class="bg-white shadow-14"
                    anchor="center left"
                    self="center right"
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <div class="text-grey-9 text-center popup-wh">
                      <h3>{{t.user.fname}} {{t.user.lname}}</h3>
                      <p>{{t.tutor_education[0].degree}} from {{t.tutor_education[0].institute}} in {{t.tutor_education[0].year.name}}</p>
                      <span class="text-orange">27 positive reviews</span>

                      <div class="text-subtitle1" v-html="truncate(tutors[0].user.about_me,8)"></div>
                    </div>
                  </q-tooltip>
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: ["tutors"],
  computed: {
    firstRow() {
      return this.tutors.slice(0, 4);
    },
    secondRow() {
      if (this.tutors.length > 4) {
        return this.tutors.slice(4, 8);
      }
      return [];
    },
    thirdRow() {
      if (this.tutors.length > 8) {
        return this.tutors.slice(8, 12);
      }
      return [];
    }
  },
  methods: {
    truncate(str, no_words) {
      if (!str) {
        return "";
      }
      return str
        .split(" ")
        .splice(0, no_words)
        .join(" ");
    }
  }
};
</script>
<style lang="css" scoped>
.my-card {
  width: 100%;
  max-width: 265px;
}

.my-card2 {
  width: 100%;
  max-width: 600px;
}
.my-card-tuts {
  width: 100%;
  max-width: 500px;
}
.col-height {
  height: 380px;
}

.col-height-tuts {
  max-height: 447px;
}

.wide {
  width: 80%;
}

.l-h {
  line-height: 3.5;
}

.min-h {
  min-height: 160px;
}

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

.hide {
  display: none;
}

.show {
  display: inline;
}

.no-underline a {
  text-decoration: none;
  font-size: 1.5em;
}

.no-underline a:hover {
  color: rgb(0, 255, 0) !important;
}

.no-underline a .i-rotate {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

.no-underline a:hover .i-rotate {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.q-item {
  min-height: 24px;
  padding: 2px 46px;
  color: inherit;
  transition: color 0.3s, background-color 0.3s;
}

.containers {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.h3-title {
  color: #fff;
  font-family: keep calm;
}

.h5-title {
  width: 70%;
  display: block;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.slider-l {
  position: absolute;
  z-index: 1030;
  width: 60%;
}

.top-slider {
  background-image: linear-gradient(
    to bottom right,
    black,
    rgba(0, 0, 0, 0.75)
  );
  position: relative;
  min-height: 70%;
}

.top-slider .img-float {
  width: 50%;
  float: right !important;
}

.db-menu {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  width: 20vw;
}

.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: 95vh;
  width: 100%;
  background-image: radial-gradient(
      circle,
      rgba(35, 146, 131, 0.99),
      rgba(97, 190, 178, 0.92)
    ),
    url(../statics/testiBg.svg);
  background-repeat: repeat;
}

.bg-map {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
}

.bg-map-mob {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
}

.logo-hover {
  filter: grayscale(100%);
  margin: 5px 20px;
}

.logo-hover:hover {
  filter: grayscale(0%);
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.popup-wh {
  width: 240px;
  height: auto;
}

.face-card {
  width: 25%;
}

.img-hover {
  filter: grayscale(100%);
  transform: scale(1, 1);
  transition: all 0.5s;
}

.img-hover:hover {
  filter: grayscale(0%);
  transform: scale(1.3, 1.3);
  transition: all 0.5s;
  border: 1px solid white;
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.5),
    0 14px 21px 2px rgba(0, 0, 0, 0.24), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  z-index: 1030;
}
.best-tutors-heading {
  letter-spacing: 1px !important;
  text-align: left;
  text-transform: uppercase !important;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .q-mt-lg {
    margin-left: 15px;
  }

  .w-40 {
    width: 96%;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  .w-50 {
    width: 100%;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    margin-top: -80px;
  }

  .face-card {
    width: 45%;
  }

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

  .testi-bg {
    height: 100% !important;
  }

  .min-h {
    min-height: 16px;
  }

  .text-h4 {
    font-size: 26px !important;
  }

  .h3-title {
    color: #fff;
    font-family: keep calm;
    font-size: 30px;
    line-height: 1;
    text-align: center;
  }

  .h5-title {
    display: none;
  }

  .slider-l {
    width: 100%;
    margin-top: 0%;
  }

  .top-slider {
    height: 70vh;
  }

  .top-slider .img-float {
    width: 100%;
    height: auto;
  }

  .col-height {
    height: auto;
  }

  .wide {
    width: 95%;
    margin-top: 0;
  }

  .q-pt-xl {
    padding-top: 10px !important;
  }

  .q-pl-xl {
    padding-left: 36px !important;
  }

  .db-menu {
    width: 50vw;
  }

  .q-card__section--horiz > div:not(:last-child),
  .q-card__section--horiz > img:not(:last-child) {
    top: -80px;
  }
  .best-tutors-heading {
    text-align: center !important;
    padding-top: 0px !important;
  }
  .best-tutors-container {
    margin-top: 0px !important;
    max-height: unset;
  }
  .best-tutors-container .q-card__section--vert {
    padding-top: 0px !important;
  }
  .tutors-container {
    display: flex;
    justify-content: center;
  }
  .tutors-container .q-pa-none {
    display: flex;
    justify-content: center;
  }
  .tutors-container .row {
    visibility: hidden;
  }
  .tutors-container .mobile-tutors {
    visibility: visible !important;
    width: 50%;
  }
  .tutor-seprator{
    height: 90px;
  }
}
@media only screen and (min-width: 899px) and (max-width: 1280px) {
  .face-card {
    width: 11.7vw;
  }
}
</style>
