<template>

    <v-container fluid class="body-color">
      <!-- ****** EDIT TIME-TABLE****** -->

      <v-dialog v-model="dialog" max-width="600px" persistent>

        <v-flex xs12 sm12>
          <v-card flat class="card-style pa-2" dark>
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Edit Time Table</label>
                <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon>
              </v-flex>
            </v-layout>
            <!-- <v-layout>

                  <v-flex
                    xs12
                    class="text-xs-center text-sm-center text-md-center text-lg-center"
                  >
                    <v-avatar size="100px">
                      <img src="/static/icon/user.png" v-if="!imageUrl" />
                    </v-avatar>
                    <input
                      type="file"
                      style="display: none"
                      ref="image"
                      accept="image/*"
                      @change="onFilePicked"
                    />
                    <img
                      :src="imageData.imageUrl"
                      height="150"
                      v-if="imageUrl"
                      style="border-radius:50%; width:200px"
                    />
                  </v-flex>

            </v-layout>-->
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs4 class="pt-4 subheading">

                  <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                  <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>

                </v-flex>

                <v-flex xs8 sm5 class="ml-3">
                  <v-select
                    :items="addclass"
                    label="Select Class"
                    v-model="editedItem.classNum"
                    item-text="classNum"
                    item-value="_id"
                    @change="getSections(editedItem.classNum)"
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs4 class="pt-4 subheading">
                  <label class="right hidden-xs-only hidden-sm-only">Section Name:</label>
                  <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                </v-flex>
                <v-flex xs8 sm5 class="ml-3">
                  <v-select
                    :items="addSection"
                    label="Select Section"
                    v-model="editedItem.selectSection"
                    item-text="name"
                    item-value="_id"
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-layout>
              <v-flex xs12 sm9 offset-sm1>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
                  <v-btn round dark @click="save" class="add-button">Save</v-btn>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-card>
        </v-flex>
      </v-dialog>
  
      <!-- ****** ADD Dialog Schedule IN TIME-TABLE ******  -->

      <v-dialog v-model="dialogSchedule" max-width="600px" persistent>

        <v-flex xs12 sm12>
          <v-card flat class="card-style pa-2" dark>
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Add Schedule</label>
                <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon>
              </v-flex>
            </v-layout>
            <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
              <v-container fluid>
                <v-flex xs12 sm12 class="py-3">

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

                      <label class="right hidden-xs-only hidden-sm-only">Select Day:</label>
                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label>

                    </v-flex>

                    <v-flex xs12 sm5 class="pl-3">

                      <v-select

                        :items="addOneDay"
                        label="Select Day"
                        v-model="schedule.selectDay"
                        :rules="selecDayRule"

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

                  <v-flex xs12 sm8 offset-sm2>

                    <v-card-actions>

                      <v-spacer></v-spacer>

                      <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn>
                      <v-spacer></v-spacer>

                    </v-card-actions>
                  </v-flex>
                </v-layout>

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

      <!-- ****** ADD LECTURES IN TIME-TABLE ******  -->

      <v-dialog v-model="dialogAddLecture" max-width="600px" persistent>

        <v-flex xs12 sm12>
          <v-card flat class="card-style pa-2" dark>
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Add Lecture</label>
                <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon>
              </v-flex>
            </v-layout>
            <v-form ref="lectureForm" v-model="valid" lazy-validation>
              <v-container fluid>

                <v-flex xs12 sm12>
                  <v-layout>

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

                      <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                    </v-flex>
                    <v-flex xs5 class="ml-3">
                      <v-select
                        :items="addclass"
                        label="Select Class"
                        v-model="timeTable.select"
                        item-text="classNum"
                        item-value="_id"
                        @change="getClassSubject(timeTable.select)"
                        :rules="classRules"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm12>
                  <v-layout>
                    <v-flex xs4 class="pt-4 subheading">

                      <label class="right">Subject Name:</label>

                    </v-flex>

                    <v-flex xs5 class="ml-3">

                      <v-select
                        :items="subjectList.subjects"
                        label="Select Subject"
                        v-model="addlectures.subjectName"
                        item-text="subjectName"
                        item-value="subjectName"
                        :rules="subjectNameRules"
                        required
                      ></v-select>
                      <!-- <v-text-field

                        v-model="addlectures.subjectName"
                        :rules="subjectNameRules"

                        placeholder="fill your Subject Name"
                        type="text"

                      ></v-text-field>-->

                    </v-flex>

                  </v-layout>
                </v-flex>
                <v-flex xs12 sm12>
                  <v-layout>

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

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

                    </v-flex>

                    <v-flex xs5 class="ml-3">

                      <v-menu

                        ref="menuD"

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

                        v-model="menu5"

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

                          v-model="addlectures.timeIn"
                          label="Select your Time In"

                          append-icon="access_time"

                          :rules="timeInRules"

                          readonly

                        ></v-text-field>

                        <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>

                      </v-menu>

                    </v-flex>

                  </v-layout>
                </v-flex>
                <v-flex xs12 sm12>
                  <v-layout>

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

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

                    <v-flex xs5 class="ml-3">

                      <v-menu

                        ref="menuE"

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

                        v-model="menu6"

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

                          :rules="timeOutRules"
                          v-model="addlectures.timeOut"
                          label="Select your Time Out"

                          append-icon="access_time"

                          readonly

                        ></v-text-field>

                        <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>

                      </v-menu>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm12>
                  <v-layout>

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

                      <label class="right">Select Teacher:</label>
                    </v-flex>

                    <v-flex xs5 class="ml-3">

                      <v-select
                        :items="addTeachers"

                        label="Select Teacher"

                        v-model="addlectures.teacherId"

                        :rules="teacherRules"

                        item-text="name"
                        item-value="_id"
                        required
                      ></v-select>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-layout>

                  <v-flex xs12 sm8 offset-sm2>

                    <v-card-actions>

                      <v-spacer></v-spacer>

                      <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn>

                    </v-card-actions>
                  </v-flex>
                </v-layout>

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

      <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ******  -->

      <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent>

        <v-flex xs12 sm12 class>
          <v-card flat class="card-style pa-2" dark>
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Edit Lecture</label>
                <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon>

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

            <v-flex xs12 sm12>
              <v-layout>

                <v-flex xs4 class="pt-4 subheading">
                  <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                  <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>

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

                  <v-select
                    :items="addclass"
                    label="Select Class"
                    v-model="updateLectures.select"
                    item-text="classNum"
                    item-value="_id"
                    @change="getClassSubject(updateLectures.select)"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs4 class="pt-4 subheading">
                  <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label>
                  <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                </v-flex>
                <v-flex xs7 sm6 class="ml-3">
                  <v-select
                    :items="subjectList.subjects"
                    label="Select Subject"
                    v-model="updateLectures.subjectName"
                    item-text="subjectName"
                    item-value="subjectName"
                    required
                  ></v-select>
                  <!-- <v-text-field

                    v-model="updateLectures.subjectName"
                    placeholder="fill your Subject Name"
                    type="text"

                  ></v-text-field>-->

                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs5 sm4 class="pt-4 subheading">
                  <label class="right">Time In:</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="updateLectures.timeIn"
                      placeholder="Select your Time In"
                      append-icon="access_time"
                      readonly
                    ></v-text-field>
                    <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
                  </v-menu>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs5 sm4 class="pt-4 subheading">
                  <label class="right">Time Out:</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="updateLectures.timeOut"
                      placeholder="Select your Time Out"
                      append-icon="access_time"
                      readonly
                    ></v-text-field>
                    <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
                  </v-menu>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12>
              <v-layout>
                <v-flex xs5 sm4 class="pt-4 subheading">
                  <label class="right">Select Teacher:</label>
                </v-flex>
                <v-flex xs7 sm6 class="ml-3">
                  <v-select
                    :items="addTeachers"
                    label="Select Teacher"
                    v-model="updateLectures.teacherId"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-layout>
              <v-flex xs12 sm10 offset-sm1>
                <v-card-actions>
                  <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> -->
                  <v-spacer></v-spacer>
                  <v-btn
                    round
                    dark
                    class="add-button"
                    @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
                  >Save</v-btn>
                </v-card-actions>

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

          </v-card>

        </v-flex>
      </v-dialog>
      <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
  
      <!-- <v-card flat>
        <v-card-actions class="hidden-xs-only hidden-sm-only">
          <v-layout>
            <label class="right mt-4 ml-5">Select Class:</label>
            <v-select
              :items="addclass"
              label="Select Class"
              v-model="selectTimeTable.select"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              @change="getSections(selectTimeTable.select)"
              class="px-4"
              required
            ></v-select>
            <label class="right mt-4">Select Section:</label>
            <v-select
              :items="addSection"
              label="Select Section"
              v-model="selectTimeTable.selectSection"
              item-text="name"
              item-value="_id"
              name="Select Section"
              class="pl-3"
              required
            ></v-select>
          </v-layout>
          <v-spacer></v-spacer>
          <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
        </v-card-actions>
        <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
          <v-flex xs4 sm2 class="mt-4 ml-2">
            <label>Select Class:</label>
          </v-flex>
          <v-flex xs6 sm9>
            <v-select
              :items="addclass"
              label="Select Class"
              v-model="selectTimeTable.select"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              @change="getSections(selectTimeTable.select)"
              required
            ></v-select>
          </v-flex>
        </v-layout>
        <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
          <v-flex xs4 sm2 class="mt-4 ml-2">
            <label>Select Section:</label>
          </v-flex>
          <v-flex xs6 sm9>
            <v-select
              :items="addSection"
              label="Select Section"
              v-model="selectTimeTable.selectSection"
              item-text="name"
              item-value="_id"
              name="Select Section"
              required
            ></v-select>
          </v-flex>
        </v-layout>
        <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">

          <v-flex xs12>

            <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn>
          </v-flex>
        </v-layout>
      </v-card>-->
      <v-flex xs12>
        <v-toolbar color="transparent" flat>
          <v-btn
            fab
            dark
            class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
            small
            @click="addTimeTableDialog = true"
          >
            <v-icon dark>add</v-icon>
          </v-btn>
          <v-btn
            round
            class="open-dialog-button hidden-sm-only hidden-xs-only"
            dark
            @click="addTimeTableDialog = true"
          >
            <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table
          </v-btn>
          <v-flex xs4 md2>
            <v-select
              :items="addclass"
              label="Select Class"
              v-model="selectTimeTable.select"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              @change="getSections(selectTimeTable.select)"
              required
            ></v-select>
          </v-flex>
          <v-flex xs4 md2 class="ml-4">
            <v-select
              :items="addSection"
              label="Select Section"
              v-model="selectTimeTable.selectSection"
              item-text="name"
              item-value="_id"
              name="Select Section"
              required
            ></v-select>
          </v-flex>
          <v-spacer></v-spacer>
          <v-btn
            @click="findTimeTable()"
            round
            dark
            :loading="loading"
            class="right mb-2 open-dialog-button"
          >Find</v-btn>
          <v-card-title class="body-1" v-show="show">
            <v-btn icon large flat @click="displaySearch">
              <v-avatar size="27">

                <img src="/static/icon/search.png" alt="icon" />

              </v-avatar>
            </v-btn>
          </v-card-title>

          <v-flex xs8 sm8 md3 lg2 v-if="showSearch">

            <v-layout>
              <v-text-field

                autofocus

                v-model="search"
                label="Search"
                prepend-inner-icon="search"
                color="primary"
              ></v-text-field>
              <v-icon @click="closeSearch" color="error">close</v-icon>
            </v-layout>
          </v-flex>
        </v-toolbar>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :pagination.sync="pagination"
          :search="search"
          item-key="_id"
        >
          <template slot="items" slot-scope="props">
            <tr
              style="cursor: pointer;"
              class="tr"
              @click="getTimeTable(props.item), props.expanded = !props.expanded"
            >
              <td class="td td-row">{{ props.index + 1}}</td>
              <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td>
              <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td>
              <td class="text-xs-center td td-row">
                <span>
                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:20px; height:20px; "
                      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>
                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:20px; height:20px; "
                      class="mr-3"
                      src="/static/icon/add1.png"
                      @click="addSchedule(props.item._id)"
                    />
                    <span>Add</span>
                  </v-tooltip>
                </span>
              </td>
            </tr>
          </template>
          <template slot="expand" slot-scope="props">

            <v-data-table

              :items="timeTableList.schedule"
              hide-actions
              item-key="title"
              style="width: auto;"

            >
              <template slot="items" slot-scope="props">

                <tr class="tr">
                  <td class="text-xs-left subheading table-td td td-row">
                    <b>{{ props.item.day }}</b>
                  </td>
                  <td class="table-td td td-row">
                    <b>Subject</b>
                    <br />
                    <b>Time In</b>
                    <br />
                    <b>Time Out</b>
                  </td>
                  <td v-for="list in props.item.lectures" class="table-td td td-row">
                    <b>{{ list.subjectName }}</b>
                    <img
                      style="cursor:pointer; width:20px; height:18px; "
                      class="mr-2 ml-2"
                      src="/static/icon/edit1.png"

                      @click="updateTimeTable(list, timeTableList,props.item._id)"

                    />
                    <img
                      style="cursor:pointer; width:20px; height:20px; "
                      src="/static/icon/delete1.png"
                      @click="deleteTimeTable(list,props.item.lectures)"
                    />
                    <br />
                    {{list.timeIn}}
                    <br />
                    {{list.timeOut}}
                  </td>
                  <td class="td td-row">
                    <v-tooltip top>
                      <v-icon
                        slot="activator"
                        color="black"
                        @click="addLecture(props.item._id, timeTableList._id)"
                      >add_circle_outline</v-icon>
                      <span>Add</span>
                    </v-tooltip>

                  </td>
                </tr>
              </template>

            </v-data-table>

          </template>
          <v-alert
            slot="no-results"
            :value="true"
            color="error"
            icon="warning"
          >Your search for "{{ search }}" found no results.</v-alert>
        </v-data-table>
        <br />
        <br />
      </v-flex>

      <!-- ****** ADD  TIME-TABLE ****** -->

      <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent>

        <v-card flat class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Add Time Table</label>

              <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon>

            </v-flex>

          </v-layout>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-container fluid class="pt-3">
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      :items="addclass"
                      label="Select Class"
                      v-model="timeTable.select"
                      item-text="classNum"
                      item-value="_id"
                      @change="getSections(timeTable.select)"
                      :rules="classRules"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                  </v-flex>
                  <v-flex sm6 xs8 class="ml-3">
                    <v-select
                      :items="addSection"
                      label="Select Section"
                      v-model="timeTable.selectSection"
                      item-text="name"
                      item-value="_id"
                      :rules="sectionRules"

                      @change="getClassSubject(timeTable.select)"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      :items="subjectList.subjects"
                      label="Select Subject"
                      v-model="timeTable.subjectName"
                      item-text="subjectName"
                      item-value="subjectName"
                      :rules="subjectNameRules"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      :items="addTeachers"
                      label="Select Teacher"
                      v-model="timeTable.selectTeacher"
                      item-text="name"
                      item-value="_id"
                      :rules="teacherRules"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Select Day:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-select
                      :items="addOneDay"
                      label="Select Day"
                      v-model="timeTable.selectDay"
                      :rules="dayRules"
                      item-text="name"
                      item-value="_id"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- <v-flex xs12>

                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label>
                    <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                  </v-flex>
                  <v-flex xs8 sm6 class="ml-3">
                    <v-text-field
                      placeholder="fill your Subject Name"
                      :rules="subjectNameRules"
                      v-model="timeTable.subjectName"
                      type="text"
                      required
                    ></v-text-field>
                  </v-flex>
                </v-layout>

              </v-flex>-->

              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Time In:</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="timeTable.timeIn"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      max-width="290px"
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="timeTable.timeIn"
                        label="Select your timeIn"
                        append-icon="access_time"
                        :rules="timeInRules"
                        readonly
                      ></v-text-field>
                      <v-time-picker
                        v-model="timeTable.timeIn"
                        @change="$refs.menuA.save(timeTable.timeIn)"
                      ></v-time-picker>
                    </v-menu>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12>
                <v-layout>
                  <v-flex xs4 class="pt-4 subheading">
                    <label class="right">Time Out:</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="timeTable.timeOut"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      max-width="290px"
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="timeTable.timeOut"
                        label="Select your Time Out"
                        append-icon="access_time"
                        :rules="timeOutRules"
                        readonly
                      ></v-text-field>
                      <v-time-picker
                        v-model="timeTable.timeOut"
                        @change="$refs.menu.save(timeTable.timeOut)"
                      ></v-time-picker>
                    </v-menu>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-layout>
                <v-flex xs12 sm11>
                  <v-layout>
                    <v-spacer></v-spacer>
                    <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
                    <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-form>
        </v-card>
      </v-dialog>

      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>

      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ text }}</v-snackbar>
    </v-container>

  </template>
  <script>

  import http from "@/Services/http.js";
  import Util from "@/util";

  export default {
    data: () => ({
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      search: "",

      color: "",

      snackbar: false,
      loading: false,
      showLoader: false,
      dialog: false,

      show: true,
      showSearch: false,

      dialogAddLecture: false,
      dialogUpdateLectures: false,

      dialogSchedule: false,

      dialog1: false,
      valid: true,

      addTimeTableDialog: false,

      validAddDay: true,

      loadingFindData: false,

      addclass: [],
      addSection: [],

      subjectList: [],

      addTeachers: [],
      gender: ["Male", "Female"],

      pagination: {

        rowsPerPage: 15,

      },
      imageData: {},
      imageName: "",
      imageUrl: "",
      imageFile: "",

      timeInRules: [(v) => !!v || "Time In is required"],
      timeOutRules: [(v) => !!v || "Time Out is required"],
      lectureRules: [(v) => !!v || "Lecture No is required"],
      subjectNameRules: [(v) => !!v || "Subject Name is required"],
      classRules: [(v) => !!v || "Class Name is required"],
      sectionRules: [(v) => !!v || "Section Name is required"],
      sectionRules: [(v) => !!v || "Section Name is required"],
      teacherRules: [(v) => !!v || "Teacher Name is required"],
      selecDayRule: [(v) => !!v || "Day is required"],
      dayRules: [(v) => !!v || "Day is required"],

      getParticulerLecture: "",

      headers: [
        {
          text: "No",

          align: "",

          sortable: false,

          value: "No",

        },
        {
          text: "Class Name",
          value: "classData.classNum",
          sortable: false,

          align: "center",

        },
        {
          text: "Section Name",
          value: "sectionData.name",
          sortable: false,

          align: "center",

        },

        { text: "Action", value: "", sortable: false, align: "center" },

      ],
      daysHeaders: [
        { text: "Day", value: "dayday", sortable: false, align: "center" },
        {
          text: "Subject Name",
          value: "subjectName",
          sortable: false,

          align: "center",

        },
        { text: "Time In", value: "timeIn", sortable: false, align: "center" },

        { text: "Time Out", value: "timeOut", sortable: false, align: "center" },

      ],
      addOneDay: [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",

        "Sunday",

      ],

      schedule: {

        selectDay: "",

      },

      desserts: [],
      timeTableList: [],
      editedIndex: -1,
      selectTimeTable: {
        select: "",

        selectSection: "",

      },
      timeTable: {
        select: "",
        selectSection: "",
        selectDay: "",
        timeIn: null,
        timeOut: null,
        subjectName: "",

        selectTeacher: "",

      },
      editedItem: {
        classNum: "",

        selectSection: "",

      },
      addlectures: {
        timeIn: null,
        timeOut: null,
        subjectName: "",
        teacherId: "",
        scheduleId: "",

        timeTableId: "",

        select: "",

      },
      updateLectures: {
        timeIn: null,
        timeOut: null,
        subjectName: "",

        teacherId: "",

        select: "",

      },
      updateLecturesId: {
        lectureId: "",

        scheduleId: "",

      },
      menu1: false,
      menu2: false,
      menu3: false,
      menu4: false,
      menu5: false,
      menu6: false,

      scheduleDayId: "",

      showData: false,

    }),

    watch: {
      addTimeTableDialog: function (val) {
        if (!val) {
          this.timeTable = [];
        }
      },
    },

    methods: {
      findTimeTable() {

        this.loadingFindData = true;

        http()
          .get("/getParticularClassTimeTable", {
            params: {
              sectionId: this.selectTimeTable.selectSection,

              classId: this.selectTimeTable.select,
            },

          })

          .then((response) => {

            this.desserts = response.data.data;

            if (this.desserts.length === 0) {
              this.showLoader = false;
              this.snackbar = true;
              this.text = "Data not found!";
              this.color = "error";
              return;
            }
            this.showData = true;

            this.loadingFindData = false;

          })

          .catch((error) => {

            this.loadingFindData = false;
            this.snackbar = true;
            this.text = error.response.data.message;
            this.text = error.response.data.statusText;

          });
      },
      getSections(_id) {
        var token = this.$store.state.token;

        this.desserts = [];

        http()
          .get(
            "/getSectionsList",
            { params: { classId: _id } },
            {

              headers: { Authorization: "Bearer " + token },

            }
          )

          .then((response) => {

            this.addSection = response.data.data;

          })

          .catch((err) => {

            // console.log("err====>", err);
          });
      },

      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;
          });
      },

      getTimeTable(item) {
        this.showLoader = true;

        this.getParticulerLecture = item._id;

        this.getTimeTableDayData();
      },
      getTimeTableDayData() {

        var token = this.$store.state.token;
        http()
          .get(
            "/getParticularTimeTable",

            { params: { timeTableId: this.getParticulerLecture } },

            {

              headers: { Authorization: "Bearer " + token },

            }
          )

          .then((response) => {

            this.timeTableList = response.data.data;
            this.showLoader = false;

          })

          .catch((err) => {

            this.showLoader = false;
            // console.log("err====>", err);
          });
      },
      pickFile() {
        this.$refs.image.click();
      },
  
      onFilePicked(e) {

        const files = e.target.files;
        this.imageData.upload = e.target.files[0];
        if (files[0] !== undefined) {
          this.imageName = files[0].name;
          if (this.imageName.lastIndexOf(".") <= 0) {
            return;
          }
          const fr = new FileReader();
          fr.readAsDataURL(files[0]);
          fr.addEventListener("load", () => {
            this.imageUrl = fr.result;
            this.imageFile = files[0]; // this is an image file that can be sent to server...
            this.imageData.imageUrl = URL.createObjectURL(this.imageFile);

          });
        } else {
          this.imageName = "";
          this.imageFile = "";
          this.imageUrl = "";
        }
      },
      // getTimeTableList() {
      //   this.showLoader = true;
      //   var token = this.$store.state.token;
      //   http()
      //     .get("/getTimeTablesList", {
      //       headers: { Authorization: "Bearer " + token }
      //     })
      //     .then(response => {
      //       this.desserts = response.data.data;
      //       this.showLoader = false;
      //       // console.log("getTimeTableList=====>", response.data.data);
      //     })
      //     .catch(err => {
      //       // console.log("err====>", err);
      //       this.showLoader = false;
      //       this.$router.replace({ path: "/" });
      //     });
      // },
      editItem(item) {
        this.editedIndex = this.desserts.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog = true;
      },

      updateTimeTable(timeToUpdate, classToUpdate, scheduleId) {
        this.updateLecturesId.scheduleId = scheduleId;
        this.updateLecturesId.lectureId = timeToUpdate._id;
        this.updateLectures = timeToUpdate;

        this.dialogUpdateLectures = true;
      },
      addLecture(scheduleId, timeTableId) {

        this.addlectures.scheduleId = scheduleId;
        this.addlectures.timeTableId = timeTableId;
        this.dialogAddLecture = true;
      },
      AddLecture() {

        if (this.$refs.lectureForm.validate()) {

          http()
            .post("/addLecture", this.addlectures)

            .then((response) => {

              this.snackbar = true;
              this.text = "New Add Lecture successfully";

              var token = this.$store.state.token;
              http()

                .get(
                  "/getParticularTimeTable",
                  { params: { timeTableId: this.getParticulerLecture } },
                  {

                    headers: { Authorization: "Bearer " + token },

                  }
                )

                .then((response) => {

                  this.timeTableList = response.data.data;

                  this.snackbar = true;
                  this.text = response.data.message;
                  this.color = "green";

                  this.showLoader = false;
                })

                .catch((err) => {

                  this.showLoader = false;
                  // console.log("err====>", err);

                  this.snackbar = true;
                  this.color = "error";
                  this.text = error.response.data.message;

                });
              this.closedialogLecture();
              this.clearLeactureData();
            })

            .catch((error) => {

              this.snackbar = true;
              this.text = error.response.data.message;
              this.text = error.response.data.statusText;

            });

        }

      },
      updateParticularTable() {
        let EditLecture = {
          lectureId: this.updateLecturesId.lectureId,
          scheduleId: this.updateLecturesId.scheduleId,
          updatedLecture: {
            timeIn: this.updateLectures.timeIn,
            timeOut: this.updateLectures.timeOut,
            subjectName: this.updateLectures.subjectName,

            teacherId: this.updateLectures.teacherId,
          },

        };
        http()
          .put("/updateLecture", EditLecture)

          .then((response) => {

            //   console.log("updateLecture", EditLecture);

            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";

            this.closeUpdateLectures();
          })

          .catch((error) => {

            // console.log(error);

  
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
            if (error.response.data.statusText) {

              this.text = error.response.data.statusText;
            }
          });
      },
      deleteItem(item) {
        let deleteTimeTable = {

          timeTableId: item._id,

        };
        http()
          .delete(
            "/deleteTimeTable",
            confirm("Are you sure you want to delete this?") && {

              params: deleteTimeTable,

            }
          )

          .then((response) => {

            // console.log("deleteUers",deleteTimeTable)

            this.snackbar = true;

            this.text = response.data.message;
            this.color = "green";

            this.findTimeTable();
          })

          .catch((error) => {

            // console.log(error);
          });
      },

      close() {
        this.dialog = false;

      },
      close1() {
        this.dialog1 = false;
      },
      closedialogLecture() {
        this.dialogAddLecture = false;
      },
      closeUpdateLectures() {
        this.dialogUpdateLectures = false;
      },

      closeAddTimeTableModel() {
        this.addTimeTableDialog = false;
        this.timeTableList = [];
        this.timeTable = [];
      },

      submit() {
        if (this.$refs.form.validate()) {
          let imageData = new FormData();
          imageData.append("upload", this.imageFile);

          let addTimeTable = {
            sectionId: this.timeTable.selectSection,
            classId: this.timeTable.select,
            schedule: [
              {
                day: this.timeTable.selectDay,
                lectures: [
                  {
                    timeIn: this.timeTable.timeIn,
                    timeOut: this.timeTable.timeOut,
                    subjectName: this.timeTable.subjectName,

                    teacherId: this.timeTable.selectTeacher,
                  },
                ],
              },
            ],

          };
          this.loading = true;
          http()
            .post("/createTimeTable", addTimeTable)

            .then((response) => {

              // console.log("addTimeTable=====>", addTimeTable);
              if ((this.snackbar = true)) {
                this.text = "New Time Table added successfully";
              }

              this.color = "green";

              // this.clear();
              http()
                .get("/getParticularClassTimeTable", {
                  params: {
                    classId: this.timeTable.select,
                    sectionId: this.timeTable.selectSection,
                  },
                })
                .then((response) => {
                  this.desserts = response.data.data;
                  this.showData = true;
                  this.loadingFindData = false;
                })
                .catch((error) => {
                  this.loadingFindData = false;
                  this.snackbar = true;
                  this.text = error.response.data.message;
                  this.text = error.response.data.statusText;
                });

              this.addTimeTableDialog = false;

              this.loading = false;
            })

            .catch((error) => {

              // console.log(error);
              if ((this.snackbar = true)) {
                this.text = error.response.data.message;
              }
              this.loading = false;
            });
        }
      },

      clear() {
        this.$refs.form.reset();
      },

      clearLeactureData() {

        this.$refs.lectureForm.reset();
      },

      save() {
        let imageData = new FormData();
        imageData.append("upload", this.imageFile);
        // console.log(imageData);
        let editTimeTable = {
          timeTableId: this.editedItem._id,
          classId: this.editedItem.classNum,

          sectionId: this.editedItem.selectSection,

          // imageData
        };
        http()
          .put("/updateTimeTable", editTimeTable)

          .then((response) => {

            //   console.log("editTimeTable", editTimeTable);

            if ((this.snackbar = true)) {
              this.text = "Successfully Edit Existing Time Table";

              this.color = "success";

            }

            http()
              .get("/getParticularClassTimeTable", {
                params: {
                  classId: this.editedItem.classNum,
                  sectionId: this.editedItem.selectSection,
                },
              })
              .then((response) => {
                this.desserts = response.data.data;
                this.showData = true;
                this.loadingFindData = false;
              })
              .catch((error) => {
                this.loadingFindData = false;
                this.snackbar = true;
                this.text = error.response.data.message;
                this.text = error.response.data.statusText;
              });

          })

          .catch((error) => {

            // console.log(error);
            if ((this.snackbar = true)) {
              this.text = error.response.data.message;
            }
          });
        this.close();
      },

      deleteTimeTable(timeToDelete, deleteLectures) {
        let deleteLecture = {

          lectureId: timeToDelete._id,

        };
        http()
          .delete(
            "/deleteLecture",
            confirm("Are you sure you want to delete this?") && {

              params: deleteLecture,

            }
          )

          .then((response) => {

            if ((this.snackbar = true)) {

              this.text = "Successfully delete Existing Time Table";

            }
            const index = this.timeTableList.schedule.indexOf(deleteLectures);
            for (let i = 0; i < this.timeTableList.schedule.length; i++) {
              this.timeTableList.schedule[i].lectures.splice(index, 1);
            }
          })

          .catch((error) => {

            //   console.log(error);
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;

          });

      },
      addSchedule(id) {
        this.scheduleDayId = id;
        this.dialogSchedule = true;
      },
      submitSchedule() {

        if (this.$refs.formAddDay.validate()) {
          let scheduleDayData = {
            timeTableId: this.scheduleDayId,

            day: this.schedule.selectDay,

          };
          http()
            .post("/addSchedule", scheduleDayData)

            .then((response) => {

              this.snackbar = true;

              this.text = "New Schedule Day added successfully";

              this.dialogSchedule = false;
              this.loading = false;
              this.getTimeTableDayData();
            })

            .catch((error) => {

              // console.log(error);
              this.snackbar = true;

              this.text = error.response.data.message;

              this.loading = false;
            });
        }

      },
      displaySearch() {
        (this.show = false), (this.showSearch = true);
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";

      },

    },
    mounted() {
      // this.getTimeTableList();
      var token = this.$store.state.token;
      http()
        .get("/getClassesList", {

          headers: { Authorization: "Bearer " + token },

        })

        .then((response) => {

          this.addclass = response.data.data;
          // console.log("getClassesList=====>",this.addclass)
        })

        .catch((error) => {

          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
            this.$store.dispatch("Role", null);
          }

        });
  
      http()
        .get("/getTeachersList", {

          headers: { Authorization: "Bearer " + token },

        })

        .then((response) => {

          this.addTeachers = response.data.data;
          // console.log("getClassesList=====>",this.addTeachers)
        })

        .catch((error) => {

          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
            this.$store.dispatch("Role", null);
          }

        });

    },

  };

  </script>