<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Progress Review</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/welcome" />
          <q-breadcrumbs-el label="Manage Course" to="/manage-course" />
          <q-breadcrumbs-el label="Progress" to="/course-progress" />
          <q-breadcrumbs-el label="Progress Review" to="/progress-review" />
        </q-breadcrumbs>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-6 col-xs-6">
          <q-card class="my-card q-ma-md">
              <div class="q-ma-sm" style="height: 5px;"></div>
              <pie-chart class="q-mt-md"
                  background-color="#d1d1d1"
                  style="padding: 10px;display: flex;justify-content: center;
                  align-items: center;width: 98%;height: 98%;margin:10px;border-radius:6px;"
                 color="white"
                  :plot="plot"
                ></pie-chart>
            <div class="row">
              <q-card-select class="">
                <div class="bg-grey-3 q-ma-md rounded-borders" style="border:1px solid #d1d1d1;">
                  <div class="row">
                    <div class="q-px-sm row">
                      <div class="text-bold q-pa-sm">Course Name:</div>
                      <div class="text-thin q-pa-sm">Dental Guide</div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="q-px-sm row">
                      <div class="text-bold q-pa-sm">Total Credit Hours:</div>
                      <div class="text-thin q-pa-sm">158 hrs.</div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="q-px-sm row">
                      <div class="text-bold q-pa-sm">Credit Hours Left*:</div>
                      <div class="text-thin q-pa-sm">158.0 hrs.</div>
                    </div>
                  </div>
                </div>
              </q-card-select>
            </div>

            <div class="row q-pa-md">
              <div class="col-12 col-md-12 col-xs-12 text-h5 q-pa-sm">
                <div
                  class="text-subtitle1 q-py-md"
                >You must eveluate course progress at the completion of each topic.</div>
                <q-markup-table dense bordered flat>
                  <thead>
                    <tr>
                      <th class="text-left text-uppercase">Topic(s) / Course content(s)</th>
                      <th class="text-right text-uppercase">Hours taken*</th>
                      <th class="text-right text-uppercase">STATUS</th>
                      <th class="text-right text-uppercase">Reviews Count</th>
                      <th class="text-right text-uppercase">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">Hematology and Oncology</td>
                      <td class="text-right">0.50</td>
                      <td class="text-right">
                        <q-badge class="q-pa-xs" color="secondary">COMPLETED</q-badge>
                      </td>
                      <td class="text-right">15</td>
                      <td class="text-right">
                        <a
                          href="/#/tutor/student-reviews"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >View Review</a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Infectious Disease</td>
                      <td class="text-right">0.00</td>
                      <td clickable class="text-right">
                        <q-badge class="q-pa-xs" color="warning">NOT STARTED</q-badge>
                      </td>
                      <td class="text-right">--</td>
                      <td class="text-right">
                        <a href="#" class="no-underline text-grey-8">--</a>
                      </td>
                    </tr>
                    <tr>
                      <td class="text-left">Rheumatology</td>
                      <td class="text-right">0.86</td>
                      <td class="text-right">
                        <q-badge class="q-pa-xs" color="secondary">COMPLETED</q-badge>
                      </td>
                      <td class="text-right">12</td>
                      <td class="text-right">
                        <a
                          href="/#/student-reviews"
                          class="no-underline text-blue-5 hoverable cursor-pointer"
                        >View Review</a>
                      </td>
                    </tr>
                  </tbody>
                </q-markup-table>
              </div>
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import PieChart from "@tygr/vue-pie-chart";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      stdname: "",
      week: days,
      stime: starttime
    };
  },
  data: () => ({
    plot: [
      {
        value: 55,
        color: "green",
        label: "Completed",
        id: 1
      },
      {
        value: 15,
        color: "red",
        label: "Not Start",
        id: 2
      },
      {
        value: 30,
        color: "#04b1ed",
        label: "Inporgress",
        id: 3
      }
    ]
  })
};
</script>

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

.show {
  display: inline;
}

a {
  text-decoration: none;
  color: #04b1ed;
  cursor: pointer;
}

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

@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>
