<template>
  <v-container fluid class="body-color">
    <!-- ****** EDIT TIME-TABLE****** -->
    <v-dialog v-model="dialog" max-width="600px">
      <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">
      <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">
      <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">
      <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;
      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);
        });
    },
    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>