<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Verify Qualification</div>
      <q-card class="q-pa-md">
        <q-form @submit="onSubmit" @reset="onReset">
          <div class="q-pa-md flex flex-center column">
            <div style="width: 50%;">
              <figure>
                <q-zoom background-color="blue-grey-1" scale>
                  <img src="statics/certificate.jpg" alt="QZoom with scale" class="my-image" />
                </q-zoom>
                <figcaption></figcaption>
              </figure>
            </div>
            <q-uploader url label="Upload Profile Photo" />
          </div>
          <div class="col-12 q-py-sm">
            In order to confirm your qualifications with your identity, kindly upload atleast one official document listed below.
            <ol>
              <li>Undergraduate / Graduation degree</li>
              <li>Certification / Diploma / Licensing exam</li>
              <li>National Identity Card / Driving License</li>
            </ol>
          </div>
          <div
            class="text-subtitle2 text-thin q-ma-md grey-4"
          >* Your document(s) will not be shared and only used for internal varification process.</div>
          <div class="col-12 col-md-12 q-py-sm">
            <q-btn type="submit" color="secondary" size="md" label="Update" @click="accept =! accept" />
          </div>
        </q-form>
      </q-card>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      model: null,

      showScroller2: false,
      value: "",
      inputValue: "",
      date: "",
      options: [],
      myModel: []
    };
  },
  methods: {
    onSubmit() {
      if (this.accept !== true) {
        this.$q.notify({
          color: "red-5",
          textColor: "white",
          icon: "warning",
          message: "Something went wrong! Form Not submitted"
        });
      } else {
        this.$q.notify({
          color: "green-4",
          textColor: "white",
          icon: "cloud_done",
          message: "Submitted"
        });
      }
    }
  },
  computed: {
    progressLabel1() {
      return (this.progress1 * 100).toFixed(2) + "%";
    },
    scrollerPopupStyle150() {
      if (this.$q.screen.lt.sm) {
        return {
          width: "90vw",
          height: "70vh"
        };
      } else {
        return {
          maxHeight: "200px",
          height: "200px",
          width: "250px"
        };
      }
    }
  }
};
</script>

<style lang="css">
.q-uploader__file--img {
  height: 300px !important;
  min-width: 200px !important;
}

.my-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

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

