<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Class Recording</div>
      <div class="row flex flex-center">
        <div class="col-12 col-md-12">
          <div class="q-pa-mdd">
            <q-card class="my-card">
              <q-card-section>
                <q-select
                  dense
                  outlined
                  v-model="model"
                  :options="options"
                  label="Filter by course name"
                  hint="Use filters to refine your search criteria"
                />
              </q-card-section>
              <div class="row q-pa-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <q-input
                    color="primary"
                    outlined
                    v-model="inputValue"
                    label="Valid From - Valid To"
                    mask="####-##-## - ####-##-##"
                    class="text-body1"
                  >
                    <template v-slot:append>
                      <q-icon name="far fa-calendar" class="cursor-pointer">
                        <q-popup-proxy
                          v-model="showScroller2"
                          anchor="top right"
                          self="bottom middle"
                        >
                          <q-scroller
                            v-model="value"
                            view="date-range"
                            vertical-bar
                            style="width: 300px;height:200px;"
                            :style="scrollerPopupStyle240"
                            @close="() => { showScroller2 = false }"
                          />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </div>
              </div>
              <q-card-section>
                <div class="text-body1">Showing class(es) recording archive</div>
              </q-card-section>
              <q-card-section class="q-ma-md">
                <q-markup-table>
                  <thead>
                    <tr>
                      <th class="text-left text-uppercase">recording</th>
                      <th class="text-right text-uppercase">date</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="n in 4" :key="n">
                      <td class="text-left">
                        <q-btn
                          @click="videoplayer = true"
                          dense
                          round
                          color="grey"
                          icon="videocam"
                          class="click-fx"
                        />
                        <b
                          @click="videoplayer = true"
                          class="text-blue-5 cursor-pointer q-px-md"
                        >Play Video</b>
                      </td>
                      <td class="text-right">Friday - 19:57:00 to 21:00:00</td>
                    </tr>
                  </tbody>
                </q-markup-table>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
      <q-dialog v-model="videoplayer">
        <q-card class="no-border-radius">
             

          <!-- <q-linear-progress :value="0.2" color="pink" /> -->

          <q-card-section class="row items-center no-wrap q-pa-none q-ma-none bg-black">
            <div>
              <q-media-player type="video" :ratio="16/9" :sources="sources" :poster="poster" mobile-mode />
              <!-- <q-video  src="https://www.youtube.com/embed/wdzbbsN1QVM" /> -->
            </div>
          </q-card-section>
        </q-card>
          <q-btn dense round color="black" icon="clear" class="show" style="top: -175px;" />

      </q-dialog>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      current: 3,
      showScroller2: false,
      videoplayer: false,
      value: "",
      inputValue: "",
      model: null,
      options: [
        "MOH UAE GP",
        "DHA GP",
        "HAAD",
        "USMLE Step 1",
        "USMLE Step 2 CK"
      ],
      poster: "statics/video-poster.png",
      sources: [
        {
          src:
            "statics/video1.mp4",
          type: "video/mp4"
        }
      ]
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      return date.formatDate(timeStamp, "dddd D MMMM");
    }
  },
  watch: {
    value(val) {
      const type = Object.prototype.toString.call(this.value);
      if (type === "[object Array]") {
        this.inputValue = `${val[0]} - ${val[1]}`;
      }
    },

    inputValue(val) {
      const parts = val.split(" - ");
      if (parts[0] !== this.value[0] || parts[1] !== this.value[1]) {
        this.value[0] = parts[0];
        this.value[1] = parts[1];
      }
    }
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}

.show {
  display: inline;
}
.click-fx {
  background: grey;
}
.click-fx:hover {
  background: #1976d2 !important;
}
.hoverable {
  transition: all 0.5s ease;
  border: 1px solid #dddddd;
  border-radius: 5px !important;
}

.hoverable:hover {
  /* filter: grayscale(100%); */

  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12);
  /* border-radius: 5px; */
  vertical-align: top;
  background: #fff;
  position: relative;
  transition: all 0.5s ease;
}

.circle {
  border-radius: 50%;
}

a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}

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

  .show {
    display: none;
  }
}

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