<template>
    <v-container fluid class="body-color">
      <!-- ****** EDIT  Subject ****** -->
      <v-dialog v-model="editRoutineDialog" max-width="600px">
        <v-card flat class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>

              <label class="title text-xs-center">Edit Routine</label>

              <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon>
            </v-flex>
          </v-layout>
          <v-container fluid>
            <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>
              <v-layout>

                <v-flex xs3 sm4 class="pt-4 subheading">

                  <label class="right">Class :</label>

                </v-flex>

                <v-flex xs8 sm8 class="ml-2">

                  <v-select

                    :items="classList"

                    label="Select your Class"
                    v-model="editedItem.classId"

                    item-text="classNum"
                    item-value="_id"
                    :rules="classRules"

                    @change="getClassSubject(addRoutine.classId)"

                    required
                  ></v-select>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs3 sm4 class="pt-4 subheading">
                  <label class="right">Subject :</label>
                </v-flex>
                <v-flex xs8 sm8 class="ml-2">
                  <v-select
                    :items="subjectList.subjects"
                    label="Select your subject"
                    v-model="editedItem.subjectName"
                    item-text="subjectName"
                    item-value="_id"
                    :rules="subjectRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
              <v-layout>

                <v-flex xs4 sm4 class="pt-4 subheading">
                  <label class="right">Teacher Name :</label>
                </v-flex>
                <v-flex xs8 sm8 class="ml-3">
                  <v-select
                    v-model="editedItem.teacherId"
                    label="Select your teacher"
                    type="text"
                    :items="teacherList"
                    item-text="name"
                    item-value="_id"
                    :rules="teacherRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
              <v-layout>

                <v-flex xs5 sm4 class="pt-4 subheading">

                  <label class="right">Starting time:</label>

                </v-flex>

                <v-flex xs7 sm6 class="ml-3">

                  <v-menu

                    ref="menuC"

                    :close-on-content-click="false"

                    v-model="menu4"

                    :nudge-right="40"

                    lazy
                    transition="scale-transition"
                    offset-y
                    full-width
                    max-width="290px"
                    min-width="290px"
                  >
                    <v-text-field
                      slot="activator"
                      v-model="editedItem.startingTime"

                      placeholder="Select your starting time"

                      append-icon="access_time"

                      readonly
                    ></v-text-field>

                    <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>

                  </v-menu>

                </v-flex>
              </v-layout>
              <v-layout>

                <v-flex xs5 sm4 class="pt-4 subheading">

                  <label class="right">Ending Time:</label>

                </v-flex>

                <v-flex xs7 sm6 class="ml-3">

                  <v-menu

                    ref="menuB"

                    :close-on-content-click="false"

                    v-model="menu3"

                    :nudge-right="40"

                    lazy
                    transition="scale-transition"
                    offset-y
                    full-width
                    max-width="290px"
                    min-width="290px"
                  >
                    <v-text-field
                      slot="activator"
                      v-model="editedItem.endingTime"

                      placeholder="Select your end time"

                      append-icon="access_time"

                      readonly
                    ></v-text-field>

                    <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>

                  </v-menu>

                </v-flex>
              </v-layout>
              <v-layout>

                <v-flex xs4 sm4 class="pt-4 subheading">
                  <label class="right">Room:</label>

                </v-flex>

                <v-flex xs8 sm8 class="ml-3">

                  <v-text-field

                    label="fill your room"
                    :rules="roomRules"
                    v-model="editedItem.room"
                    @keyup.enter="submit"

                  ></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs4 sm4 class="pt-4 subheading">

                  <label class="right">Period:</label>

                </v-flex>
                <v-flex xs8 sm8 class="ml-3">
                  <v-text-field

                    label="fill your period"
                    :rules="periodRules"
                    v-model="editedItem.period"
                    @keyup.enter="submit"

                  ></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>

                <v-flex xs12 sm12>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                      @click="update"
                      round
                      dark
                      :loading="loading"
                      class="add-button"
                    >Update Routine</v-btn>
                  </v-card-actions>

                </v-flex>
              </v-layout>

            </v-form>
          </v-container>
        </v-card>
      </v-dialog>

      <!-- ****** EXISTING ROUTINE TABLE ****** -->

      <v-toolbar color="transparent" flat>
        <v-btn
          fab
          dark
          class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
          small
          @click="addRoutineDialog = true"
        >
          <v-icon dark>add</v-icon>
        </v-btn>
        <v-flex xs1 class="hidden-sm-only hidden-xs-only">
          <v-btn
            round
            class="open-dialog-button"
            dark
            @click="addRoutineDialog = true"
            v-if="role != 'TEACHER' "
          >
            <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine
          </v-btn>
        </v-flex>
        <v-spacer></v-spacer>
        <v-flex lg2 md2 xs12 v-show="show">
          <v-select
            :items="classList"
            label="Select Your Class"
            v-model="addRoutine.classId"
            item-text="classNum"
            item-value="_id"
            name="Select Class"
            :rules="classRules"
            @change="getSections(addRoutine.classId)"
            class="pl-2"
            required
          ></v-select>
        </v-flex>
        <v-flex xs8 sm3 md2 class="mr-3">
          <v-select
            v-model="addRoutine.sectionId"
            label="Select your section"

            :items="addSection"
            item-text="name"
            item-value="_id"

            name="Select Section"
            :rules="sectionRules"

            @change="getRoutineList()"

            class="pl-2"

            required
          ></v-select>
        </v-flex>
        <v-card-title class="body-1" v-show="show">
          <v-btn icon flat @click="displaySearch">
            <v-avatar size="27">
              <img src="/static/icon/search.png" alt="icon" />
            </v-avatar>
          </v-btn>
        </v-card-title>
        <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
          <v-layout>
            <v-text-field
              v-model="search"
              label="Search"
              prepend-inner-icon="search"
              color="primary"
              style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
            ></v-text-field>
            <v-icon @click="closeSearch" color="error">close</v-icon>
          </v-layout>
        </v-flex>
      </v-toolbar>
  
      <div class="col-sm-12">

        <div class="box-body">
          <div class="row">
            <div class="col-sm-12">
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                  <li class="active">
                    <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>
                  </li>
                </ul>

                <div class="tab-content" v-show="hideTable">
                  <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">

                    <div

                      id="mCSB_1"
                      class="mCustomScrollBox mCS-light"
                      style="max-height: none;"
                      tabindex="0"

                    >

                      <div
                        id="mCSB_1_container"
                        class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
                        style="position: relative; top: 0px; left: 0px; width: 100%;"
                        dir="ltr"
                      >
                        <div id="hide-table-2">
                          <table id="table" class="table table-striped">
                            <tbody>
                              <tr>
                                <td>MONDAY</td>
                              </tr>
                              <tr>
                                <td>TUESDAY</td>
                              </tr>
                              <tr>
                                <td>WEDNESDAY</td>
                              </tr>
                              <tr>
                                <td>THURSDAY</td>
                              </tr>
                              <tr>
                                <td>FRIDAY</td>
                              </tr>
                              <tr>
                                <td>SATURDAY</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div
                        id="mCSB_1_scrollbar_horizontal"
                        class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
                        style="display: none;"
                      >
                        <div class="mCSB_draggerContainer">
                          <div
                            id="mCSB_1_dragger_horizontal"
                            class="mCSB_dragger"
                            style="position: absolute; min-width: 30px; width: 0px; left: 0px;"
                          >
                            <div class="mCSB_dragger_bar"></div>
                          </div>
                          <div class="mCSB_draggerRail"></div>
                        </div>
                      </div>

                    </div>

                  </div>
                </div>

                <div>
                  <table id="table" class="table table-bordered" v-show="showTable">
                    <tbody>
                      <div class="nav-tabs-custom">
                        <div class="tab-content" id="scrolling">
                          <div id="hide-table-2">
                            <v-data-table :items="routineList">
                              <template slot="items" slot-scope="props">
                                <tr class="tr">
                                  <td>{{ props.item.day }}</td>

                                  <td class="text-center" v-for="list in props.item.lectureRoutine">

                                    {{ props.item.classId.classNum }}
                                    <br />
                                    {{ props.item.sectionId.name }}

                                    <br />

                                    {{ list.startingTime }} - {{ list.endingTime }}
                                    <br />
                                    {{ list.room }}
                                    <br />
                                    {{ list.subjectName }}
                                    <br />

                                    {{ list.teacherId.name}}

                                    <br />
                                    <span>
                                      <v-tooltip top>
                                        <img
                                          slot="activator"
                                          style="cursor:pointer; width:20px; height:18px; "
                                          class="mr-3"

                                          @click="editItem(list, props.item)"

                                          src="/static/icon/edit.png"
                                        />
                                        <span>Edit</span>
                                      </v-tooltip>
                                      <v-tooltip top>
                                        <img
                                          slot="activator"
                                          style="cursor:pointer; width:20px; height:18px; "
                                          class="mr-3"
                                          @click="deleteItem(props.item)"
                                          src="/static/icon/delete.png"
                                        />
                                        <span>Delete</span>
                                      </v-tooltip>
                                    </span>
                                  </td>
                                </tr>
                              </template>
                            </v-data-table>
                          </div>
                        </div>
                      </div>
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ****** ADD MULTIPLE Subject ****** -->
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ text }}</v-snackbar>
      <v-dialog v-model="addRoutineDialog" max-width="600px">
        <v-card flat class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Add Routine</label>
              <v-icon size="24" class="right" @click="addRoutineDialog = false">cancel</v-icon>
            </v-flex>
          </v-layout>
          <v-container fluid fill-height>
            <v-layout align-center>
              <v-flex xs12>
                <v-form ref="form" v-model="valid" lazy-validation>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">School Year :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-text-field

                        label="fill your year"

                        :rules="schoolRules"
                        v-model="addRoutine.schoolYear"
                      ></v-text-field>

                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">Class :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-select
                        :items="classList"

                        item-text="classNum"
                        item-value="_id"
                        v-model="addRoutine.classId"

                        label="Select Class"

                        :rules="classRules"
                        @change="getSections(addRoutine.classId)"
                        class="pl-2"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">Section :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-select
                        :items="addSection"

                        item-text="name"
                        item-value="_id"
                        v-model="addRoutine.sectionId"

                        label="Select Section"

                        :rules="sectionRules"
                        @change="getClassSubject(addRoutine.classId)"
                        class="px-2"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs3 sm4 class="pt-4 subheading">
                      <label class="right">Subject :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-2">
                      <v-select
                        :items="subjectList.subjects"
                        label="Select your subject"
                        v-model="addRoutine.subjectName"
                        item-text="subjectName"

                        item-value="subjectName"

                        :rules="subjectRules"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs3 sm4 class="pt-4 subheading">
                      <label class="right">Day :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-2">
                      <v-select
                        :items="day"
                        label="Select your day"
                        v-model="addRoutine.day"
                        item-text="text"
                        :rules="dayRules"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">Teacher Name :</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-select
                        v-model="addRoutine.teacherId"
                        label="Select your teacher"
                        type="text"
                        :items="teacherList"
                        item-text="name"
                        item-value="_id"
                        :rules="teacherRules"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>

                    <v-flex xs4 class="pt-4 subheading">

                      <label class="right">Starting time:</label>
                    </v-flex>

                    <v-flex xs8 sm6 class="ml-3">

                      <v-menu
                        ref="menuA"
                        :close-on-content-click="false"

                        v-model="menu2"

                        :nudge-right="40"

                        :return-value.sync="addRoutine.startingTime"

                        lazy
                        transition="scale-transition"
                        offset-y
                        full-width
                        max-width="290px"
                        min-width="290px"
                      >
                        <v-text-field
                          slot="activator"

                          v-model="addRoutine.startingTime"

                          label="Select your starting time"
                          append-icon="access_time"
                          :rules="timeInRules"
                          readonly
                        ></v-text-field>
                        <v-time-picker

                          v-model="addRoutine.startingTime"
                          @change="$refs.menuA.save(addRoutine.startingTime)"

                        ></v-time-picker>
                      </v-menu>
                    </v-flex>
                  </v-layout>
                  <v-layout>

                    <v-flex xs4 class="pt-4 subheading">

                      <label class="right">Ending Time:</label>
                    </v-flex>

                    <v-flex xs8 sm6 class="ml-3">

                      <v-menu
                        ref="menu"
                        :close-on-content-click="false"
                        v-model="menu1"
                        :nudge-right="40"
                        :return-value.sync="addRoutine.endingTime"
                        lazy
                        transition="scale-transition"
                        offset-y
                        full-width
                        max-width="290px"
                        min-width="290px"
                      >
                        <v-text-field
                          slot="activator"
                          v-model="addRoutine.endingTime"
                          label="Select your end time"
                          append-icon="access_time"
                          :rules="timeOutRules"
                          readonly
                        ></v-text-field>
                        <v-time-picker
                          v-model="addRoutine.endingTime"
                          @change="$refs.menu.save(addRoutine.endingTime)"
                        ></v-time-picker>
                      </v-menu>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">Room:</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-text-field

                        label="fill your room"

                        :rules="roomRules"
                        v-model="addRoutine.room"
                        @keyup.enter="submit"
                      ></v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 sm4 class="pt-4 subheading">
                      <label class="right">Period:</label>
                    </v-flex>
                    <v-flex xs8 sm8 class="ml-3">
                      <v-text-field

                        label="fill your period"

                        :rules="periodRules"
                        v-model="addRoutine.period"
                        @keyup.enter="submit"
                      ></v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn
                          @click="create"
                          round
                          dark
                          :loading="loading"
                          class="add-button"
                        >Add Routine</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-form>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-dialog>
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
    </v-container>
  </template>
  
  <script>
  import http from "@/Services/http.js";
  import Util from "@/util";
  
  export default {
    data: () => ({
      snackbar: false,
      y: "top",
      x: "right",
      role: "",
      mode: "",
      timeout: 3000,
      text: "",
      color: "",
      show: true,
      showSearch: false,
      showLoader: false,
      loading: false,
      editLoading: false,
      date: null,
      search: "",

      editRoutineDialog: false,
      valid: true,
      validEditRoutine: true,
      addRoutineDialog: false,

      showTable: false,
      hideTable: true,
      name: "",

  
      day: [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday"
      ],

      token: "",
  
      menu1: false,

      menu2: false,

      menu4: false,
      menu3: false,

  
      schoolRules: [v => !!v || "School Year is required"],
      classRules: [v => !!v || " Class Name is required"],
      teacherRules: [v => !!v || " Teacher Name is required"],
      sectionRules: [v => !!v || "Section is required"],
      studentRules: [v => !!v || " Student is required"],
      finalRules: [v => !!v || "Final MArk is required"],
      subjectRules: [v => !!v || " Subject Name is required"],
      dayRules: [v => !!v || "Day is required"],
      timeInRules: [v => !!v || "Start Time is required"],
      timeOutRules: [v => !!v || "End Time is required"],
      roomRules: [v => !!v || "Room is required"],
      periodRules: [v => !!v || "Period is required"],

      classList: [],
      addSection: [],
      subjectList: [],
      teacherList: [],
      titleRules: [],
      markRules: [],
      typeRules: [],
      routineList: [],
      editedIndex: -1,
      addRoutine: {},

      startingTime: "",
      editedItem: {}

    }),
    methods: {

      editItem(item, routineData) {
        console.log("routineData", routineData)
        console.log("item", item)

        this.editedIndex = this.routineList;

        this.editedItem = Object.assign({}, item);

        this.editedItem.lectureRoutineId = item._id;
        this.editedItem.routineId = routineData._id;

        this.dialog = true;
        this.editRoutineDialog = true;
      },

      deleteItem(item) {

        let deleteLecture = {
          routineId: item._id,
          lectureId: item.lectureRoutine[0]._id

        };
        http()
          .delete(

            "/deleteRoutineLecture",

            confirm("Are you sure you want to delete this?") && {

              params: deleteLecture

            }
          )
          .then(response => {

            this.snackbar = true;

            this.text = "Successfully delete Existing Routine";

            this.color = "green";

            this.getRoutineList();

          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
          });
      },
      close() {
        this.editRoutineDialog = false;
      },
  
      create() {
        var routineData = {
          schoolYear: this.addRoutine.schoolYear,
          classId: this.addRoutine.classId,
          sectionId: this.addRoutine.sectionId,
          day: this.addRoutine.day,
          lectureRoutine: []
        };
        if (this.$refs.form.validate()) {
          routineData.lectureRoutine.push({
            teacherId: this.addRoutine.teacherId,

            startingTime: this.addRoutine.startingTime,

            endingTime: this.addRoutine.endingTime,
            room: this.addRoutine.room,
            period: this.addRoutine.period,
            subjectName: this.addRoutine.subjectName
          });
          http()
            .post("/createRoutine", routineData)
            .then(response => {

              this.getRoutineList();

              this.text = "Routine added successfully";
              this.clear();
              this.snackbar = true;
              this.color = "green";
              this.addRoutineDialog = false;
            })
            .catch(error => {
              // console.log(error);
              this.snackbar = true;
              this.text = error.response.data.message;
              this.color = "error";
            });
        }
      },
      clear() {
        this.$refs.form.reset();
      },

      update() {

        if (this.$refs.formEditRoutine.validate()) {
          let editRoutine = {
            routineId: this.editedItem.routineId,
            lectureRoutineId: this.editedItem.lectureRoutineId,
            subjectName: this.editedItem.subjectName,
            teacherId: this.editedItem.teacherId,
            startingTime: this.editedItem.startingTime,
            endingTime: this.editedItem.endingTime,
            room: this.editedItem.room,
            period: this.editedItem.period
          };
          this.editLoading = true;
          http()
            .put("/updateRoutine", editRoutine)
            .then(response => {
              this.snackbar = true;
              this.text = "Successfully Edit Existing Routine";
              this.color = "green";
              this.editLoading = false;
              this.editRoutineDialog = false;
              this.getRoutineList();
              // http()
              //   .get(
              //     "/getRoutineList",
              //     {
              //       params: {
              //         classId: this.addRoutine.classId,
              //         sectionId: this.addRoutine.sectionId
              //       }
              //     },
              //     {
              //       headers: { Authorization: "Bearer " + this.token }
              //     }
              //   )
              //   .then(response => {
              //     this.routineList = response.data.data;
              //     this.showLoader = false;
              //     this.showTable = true;
              //     this.hideTable = false;
              //   })
              //   .catch(err => {
              //     console.log("err====>", err);
              //   });
            })
            .catch(error => {
              this.editLoading = false;
            });
        }

      },
      getClass() {
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.classList = response.data.data;
          })
          .catch(error => {
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      getSections(_id) {
        var token = this.$store.state.token;
        this.showLoader = true;
        http()
          .get(
            "/getSectionsList",
            { params: { classId: _id } },
            {
              headers: { Authorization: "Bearer " + token }
            }
          )
          .then(response => {
            this.addSection = response.data.data;
            this.showLoader = false;
          })
          .catch(err => {
            this.showLoader = false;
          });
      },
      getClassSubject(_id) {
        this.showLoader = true;
        //   this.classId = this.classId;
        http()
          .get(
            "/getParticularClass",
            { params: { classId: _id } },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
            this.subjectList = response.data.data;
            this.showLoader = false;
          })
          .catch(err => {
            this.showLoader = false;
          });
      },
      getTeacherList() {
        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getTeachersList", {
            headers: { Authorization: "Bearer " + token }
          })
          .then(response => {
            this.teacherList = response.data.data;
            this.showLoader = false;
            // console.log("getTeacherList=====>",this.desserts)
          })
          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      getRoutineList() {
        this.showLoader = true;
        http()
          .get(
            "/getRoutineList",
            {
              params: {
                classId: this.addRoutine.classId,
                sectionId: this.addRoutine.sectionId
              }
            },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
            this.routineList = response.data.data;
            this.showLoader = false;

            this.showTable = true;
            this.hideTable = false;

          })
          .catch(err => {
            this.showLoader = false;
          });
      },
      displaySearch() {
        (this.show = false), (this.showSearch = true);
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";
      }
    },
    mounted() {
      this.token = this.$store.state.token;

      this.getClass();
      this.getTeacherList();
      this.role = this.$store.state.role;
    }
  };
  </script>
  
  <style scoped>

  html,
  body {
    font-family: "OpenSans Regular";
  }
  .box .box-body {
    padding: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  }

  .nav-tabs {
    border-bottom: 1px solid #ddd;
  }
  .nav {
    padding-left: 0;
    list-style: none;
  }

  .tab-content > .active {
    display: block;
  }
  .nav-tabs-custom > .nav-tabs > li.active > a {
    border-top: 0;
    border-left-color: #09a3a3;
    border-right-color: #09a3a3;
  }
  .nav-tabs-custom > .nav-tabs {
    background-color: #e5e5e5;
    margin: 0;
    border-bottom-color: #e5e5e5;
  }

  .nav-tabs-custom > .nav-tabs > li:first-of-type {
    margin-left: 0px;
  }
  .nav-tabs-custom > .nav-tabs > li.active {

    border-bottom-color: #09a3a3;

  }
  .nav-tabs-custom > .nav-tabs > li {

    border-bottom: 2px solid transparent;

    border-top: 3px solid transparent;
    margin-bottom: -2px;
    margin-right: 5px;
  }
  .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
    border-left-width: 0;
  }
  .nav-tabs-custom > .nav-tabs > li.active > a {
    border-top: 0;

    border-bottom-color: #09a3a3;
  }
  .nav-tabs-custom > .nav-tabs > li.active > a,
  .nav-tabs-custom > .nav-tabs > li.active:hover > a {
    background-color: #e5e5e5;
    border: 0px;
    color: #000000db;
  }
  .nav-tabs-custom > .nav-tabs > li > a,
  .nav-tabs-custom > .nav-tabs > li > a:hover {
    border-radius: 0 !important;

  }
  .nav-tabs-custom > .tab-content {
    background: #fff;

    padding: 10px;
  }
  .page-header {
    margin: 10px 0 20px 0;
    padding: 0px 0px 16px;
    font-size: 22px;
    border: none;

  }

  .table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .nav::before,
  .nav::after {
    display: table;
    content: "";
  }
  .box .box-body .table {
    margin-bottom: 0;
  }
  .table-bordered {
    border: 1px solid #e2e7eb;
  }
  .table-striped > tbody > tr:nth-child(2n + 1) > td,
  .table-striped > tbody > tr:nth-child(2n + 1) > th {
    background-color: #f0f3f5;
  }
  .table-bordered > tbody > v-data-table > template > tr > th,
  .table-bordered > tbody > tr > td {
    border-color: #e2e7eb;
    font-size: 12px;
  }
  .table-bordered > tbody > tr > td {
    color: #707070;
  }
  /*
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
  } */

  .mCustomScrollbar.mCS_no_scrollbar,
  .mCustomScrollbar.mCS_touch_action {
    touch-action: auto;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    width: auto;
    height: 16px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .mCSB_scrollTools {
    opacity: 0.75;
  }
  .mCSB_scrollTools .mCSB_draggerContainer {
    position: absolute;
    height: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
    height: 100%;
  }
  .mCSB_scrollTools .mCSB_dragger {
    cursor: pointer;
    z-index: 1;
  }
  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 4px;
    margin: 6px auto;
  }
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(255, 255, 255, 0.75);
  }
  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    width: 100%;
    height: 2px;
    margin: 7px 0;
  }
  .mCSB_scrollTools .mCSB_draggerRail {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 16px;

  }
  .mCustomScrollBox {
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
  }

  /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {

    margin-bottom: 0;
  }
  .mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-right: 0;

  } */

  .mCSB_container {
    overflow: hidden;
    height: auto;
  }

  
  @media (min-width: 768px) {
    .col-sm-12 {
      width: 100%;
    }
  }
  </style>