<template>
  <v-app id="pages-dasboard">
    <v-toolbar class="fixcolors" fixed app>
      <v-toolbar-title class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
      </v-toolbar-title>
      <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** -->
      <v-flex xs7 sm3 class="userSearch">
        <v-text-field
          flat
          append-icon="search"
          label="Find your Time Talbe"
          v-model="search"
          color="white"
          dark
        ></v-text-field>
      </v-flex>
      <v-spacer></v-spacer>
      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">
          <v-avatar size="40px">
            <img src="/static/icon/user.png" />
          </v-avatar>
        </v-btn>
        <v-list class="pa-0">
          <v-list-tile
            v-for="(item,index) in items"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
            @click="item.click"
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="index"
          >
            <v-list-tile-action v-if="item.icon">
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <v-tabs grow slider-color="black">
      <v-tab
        ripple
        @click="activeTab('existing')"
        v-bind:class="{ active: isActive }"
        id="tab"
        class="subheading"
      >Existing Time Table</v-tab>
      <v-tab
        ripple
        @click="activeTab('new')"
        v-bind:class="{ active: newActive }"
        id="tab1"
        User
        class="subheading"
      >Add New Time Table</v-tab>

      <!-- ****** EDITS TIME-TABLE****** -->

      <v-tab-item>
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          color="success"
        >{{ text }}</v-snackbar>
        <v-dialog v-model="dialog" max-width="1000px">
          <v-flex xs12 sm12 class>
            <v-toolbar color="grey lighten-2">
              <v-spacer></v-spacer>
              <v-toolbar-title>
                <h3>Edit Time Table</h3>
              </v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card flat>
              <v-form ref="form">
                <v-container fluid>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
                    >
                      <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">class No:</label>
                      </v-flex>
                      <v-flex xs12 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">Section Name:</label>
                      </v-flex>
                      <v-flex xs5 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 sm8 offset-sm2>
                      <v-card-actions>
                        <v-btn round dark @click.native="close">Cancel</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn round dark @click="save">Save</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-form>
            </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-toolbar color="grey lighten-2">
              <v-spacer></v-spacer>
              <v-toolbar-title>
                <h3>Add Schedule</h3>
              </v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card flat>
              <v-form>
                <v-container fluid>
                  <v-flex xs12 sm12 class="py-3">
                    <v-layout>
                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right">Select Day:</label>
                      </v-flex>
                      <v-flex xs12 sm5 class="ml-3">
                        <v-select
                          :items="addOneDay"
                          label="Select Day"
                          v-model="schedule.selectDay"
                        ></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">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="1000px">
          <v-flex xs12 sm12>
            <v-toolbar color="grey lighten-2">
              <v-spacer></v-spacer>
              <v-toolbar-title>
                <h3>Add Lecture</h3>
              </v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card flat>
              <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">Subject Name:</label>
                      </v-flex>
                      <v-flex xs5 class="ml-3">
                        <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"
                          ></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"
                          ></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"
                          v-model="addlectures.teacherId"
                          :rules="subjectNameRules"
                          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-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn round dark @click="AddLecture">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="1000px">
          <v-flex xs12 sm12 class>
            <v-toolbar color="grey lighten-2">
              <v-spacer></v-spacer>
              <v-toolbar-title>Edit Lecture</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card flat>
              <v-form ref="form">
                <v-container fluid>
                  <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-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 xs4 class="pt-4 subheading">
                        <label class="right">Time In:</label>
                      </v-flex>
                      <v-flex xs5 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"
                          ></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 xs4 class="pt-4 subheading">
                        <label class="right">Time Out:</label>
                      </v-flex>
                      <v-flex xs5 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"
                          ></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 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="updateLectures.teacherId"
                          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-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn
                          round
                          dark
                          @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
                        >Save</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-form>
            </v-card>
          </v-flex>
        </v-dialog>
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          color="success"
        >{{ text }}</v-snackbar>

        <!-- ****** 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="loading" 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-data-table
            :headers="headers"
            :items="desserts"
            :pagination.sync="pagination"
            :search="search"
            item-key="_id"
          >
            <template slot="items" slot-scope="props">
              <tr
                style="cursor: pointer;"
                @click="getTimeTable(props.item), props.expanded = !props.expanded"
              >
                <td class="text-xs-center">{{ props.index }}</td>
                <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
                <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
                <td class="text-xs-center">
                  <span>
                    <img
                      style="cursor:pointer; width:20px; height:18px; "
                      class="mr-3 mt-2"
                      @click="editItem(props.item)"
                      src="/static/icon/edit1.png"
                    />
                    <img
                      style="cursor:pointer;width:20px; height:20px; "
                      class="mr-3"
                      @click="deleteItem(props.item)"
                      src="/static/icon/delete1.png"
                    />
                    <v-icon
                      color="black"
                      @click="addSchedule(props.item._id)"
                    >add_circle_outline</v-icon>
                  </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>
                    <td class="text-xs-left subheading table-td">
                      <b>{{ props.item.day }}</b>
                    </td>
                    <td class="table-td">
                      <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">
                      <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)"
                      />
                      <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>
                      <v-icon
                        color="black"
                        @click="addLecture(props.item._id, timeTableList._id)"
                      >add_circle_outline</v-icon>
                    </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>
      </v-tab-item>

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

      <v-tab-item>
        <v-container>
          <v-snackbar
            :timeout="timeout"
            :top="y === 'top'"
            :right="x === 'right'"
            :vertical="mode === 'vertical'"
            v-model="snackbar"
            color="success"
          >{{ text }}</v-snackbar>
          <v-flex xs12 sm12 class="my-4">
            <v-card flat>
              <v-form ref="form" v-model="valid" lazy-validation>
                <v-container fluid>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
                    >
                      <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>
                    <v-layout>
                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right">Select Class:</label>
                      </v-flex>
                      <v-flex xs4 class="ml-3">
                        <v-select
                          :items="addclass"
                          label="Select Class"
                          v-model="timeTable.select"
                          item-text="classNum"
                          item-value="_id"
                          @change="getSections(timeTable.select)"
                          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 Section:</label>
                      </v-flex>
                      <v-flex xs4 class="ml-3">
                        <v-select
                          :items="addSection"
                          label="Select Section"
                          v-model="timeTable.selectSection"
                          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">Select Teacher:</label>
                      </v-flex>
                      <v-flex xs4 class="ml-3">
                        <v-select
                          :items="addTeachers"
                          label="Select Teacher"
                          v-model="timeTable.selectTeacher"
                          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">Select Day:</label>
                      </v-flex>
                      <v-flex xs4 class="ml-3">
                        <v-select
                          :items="addOneDay"
                          label="Select Day"
                          v-model="timeTable.selectDay"
                          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">Subject Name:</label>
                      </v-flex>
                      <v-flex xs4 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 xs4 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"
                          ></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 xs4 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"
                          ></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 sm6 offset-sm3>
                      <v-card-actions>
                        <v-btn @click="clear" round dark>clear</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-form>
            </v-card>
          </v-flex>
        </v-container>
      </v-tab-item>
    </v-tabs>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";
import Util from "@/util";

export default {
  data: () => ({
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    search: "",
    snackbar: false,
    loading: false,
    showLoader: false,
    dialog: false,
    dialogAddLecture: false,
    dialogUpdateLectures: false,
    dialogSchedule: false,
    dialog1: false,
    valid: true,
    isActive: true,
    newActive: false,
    addclass: [],
    addSection: [],
    addTeachers: [],
    gender: ["Male", "Female"],
    AddUsercredentials: {},
    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"],
    getParticulerLecture: "",
    headers: [
      {
        text: "No",
        align: "center",
        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: ""
    },
    updateLectures: {
      timeIn: null,
      timeOut: null,
      subjectName: "",
      teacherId: ""
    },
    updateLecturesId: {
      lectureId: "",
      scheduleId: ""
    },
    menu1: false,
    menu2: false,
    menu3: false,
    menu4: false,
    menu5: false,
    menu6: false,
    scheduleDayId: "",
    items: [
      {
        href: "/changepassword",
        title: "Change Password",
        click: e => {
          console.log(e);
        }
      },
      {
        href: "#",
        title: "Logout",
        click: e => {
          window.getApp.$emit("APP_LOGOUT");
        }
      }
    ]
  }),
  methods: {
    findTimeTable() {
      http()
        .get("/getParticularClassTimeTable", {
          params: {
            sectionId: this.selectTimeTable.selectSection,
            classId: this.selectTimeTable.select
          }
        })
        .then(response => {
          this.desserts = response.data.data;
        })
        .catch(error => {
          console.log("err====>", error);
          if ((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);
        });
    },
    getTimeTable(item) {
      this.showLoader = true;
      this.getParticulerLecture = item._id;
      var token = this.$store.state.token;
      http()
        .get(
          "/getParticularTimeTable",
          { params: { timeTableId: item._id } },
          {
            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) {
      // console.log(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);
          // console.log("upload=======>", this.imageData.imageUrl);
          // console.log("imageFile", 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) {
      console.log(
        "timeToUpdate, classToUpdate",
        timeToUpdate._id,
        classToUpdate.schedule
      );
      for (let i = 0; i < classToUpdate.schedule.length; i++) {
        this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
      }
      (this.updateLecturesId.lectureId = timeToUpdate._id),
        (this.updateLectures = timeToUpdate);
      this.dialogUpdateLectures = true;
    },
    addLecture(scheduleId, timeTableId) {
      // console.log('timeToAdd, classToAdd', 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 => {
            if ((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.showLoader = false;
              })
              .catch(err => {
                this.showLoader = false;
                // console.log("err====>", err);
              });
            this.closedialogLecture();
            this.clearLeactureData();
          })
          .catch(error => {
            if ((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);
          if ((this.snackbar = true)) {
            this.text = "Successfully Edit Update Lecture";
          }
          this.closeUpdateLectures();
        })
        .catch(error => {
          // console.log(error);
          if ((this.snackbar = true)) {
            this.text = error.response.data.message;
            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)
          if ((this.snackbar = true)) {
            this.text = "Successfully delete Existing Time Table";
          }
          this.findTimeTable();
        })
        .catch(error => {
          // console.log(error);
        });
    },
    activeTab(type) {
      switch (type) {
        case "existing":
          this.newActive = false;
          this.isActive = true;
          break;

        default:
          this.newActive = true;
          this.isActive = false;
          break;
      }
    },
    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    close1() {
      this.dialog1 = false;
    },
    closedialogLecture() {
      this.dialogAddLecture = false;
    },
    closeUpdateLectures() {
      this.dialogUpdateLectures = false;
    },
    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.clear();
            this.loading = false;
          })
          .catch(error => {
            // console.log(error);
            if ((this.snackbar = true)) {
              this.text = error.response.data.message;
            }
            this.loading = false;
          });
      }
    },
    mail() {},
    download() {},
    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.findTimeTable();
        })
        .catch(error => {
          // console.log(error);
          if ((this.snackbar = true)) {
            this.text = error.response.data.message;
          }
        });
      this.close();
    },
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    },
    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 User";
          }
          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() {
     let scheduleDayData = {
        timeTableId: this.scheduleDayId,
        day: this.schedule.selectDay
      };
      http()
        .post("/addSchedule", scheduleDayData)
        .then(response => {
          if ((this.snackbar = true)) {
            this.text = "New Schedule Day added successfully";
          }
          this.dialogSchedule = true;
          this.loading = false;
        })
        .catch(error => {
          // console.log(error);
          if ((this.snackbar = true)) {
            this.text = error.response.data.message;
          }
          this.loading = false;
        });
    }
  },
  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(err => {
        // console.log("err====>", err);
      });

    http()
      .get("/getTeachersList", {
        headers: { Authorization: "Bearer " + token }
      })
      .then(response => {
        this.addTeachers = response.data.data;
        // console.log("getClassesList=====>",this.addTeachers)
      })
      .catch(err => {
        // console.log("err====>", err);
      });
  },
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav;
    }
  }
};
</script>
<style scoped>
.theme--light .v-label,
.application .theme--light.v-label {
  color: black;
}
.v-tabs__div {
  text-transform: none;
}
.v-input__prepend-outer {
  margin-right: 0px !important;
}
.v-card__actions .v-btn {
  margin: 0 15px;
  min-width: 120px;
}
.primary {
  background-color: #aaa !important;
  border-color: #aaa !important;
}
h4 {
  background-repeat: no-repeat;
  padding: 8px;
  margin: auto;
  font-size: 25px;
}
#name {
  position: absolute;
  left: 100px;
  top: 17px;
}
#icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
#m {
  position: relative;
  left: 135px;
  top: -15px;
}
#G {
  position: absolute;
  top: 38px;
  color: white;
}
#bt {
  position: relative;
  top: -20px;
  left: 115px;
}
#e {
  position: relative;
  top: 5px;
  right: -30px;
  height: 17px;
  cursor: pointer;
}
#d {
  position: relative;
  top: 5px;
  right: -70px;
  height: 17px;
  cursor: pointer;
}
#td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#dialog {
  height: 550px;
}
.active {
  background-color: black;
  color: white !important;
}
.activebtn {
  color: black !important;
}
#flex {
  height: 300px;
}
.top {
  margin-top: 100px;
}
.v-tabs__item a {
  font-size: 16px !important;
}
.table-td {
  padding: 0px 42px !important;
}
@media screen and (max-width: 769px) {
  .top {
    margin-top: 0 !important;
  }
  .userSearch .v-icon {
    font-size: 20px !important;
    margin-left: 20px;
  }
}
@media screen and (max-width: 380px) {
  .pl-3 {
    padding-left: 0px !important;
  }
  /* .right {
    float: none !important;
  } */
  .subheading {
    font-size: 14px !important;
  }
  .v-card__actions .v-btn {
    margin: 0 0px;
    min-width: 100px;
  }
  /* .searchIcon .v-icon {
   font-size: 20px;
   margin-left: 20px;
   } */
  .subheading {
    font-size: 12px !important;
  }
  h5 {
    font-size: 13px;
  }
}
.v-icon {
  font-size: 30px;
}
@media screen and (min-width: 1270px) {
  .hide {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  .userSearch .v-text-field .v-label {
    line-height: 24px !important;
  }
  .userSearch .v-label {
    font-size: 13px !important;
  }
  .v-list__tile {
    font-size: 14px;
    padding: 0 10px;
  }
  .name {
    font-size: 15px;
  }
}
</style>