<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 Subject</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 xs4 class="pt-4 subheading">
                <label class="right">Class:</label>
              </v-flex>
              <v-flex xs8 class="ml-3">
                <v-select
                  v-model="editedItem.classId"
                  label="Select your class"
                  type="text"
                  :items="classList"
                  item-text="classNum"
                  item-value="_id"
                  :rules="classRules"
                  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 xs4 sm4 class="pt-4 subheading">
                <label class="right">Pass Mark :</label>
              </v-flex>
              <v-flex xs8 sm8 class="ml-3">
                <v-text-field
                  label="Fill your Pass Mark"
                  name="name"
                  type="text"
                  :rules="markRules"
                  v-model="editedItem.passMarks"
                  required
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs4 sm4 class="pt-4 subheading">
                <label class="right">Final Mark :</label>
              </v-flex>
              <v-flex xs8 sm8 class="ml-3">
                <v-text-field
                  label="Fill your final mark"
                  name="name"
                  type="text"
                  :rules="finalRules"
                  v-model="editedItem.finalMarks"
                  required
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs4 class="pt-4 subheading">
                <label class="right">Subject:</label>
              </v-flex>
              <v-flex xs8 class="ml-3">
                <v-text-field
                  placeholder="fill your Subject"
                  v-model="editedItem.subjectName"
                  :rules="subjectRules"
                  type="text"
                  name="email"
                  required
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs4 sm4 class="pt-4 subheading">
                <label class="right">Subject Author :</label>
              </v-flex>
              <v-flex xs8 sm8 class="ml-3">
                <v-text-field
                  v-model="editedItem.subjectAuthor"
                  placeholder="fill your Subject Author"
                  name="name"
                  type="text"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs4 sm4 class="pt-4 subheading">
                <label class="right">Subject Code:</label>
              </v-flex>
              <v-flex xs8 sm8 class="ml-3">
                <v-text-field
                  v-model="editedItem.subjectCode"
                  placeholder="fill your Subject Code"
                  name="name"
                  type="text"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-flex xs12 sm12>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  round
                  dark
                  @click="save"
                  :loading="editLoading"
                  class="add-button"
                >Update Subject</v-btn>
              </v-card-actions>
            </v-flex>
          </v-form>
        </v-container>
      </v-card>
    </v-dialog>

    <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->

    <!-- <v-dialog v-model="viewSubjectDialog" max-width="500px">
      <v-card flat class="card-style pa-3" dark>
        <v-layout>
          <v-flex xs12>
            <label class="title text-xs-center">View Subject</label>
            <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
          </v-flex>
        </v-layout>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Subject Name:</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Subject Author:</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Subject :</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Pass Marks :</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.passMarks }}</h5>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Final Marks :</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm4>
                    <h5 class="right my-1">
                      <b>Type :</b>
                    </h5>
                  </v-flex>
                  <v-flex sm8 xs6>
                    <h5 class="my-1">{{ editedItem.type }}</h5>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>-->

    <!-- ****** EXISTING SUBJECTS 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"
          type="text"
          :items="addSection"
          item-text="name"
          item-value="_id"
          @change="getRoutineList()"
          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">
      <!-- <h5 class="page-header">
        <div class="col-lg-2 col-sm-2 col-md-2 col-xs-12 pull-right drop-marg">
          <div class="select2-container form-control select2" id="s2id_classesID">
            <a
              href="javascript:void(0)"
              onclick="return false;"
              class="select2-choice"
              tabindex="-1"
            >
              <span class="select2-chosen">Select Class</span>
              <abbr class="select2-search-choice-close"></abbr>
              <span class="select2-arrow">
                <b></b>
              </span>
            </a>
            <input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1" />
            <div class="select2-drop select2-display-none select2-with-searchbox">
              <div class="select2-search">
                <input
                  type="text"
                  autocomplete="off"
                  autocorrect="off"
                  autocapitalize="off"
                  spellcheck="false"
                  class="select2-input"
                />
              </div>
              <ul class="select2-results"></ul>
            </div>
          </div>
          <select
            name="classesID"
            id="classesID"
            class="form-control select2 select2-offscreen"
            tabindex="-1"
          >
            <option value="0" selected="selected">Select Class</option>
            <option value="3">ONE</option>
          </select>
        </div>
      </h5>-->

      <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">
          <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">
            <div
              id="mCSB_1"
              class="mCustomScrollBox mCS-light mCSB_horizontal mCSB_inside"
              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>
                      <tr>
                        <td style="font-weight:bold">SUNDAY</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>
    </div>

    <!-- <v-data-table
      :headers="headers"
      :items="routineList"
      :pagination.sync="pagination"
      :search="search"
    >
      <template slot="items" slot-scope="props">
        <tr class="tr">
          <td class="td-row td">{{ props.index + 1 }}</td>
          <td class="text-xs-center td td-row">{{ props.item.schoolYear }}</td>
          <td class="text-xs-center td td-row">{{ props.item.classId }}</td>
          <td class="text-xs-center td td-row">{{ props.item.sectionId }}</td>
          <td class="text-xs-center td td-row">{{ props.item.day }}</td>
          <td class="text-xs-center td td-row">{{ props.item.lectureRoutine.staringTime }}</td>
          <td class="text-xs-center td td-row">{{ props.item.lectureRoutine.endingTime }}</td>
          <td class="text-xs-center td td-row">{{ props.item.lectureRoutine.subjectName }}</td>
          <td class="text-xs-center td td-row">
            <span>
              <v-tooltip top>
                <img
                  slot="activator"
                  style="cursor:pointer; width:20px; height:18px; "
                  class="mr-3"
                  @click="editItem(props.item)"
                  src="/static/icon/edit.png"
                />
                <span>Edit</span>
              </v-tooltip>
              <v-tooltip top>
                <img
                  slot="activator"
                  style="cursor:pointer; width:20px; height:20px; "
                  class="mr-3"
                  @click="deleteItem(props.item)"
                  src="/static/icon/delete.png"
                />
                <span>Delete</span>
              </v-tooltip>
            </span>
          </td>
        </tr>
      </template>
      <v-alert
        slot="no-results"
        :value="true"
        color="error"
        icon="warning"
      >Your search for "{{ search }}" found no results.</v-alert>
    </v-data-table> -->
    <!-- ****** 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
                      placeholder="fill your year"
                      :rules="schoolRules"
                      v-model="addRoutine.schoolYear"
                    ></v-text-field>
                    <!-- <v-select
                      :items="classList"
                      label="Select School Year"
                      item-text="classNum"
                      item-value="_id"
                      v-model="addRoutine.classId"
                      name="Select School Year"
                      :rules="schoolRules"
                      class="pl-2"
                      required
                    ></v-select>-->
                  </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"
                      label="Select Class"
                      item-text="classNum"
                      item-value="_id"
                      v-model="addRoutine.classId"
                      name="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"
                      label="Select Section"
                      item-text="name"
                      item-value="_id"
                      v-model="addRoutine.sectionId"
                      name="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="_id"
                      :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 sm4 class="pt-4 subheading">
                    <label class="right">Starting time:</label>
                  </v-flex>
                  <v-flex xs8 sm8 class="ml-3">
                    <v-menu
                      ref="menuA"
                      :close-on-content-click="false"
                      v-model="menuB"
                      :nudge-right="40"
                      :return-value.sync="addRoutine.staringTime"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      max-width="290px"
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="addRoutine.staringTime"
                        label="Select your starting time"
                        append-icon="access_time"
                        :rules="timeInRules"
                        readonly
                      ></v-text-field>
                      <v-time-picker
                        v-model="addRoutine.staringTime"
                        @change="$refs.menuA.save(addRoutine.staringTime)"
                      ></v-time-picker>
                    </v-menu>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs4 sm4 class="pt-4 subheading">
                    <label class="right">Ending Time:</label>
                  </v-flex>
                  <v-flex xs8 sm8 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
                      placeholder="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
                      placeholder="fill your room"
                      :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: "",
    // viewSubjectDialog: false,
    editRoutineDialog: false,
    valid: true,
    validEditRoutine: true,
    addRoutineDialog: false,

    day: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
    ],
    pagination: {
      rowsPerPage: 10
    },
    token: "",

    menu1: false,
    menuB: false,
    menu2: 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"],
    headers: [
      {
        text: "No",
        align: "",
        sortable: false,
        value: "No"
      },
      {
        text: "Subject Name",
        value: "subjectName",
        sortable: false,
        align: "center"
      },
      {
        text: "Subject Author",
        value: "subjectAuthor",
        sortable: false,
        align: "center"
      },
      {
        text: "Subject Code",
        value: "subjectCode",
        sortable: false,
        align: "center"
      },
      // {
      //   text: "Teacher",
      //   value: "teacherId",
      //   sortable: false,
      //   align: "center"
      // },
      {
        text: "Pass Marks",
        value: "passMarks",
        sortable: false,
        align: "center"
      },
      {
        text: "Final Marks",
        value: "finalMarks",
        sortable: false,
        align: "center"
      },
      {
        text: "Type",
        value: "type",
        sortable: false,
        align: "center"
      },
      { text: "Action", value: "", sortable: false, align: "center" }
    ],
    subjectList: [],
    classList: [],
    addSection: [],
    subjectList: [],
    teacherList: [],
    titleRules: [],
    markRules: [],
    typeRules: [],
    routineList: [],
    editedIndex: -1,
    addRoutine: {},

    editedItem: {
      // subjectName: "",
      // subjectAuthor: ""
    }
  }),
  methods: {
    pickFile() {
      this.$refs.image.click();
    },
    editItem(item) {
      this.editedIndex = this.subjectList.subjects;
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
      this.editRoutineDialog = true;
    },
    // profile(item) {
    //   this.editedIndex = this.subjectList.subjects;
    //   this.editedItem = Object.assign({}, item);
    //   this.dialog1 = true;
    //   this.viewSubjectDialog = true;
    // },
    deleteItem(item) {
      let deleteSubject = {
        classId: this.addRoutine.classId,
        subjectId: item._id
      };
      http()
        .delete(
          "/deleteSubject",
          confirm("Are you sure you want to delete this?") && {
            params: deleteSubject
          }
        )
        .then(response => {
          this.getClassSubject(_id);
          this.snackbar = true;
          this.text = "Successfully delete Existing Subject";
          this.color = "green";
        })
        .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,
          staringTime: this.addRoutine.staringTime,
          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";
            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();
    },

    save() {
      if (this.$refs.formEditRoutine.validate()) {
        let editSubject = {
          classId: this.editedItem.classId,
          subjectId: this.editedItem._id,
          teacherId: this.editedItem.teacherId,
          type: this.editedItem.type,
          passMarks: this.editedItem.passMarks,
          finalMarks: this.editedItem.finalMarks,
          subjectAuthor: this.editedItem.subjectAuthor,
          subjectCode: this.editedItem.subjectCode,
          subjectName: this.editedItem.subjectName
        };
        this.editLoading = true;
        http()
          .put("/updateSubject", editSubject)
          .then(response => {
            this.snackbar = true;
            this.text = "Successfully Edit Existing Subject";
            this.color = "green";
            this.editLoading = false;
            this.editRoutineDialog = false;
            http()
              .get(
                "/getParticularClass",
                { params: { classId: _id } },
                {
                  headers: { Authorization: "Bearer " + this.token }
                }
              )
              .then(response => {
                this.subjectList = response.data.data;
                this.snackbar = true;
                this.color = "green";
                this.text = response.data.message;
                this.close();
              })
              .catch(err => {
                console.log("err====>", err);
              });
          })
          .catch(error => {
            this.editLoading = false;

            // console.log(error);
          });
      }
    },
    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;
        });
    },
    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;
        })
        .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.getNoticeDataList();
    this.getClass();
    this.getTeacherList();
    this.role = this.$store.state.role;
  }
};
</script>

<style scoped>
.nav-tabs-custom {
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.nav-tabs-custom > .nav-tabs {
  background-color: #e5e5e54d;
  margin: 0;
  border-bottom-color: #e5e5e54d;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav {
  padding-left: 0;
  list-style: none;
}
.nav-tabs-custom > .nav-tabs > li:first-of-type {
  margin-left: 0px;
}
.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: #09a3a3;
}
.nav-tabs-custom > .nav-tabs > li {
  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-left-color: #09a3a3;
  border-right-color: #09a3a3;
}
.nav-tabs-custom > .tab-content {
  background: #fff;
}
.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
  touch-action: auto;
}
.tab-content > .active {
  display: block;
}
.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;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}
.box .box-body .table {
  margin-bottom: 0;
}
.table {
  width: 100%;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f0f3f5;
}
.page-header {
  margin: 10px 0 20px 0;
  padding: 0px 0px 16px;
  font-size: 22px;
  border: none;
}

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