<template>
  <v-container fluid class="body-color">
    <!-- ****** EDIT  Subject ****** -->
    <v-dialog v-model="editRoutineDialog" max-width="600px" persistent>
      <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(editedItem.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
                  :items="teacherList"
                  label="Select your teacher"
                  v-model="editedItem.teacherId"
                  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="addRoutineList.classId"
          item-text="classNum"
          item-value="_id"
          name="Select Class"
          :rules="classRules"
          @change="getSections(addRoutineList.classId)"
          class="pl-2"
          required
        ></v-select>
      </v-flex>
      <v-flex xs8 sm3 md2 class="mr-3">
        <v-select
          v-model="addRoutineList.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-if="showSearch">
        <v-layout>
          <v-text-field
            autofocus
            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-if="addRoutineDialog" persistent>
      v-if="addRoutineDialog"
      <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="closeAddRoutineModel">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: {},
    addRoutineList: {},
    startingTime: "",
    editedItem: {},
  }),
  watch: {
    addRoutineDialog: function (val) {
      if (!val) {
        this.addRoutine = [];
      }
    },
  },
  methods: {
    editItem(item, routineData) {
      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;
    },
    closeAddRoutineModel() {
      this.addRoutineDialog = false;
      this.classList = [];
      this.addRoutine = [];
    },
    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.text = "Routine added successfully";
            // this.clear();
            this.snackbar = true;
            this.color = "green";
            // console.log("===this.addRoutine===", this.addRoutine);
            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);
                this.snackbar = true;
                this.text = error.response.data.message;
                this.color = "error";
              });
            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._id,
          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;
      this.routineList = [];
      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.addRoutineList.classId,
              sectionId: this.addRoutineList.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>