<template>
  <div class="q-pa-md">
    <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
      <div>
        <div class="text-h5 q-pb-md">Welcome</div>
        <div class="row">
          <div class="col-12 col-md-12">
            <q-card class="shadow-up-1">
              <q-card-section></q-card-section>
              <q-card-section class="q-ma-none">
                <div class="box-ribbon-wrapper" style="margin-left:-17px;">
                  <q-ribbon
                    class="q-pb-md cursor-pointer text-subtitle1"
                    decoration="rounded-out"
                    background-color="secondary"
                    inline
                    leaf-color="darkgreen"
                    leaf-position="top"
                  >
                    <a href="#/tutortips" target="_blank" style="color:white;">
                      <q-avatar>
                        <img src="statics/grphImg2.png" />
                      </q-avatar>
                      <span class="q-pl-md">Read Tutring Tips To Booste Your Rank.</span>
                    </a>
                  </q-ribbon>
                </div>
              </q-card-section>
            </q-card>
            <div class="text-h5 text-grey-9 q-py-md">Course Progress</div>
            <q-card>
              <q-card-section>
                <q-markup-table flat>
                  <thead>
                    <tr>
                      <th class="text-left">COURSE NAME</th>
                      <th class="text-left">DATE STARTED</th>
                      <th class="text-left">STATUS</th>
                      <th class="text-center">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">Pediatrics Crash course</td>
                      <td class="text-left">15-12-2020</td>
                      <td class="text-leftt">
                        <q-badge
                          v-if="Math.random() > 0.5"
                          class="q-pa-xs"
                          color="secondary"
                        >Started</q-badge>
                        <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                      </td>
                      <td class="text-center">
                        <a
                          v-if="Math.random() > 0.5"
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >Show Progrss</a>
                        <a
                          v-else
                          href="/#/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >--</a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Dental Guide</td>
                      <td class="text-left">11-08-2020</td>
                      <td class="text-leftt">
                        <q-badge
                          v-if="Math.random() > 0.5"
                          class="q-pa-xs"
                          color="secondary"
                        >Started</q-badge>
                        <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                      </td>
                      <td class="text-center">
                        <a
                          v-if="Math.random() > 0.5"
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >Show Progrss</a>
                        <a
                          v-else
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >--</a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Surgery</td>
                      <td class="text-left">25-06-2020</td>
                      <td class="text-leftt">
                        <q-badge
                          v-if="Math.random() > 0.5"
                          class="q-pa-xs"
                          color="secondary"
                        >Started</q-badge>
                        <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                      </td>
                      <td class="text-center">
                        <a
                          v-if="Math.random() > 0.5"
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >Show Progrss</a>
                        <a
                          v-else
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >--</a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Clinical Surgery</td>
                      <td class="text-left">12-04-2020</td>
                      <td class="text-leftt">
                        <q-badge
                          v-if="Math.random() > 0.5"
                          class="q-pa-xs"
                          color="secondary"
                        >Started</q-badge>
                        <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                      </td>
                      <td class="text-center">
                        <a
                          href="/#/course/progress-review"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                          to='/course/progress-review'
                        >Show Progrss</a>
                      </td>
                    </tr>
                    <q-separator style="width:0%" inset />
                  </tbody>
                </q-markup-table>
              </q-card-section>
            </q-card>
            <div class="text-h5 text-grey-9 q-py-md">My Tutor(s)</div>
            <q-card>
              <q-card-section>
                <q-carousel
                  v-model="slide1"
                  transition-prev="slide-right"
                  transition-next="slide-left"
                  swipeable
                  animated
                  control-color="primary"
                  padding
                  arrows
                  height="200px"
                >
                  <q-carousel-slide :name="1" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        v-if="x = Math.floor((Math.random() * 10) + 1)"
                        class="hover-fx rounded-borders col-3 full-height"
                        :src="'statics/'+ photo[x]"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        v-if="x = Math.floor((Math.random() * 10) + 1)"
                        class="hover-fx rounded-borders col-3 full-height"
                        :src="'statics/'+ photo[x]"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Alize Jaffri</div>
                      </q-img>
                      <q-img
                        v-if="Math.random()"
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo3.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Jhon Doe</div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo4.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Malhiya</div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                  <q-carousel-slide :name="2" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo5.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo6.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo7.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo8.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                  <q-carousel-slide :name="3" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo9.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo10.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo11.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo12.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                </q-carousel>
              </q-card-section>
            </q-card>
            <div class="text-h5 text-grey-9 q-py-md">Tutoring Proporsal(s)</div>
            <q-card>
              <q-card-section>
                <div
                  class="text-body1"
                >Additional qualified tutor(s) have sent you tutoring proposal(s).</div>
              </q-card-section>
              <q-card-section>
                <q-carousel
                  v-model="slide2"
                  transition-prev="slide-right"
                  transition-next="slide-left"
                  swipeable
                  animated
                  control-color="primary"
                  padding
                  arrows
                  height="200px"
                >
                  <q-carousel-slide :name="1" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo1.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo2.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Alize Jaffri</div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo3.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Jhon Doe</div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo4.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">Dr. Malhiya</div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                  <q-carousel-slide :name="2" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo5.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo6.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo7.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo8.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                  <q-carousel-slide :name="3" class="column no-wrap">
                    <div
                      class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
                    >
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo9.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo10.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo11.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                      <q-img
                        class="hover-fx rounded-borders col-3 full-height"
                        src="statics/photo12.jpg"
                      >
                        <div class="absolute-bottom text-subtitle1 text-center">
                          <a href="/#/pay">Dr. Natasha</a>
                        </div>
                      </q-img>
                    </div>
                  </q-carousel-slide>
                </q-carousel>
              </q-card-section>
            </q-card>

           
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
const photos = [
  "photo1.jpg",
  "photo2.jpg",
  "photo3.jpg",
  "photo4.jpg",
  "photo5.jpg",
  "photo6.jpg",
  "photo7.jpg",
  "photo8.jpg",
  "photo9.jpg",
  "photo10.jpg",
  "photo11.jpg",
  "photo12.jpg"
];
export default {
  name: "MyLayout",
  data() {
    return {
      slide1: 1,
      slide2: 1,
      photo: photos
    };
  }
};
</script>

<style lang="css" scoped>
a {
  text-decoration: none;
  color: #ffffff;
}
a:hover {
  color: #04b1ed;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
.border {
  border: none;
}
.my-card {
  width: 100%;
  /* max-width: 430px; */
}
.hover-fx {
  transform: scale(1);
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  transform: scale(0.96);
  transition: all 0.3s ease-in;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
  .border {
    border: 1px solid #d1d1d1;
    margin: 5px;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
