<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Today’s Class Details</div>
      <div class="row">
        <div class="col-12 col-md-12">
          <q-card class="q-mb-md">
            <q-card-section>
              <q-banner class="bg-orange-1 q-ma-sm">
                <template v-slot:avatar>
                  <q-icon name="report_problem" color="orange-3" />
                </template>
                <div class="text-h6 text-subtitle1 text-bold text-orange-9">Class Status</div>
                <div class="text-caption text-orange-9">sorry !! your class is not scheduled today.</div>
              </q-banner>
            </q-card-section>
            <q-card-section>
              <div class="row">
                <div class="col-12 col-md-6 q-pa-sm">
                  <div class="text-bold text-grey-8 q-pb-xs">Course Name:</div>
                  <div class="text-subtitle1 text-grey-8 q-pb-xs">Dental Guide</div>
                </div>
                <div class="col-12 col-md-6 q-pa-sm">
                  <div class="text-bold text-grey-8 q-pb-xs">Tutor Name:</div>
                  <div class="text-subtitle1 text-grey-8 q-pb-xs">Tutor has not joined yet</div>
                </div>
                <div class="col-12 col-md-6 q-pa-sm">
                  <div class="text-bold text-grey-8 q-pb-xs">Today's Topics / Subtopics:</div>
                  <div class="text-subtitle1 text-grey-8 q-pb-xs">Tutor has not joined yet</div>
                </div>
                <div class="col-12 col-md-6 q-pa-sm">
                  <div class="text-bold text-grey-8 q-pb-xs">Closed Topics:</div>
                  <q-list class="q-pa-sm">
                <q-expansion-item
                  class="q-mb-sm bg-grey-3"
                  expand-separator
                  label="Internal Medicine"
                >
                  <q-card>
                    <q-card-section>
                      <q-chip
                        removable
                        v-model="chips1"
                        @remove="log('')"
                        outline
                        color="primary"
                        class="q-pa-md"
                      >Hematology and Oncology</q-chip>
                      <q-chip
                        removable
                        v-model="chips2"
                        @remove="log('')"
                        outline
                        color="primary"
                        class="q-pa-md"
                      >Infectious Disease</q-chip>
                      <q-chip
                        removable
                        v-model="chips3"
                        @remove="log('')"
                        outline
                        color="primary"
                        class="q-pa-md"
                      >Rheumatology</q-chip>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>

                <q-expansion-item
                  class="q-mb-sm bg-grey-3"
                  expand-separator
                  label="Obs &amp; Gynae"
                >
                  <q-card>
                    <q-card-section>
                      <q-chip
                        removable
                        v-model="chips3"
                        @remove="log('')"
                        outline
                        color="primary"
                        class="q-pa-md"
                      >Gynaecology</q-chip>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>
              </q-list>
                </div>
                
              </div>
            </q-card-section>
            <q-card-section class="flex row justify-between">
              <div class="q-pa-sm">
                Your class is about to start, please click Join button. Your class has not started for details please
                <a href="/#/contact" @click="icon = true">Contact Us</a>
              </div>
              <q-btn color="primary" label="Join" />
            </q-card-section>
          </q-card>
          <div class="text-h5 q-pb-md">Previous Class Details</div>
          <div class="shadow-2 q-mb-md">
            <q-list bordered separator class="rounded-borders">
              <q-expansion-item group="somegroup" expand-separator class="bg-grey-2">
                <template v-slot:header>
                  <q-item-section>Date - Time(start-end): 13/11/19 - 9:30:31 pm , 9:31:53 pm</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">
                      <q-badge class="q-pa-sm" color="secondary">COMPLETED</q-badge>
                    </div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    <div class="row text-grey-7">
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Course Name:</div>
                        <div class="text-subtitle2">Dental Guide</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Tutor Name:</div>
                        <div class="text-subtitle2">Dr. Jhon Doe</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Topic/Subtopic(s) discussed:</div>
                        <div class="text-subtitle2">Rheumatology</div>
                      </div>
                      
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">My Status:</div>
                        <div class="text-subtitle2">
                          <q-badge class="q-pa-sm" color="blue-5">PRESENT</q-badge>
                        </div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">More Details:</div>
                        <div
                          class="text-subtitle2"
                        >Rheumatology, is the branch of medical education for MBBS degree</div>
                      </div>
                    </div>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item group="somegroup" expand-separator class="bg-grey-2">
                <template v-slot:header>
                  <q-item-section>Date - Time(start-end): 13/11/19 - 9:30:31 pm , 9:31:53 pm</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">
                      <q-badge class="q-pa-sm" color="negative">CANCELLED</q-badge>
                    </div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    <div class="row text-grey-7">
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Course Name:</div>
                        <div class="text-subtitle2">Dental Guide</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Tutor Name:</div>
                        <div class="text-subtitle2">Dr. Jhon Doe</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Topic/Subtopic(s) discussed:</div>
                        <div class="text-subtitle2">Rheumatology</div>
                      </div>
                      
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">My Status:</div>
                        <div class="text-subtitle2 text-uppercase">
                          <q-badge class="q-pa-sm" color="negative">absent</q-badge>
                        </div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">More Details:</div>
                        <div
                          class="text-subtitle2"
                        >Rheumatology, is the branch of medical education for MBBS degree</div>
                      </div>
                    </div>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item group="somegroup" expand-separator class="bg-grey-2">
                <template v-slot:header>
                  <q-item-section>Date - Time(start-end): 13/11/19 - 9:30:31 pm , 9:31:53 pm</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">
                      <q-badge class="q-pa-sm" color="secondary">COMPLETED</q-badge>
                    </div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    <div class="row text-grey-7">
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Course Name:</div>
                        <div class="text-subtitle2">Dental Guide</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Tutor Name:</div>
                        <div class="text-subtitle2">Dr. Jhon Doe</div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">Topic/Subtopic(s) discussed:</div>
                        <div class="text-subtitle2">Rheumatology</div>
                      </div>
                      
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">My Status:</div>
                        <div class="text-subtitle2">
                          <q-badge class="q-pa-sm" color="blue-5">PRESENT</q-badge>
                        </div>
                      </div>
                      <div class="col-6 col-md-6 col-xs-12 q-pa-md">
                        <div class="text-h6">More Details:</div>
                        <div
                          class="text-subtitle2"
                        >Rheumatology, is the branch of medical education for MBBS degree</div>
                      </div>
                    </div>
                  </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-list>
          </div>
        </div>
      </div>
      <q-dialog v-model="icon">
        <q-card>
          <q-card-section class="row items-center q-pb-none">
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>

          <q-card-section class="row">
            <div class="col-12 col-md-12 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Select Today's Topics / Subtopics *</div>

              <q-select
                dense
                outlined
                v-model="model"
                use-input
                use-chips
                multiple
                input-debounce="0"
                @new-value="createValue"
                :options="filterOptSubtopic"
                @filter="filterFn"
                style="width: auto;"
              />
            </div>
            <div class="col-12 col-md-12 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Details *</div>
              <q-input
                dense
                v-model="text"
                outlined
                rows="4"
                type="textarea"
                label="Describe main content of today's class.."
              />
            </div>
          </q-card-section>
          <q-card-section>
            <q-btn outline color="white" text-color="secondary" label="Submit" />
            <q-btn
              class="q-ma-sm"
              outline
              color="white"
              text-color="primary"
              label="cancel"
              @click="icon = false"
            />
          </q-card-section>
        </q-card>
      </q-dialog>
    </div>
  </transition>
</template>

<script>
const subtopic = ["hamatology", "cardiovascular", "git", "infactious desease"];
export default {
  data() {
    return {
      model: null,
      filterOptSubtopic: subtopic,
      chips1: true,
      chips2: true,
      chips3: true,
      chips: true,
      icon: false,
      text: "",
      msg: ' <q-badge color="secondary">Completed</q-badge>',
      html: true
    };
  }
};
</script>

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

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

.show {
  display: inline;
}

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