<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Evaluate the Course</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/course/welcome" />
          <q-breadcrumbs-el label="Course Progress" to="/course/progress-review" />
          <q-breadcrumbs-el label="Evaluate" to="/course/evaluate" />
        </q-breadcrumbs>
      </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>
                <div class="text-subtitle1">
                  Evaluate the performance of your tutor at the completion of
                  <b>"Topic / Subtopic"</b>
                </div>
                <q-item>
                  <q-item-section class="row">
                    <q-markup-table bordered flat>
                      <thead>
                        <tr>
                          <th class="text-left text-uppercase"></th>
                          <th class="text-center text-uppercase">VERY GOOD</th>
                          <th class="text-center text-uppercase">GOOD</th>
                          <th class="text-center text-uppercase">FAIR</th>
                          <th class="text-center text-uppercase">POOR</th>
                          <th class="text-center text-uppercase">VERY POOR</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-left">Tutor knowledge for this topic was?</td>
                          <td class="text-center">
                            <q-radio v-model="q1" val="vg1" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q1" val="g1" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q1" val="f1" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q1" val="p1" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q1" val="vp1" />
                          </td>
                        </tr>
                        <tr>
                          <td class="text-left">How satisfactorily tutor answered your questions?</td>
                          <td class="text-center">
                            <q-radio v-model="q2" val="vg2" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q2" val="g2" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q2" val="f2" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q2" val="p2" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q2" val="vp2" />
                          </td>
                        </tr>
                        <tr>
                          <td
                            class="text-left"
                          >Class time, puntuality &amp; course pace managed by tutor was?</td>
                          <td class="text-center">
                            <q-radio v-model="q3" val="vg3" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q3" val="g3" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q3" val="f3" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q3" val="p3" />
                          </td>
                          <td class="text-center">
                            <q-radio v-model="q3" val="vp3" />
                          </td>
                        </tr>
                      </tbody>
                    </q-markup-table>
                  </q-item-section>
                </q-item>
              </q-card-section>
              <q-card-section>
                <div class="row">
                  <div class="col-12 col-md-12">
                    <div class="text-subtitle1">Any suggestion for the tutor or DocExams.</div>
                    <q-input
                      dense
                      v-model="text"
                      outlined
                      rows="2"
                      type="textarea"
                      label="Your suggestion *"
                      placeholder="Please type your suggestion."
                    />
                  </div>
                </div>
                <div class="q-ma-sm q-pa-sm q-gutter-sm text-right">
                  <q-btn :disable="isDisabled ? 'false' : 'true'" color="primary" 
                  v-on:click="isEvaluate = !isEvaluate && isDisabled === true">
                  {{ isEvaluate ? 'Evaluate' : 'Evaluated' }}</q-btn>
                  <q-btn outline color="grey">Cancel</q-btn>
                  
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// import {
//     date
// } from 'quasar'
import { fabGithub } from "@quasar/extras/fontawesome-v5";
const stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];
const markedRead = ["marked1", "marked2", "marked3"];
export default {
  data() {
    return {
      current: 3,
      isEvaluate: true,
      isDisabled: false,
      markedRead: [],
      model: null,
      marked1: false,
      marked2: false,
      marked3: false,
      text: "",
      q1: "",
      q2: "",
      q3: "",
      options: [
        "MOH UAE GP",
        "DHA GP",
        "HAAD",
        "USMLE Step 1",
        "USMLE Step 2 CK"
      ]
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      return date.formatDate(timeStamp, "dddd D MMMM");
    }
  }
};
</script>

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

.hoverable {
  transition: all 0.5s ease;
  border: 1px solid #dddddd;
  border-radius: 5px !important;
}
.text-underline {
  text-decoration: underline;
}
.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: #f3f3f3;
  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;
  }
  .hide-img {
    display: flex;
  }
  .show {
    display: none;
  }
}

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