<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 Teachers ****** -->
      <v-flex xs7 sm3 class="userSearch">
        <v-text-field
          flat
          append-icon="search"
          label="Find your Teachers"
          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 Teachers</v-tab>
      <v-tab
        ripple
        @click="activeTab('new')"
        v-bind:class="{ active: newActive }"
        id="tab1"
        User
        class="subheading"
      >Add New Teachers</v-tab>
      <!-- ****** EDIT TEACHERS DETAILS ****** -->
      <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="my-4">
            <v-toolbar color="white">
              <v-spacer></v-spacer>
              <v-toolbar-title>Edit Profile</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 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-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Full Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.name"
                            placeholder="fill your full Name"
                            name="name"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Email ID:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            placeholder="fill your email"
                            v-model="editedItem.email"
                            type="text"
                            name="email"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Date of Birth:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-menu
                            ref="menu"
                            :close-on-content-click="false"
                            v-model="menu2"
                            :nudge-right="40"
                            lazy
                            transition="scale-transition"
                            offset-y
                            full-width
                            min-width="290px"
                          >
                            <v-text-field
                              slot="activator"
                              v-model="editedItem.dob"
                              placeholder="Select date"
                            ></v-text-field>
                            <v-date-picker
                              ref="picker"
                              v-model="editedItem.dob"
                              :max="new Date().toISOString().substr(0, 10)"
                              min="1950-01-01"
                              @input="menu2 = false"
                            ></v-date-picker>
                          </v-menu>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">City:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.city"
                            placeholder="fill your City Name"
                            name="City"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">State:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.state"
                            placeholder="fill your State Name"
                            name="state"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">PinCode:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.pincode"
                            placeholder="fill your pincode"
                            name="pincode"
                            type="number"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Mobile NO:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.mobileNo"
                            placeholder="fill your MobileNo"
                            name="mobileNo"
                            type="number"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Select Country:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-autocomplete
                            v-model="editedItem.country"
                            :items="countries"
                            placeholder="Select Country Name"
                            required
                          ></v-autocomplete>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Join Date</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-menu
                            ref="menu"
                            :close-on-content-click="false"
                            v-model="menu3"
                            :nudge-right="40"
                            lazy
                            transition="scale-transition"
                            offset-y
                            full-width
                            min-width="290px"
                          >
                            <v-text-field
                              slot="activator"
                              v-model="editedItem.joinDate"
                              placeholder="Select date"
                            ></v-text-field>
                            <v-date-picker
                              ref="picker"
                              v-model="editedItem.joinDate"
                              :max="new Date().toISOString().substr(0, 10)"
                              min="1950-01-01"
                              @input="menu3 = false"
                            ></v-date-picker>
                          </v-menu>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Uplaod Image:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            label="Select Image"
                            @click="pickFile"
                            v-model="imageName"
                            prepend-icon="attach_file"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
                          <label class>Present Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="editedItem.presentAddress"
                            placeholder="fill Your present Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
                          <label>Permanent Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="editedItem.permanentAddress"
                            placeholder="fill Your Permanent Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <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>

<!-- ****** PROFILE VIEW TEACHERS DETAILS ******  -->

        <v-dialog v-model="dialog1" max-width="600px">
          <v-toolbar color="white">
            <v-spacer></v-spacer>
            <v-toolbar-title>Profile</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-icon @click="close1">close</v-icon>
          </v-toolbar>
          <v-card>
            <v-flex align-center justify-center layout text-xs-center>
              <v-avatar size="50px" style="position:absolute; top:20px;">
                <img src="/static/icon/user.png">
              </v-avatar>
            </v-flex>
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex>
                    <br>
                    <br>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Full Name:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.name }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Email:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.email }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">City:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.city }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">State:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.state }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Country:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.country }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Pincode:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.pincode }}</h5>
                      </v-flex>
                    </v-layout>
                     <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Mobile No:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Join Date:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.joinDate }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Date Of Birth:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.dob }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                     <v-flex xs6 sm6 >
                     <h5 class="right my-1">Permanent Address:</h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                    <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                  </v-flex>
                    </v-layout>
                    <v-layout>
                     <v-flex xs6 sm6 >
                     <h5 class="right my-1">present Address:</h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                    <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                  </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
          </v-card>
        </v-dialog>
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          color="success"
        >{{ text }}</v-snackbar>

        <!-- ****** EXISTING-Teachers TABLE DATA****** -->
        <v-data-table
          :headers="headers"
          :items="desserts"
          :pagination.sync="pagination"
          :search="search"
        >
          <template slot="items" slot-scope="props">
            <td id="td" class="text-xs-center">{{ props.index}}</td>
            <td id="td" class="text-xs-center">{{ props.item.name}}</td>
            <td id="td" class="text-xs-center">{{ props.item.email }}</td>
            <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
            <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td>
            <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
            <td class="text-xs-center">
              <span>
                <img
                  style="cursor:pointer; width:25px; height:18px; "
                  class="mr-5"
                  @click="profile(props.item)"
                  src="/static/icon/eye1.png"
                >
                <img
                  style="cursor:pointer; width:20px; height:18px; "
                  class="mr-5"
                  @click="editItem(props.item)"
                  src="/static/icon/edit1.png"
                >
                <img
                  style="cursor:pointer; height:20px; "
                  class="mr-5"
                  @click="deleteItem(props.item)"
                  src="/static/icon/delete1.png"
                >
              </span>
            </td>
          </template>
          <v-alert
            slot="no-results"
            :value="true"
            color="error"
            icon="warning"
          >Your search for "{{ search }}" found no results.</v-alert>
        </v-data-table>
      </v-tab-item>

      <!-- ****** Add Teachers Data****** -->
      <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-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Full Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addTeachers.name"
                            placeholder="fill your full Name"
                            name="name"
                            type="text"
                            :rules="nameRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Email ID:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            placeholder="fill your email"
                            :rules="emailRules"
                            v-model="addTeachers.email"
                            type="text"
                            name="email"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Date of Birth:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-menu
                            ref="menu"
                            :close-on-content-click="false"
                            v-model="menu"
                            :nudge-right="40"
                            lazy
                            transition="scale-transition"
                            offset-y
                            full-width
                            min-width="290px"
                          >
                            <v-text-field
                              slot="activator"
                              :rules="dateRules"
                              v-model="addTeachers.date"
                              placeholder="Select date"
                            ></v-text-field>
                            <v-date-picker
                              ref="picker"
                              v-model="addTeachers.date"
                              :max="new Date().toISOString().substr(0, 10)"
                              min="1950-01-01"
                              @input="menu = false"
                            ></v-date-picker>
                          </v-menu>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">City:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addTeachers.city"
                            placeholder="fill your City Name"
                            name="City"
                            type="text"
                            :rules="cityRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">State:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addTeachers.state"
                            placeholder="fill your State Name"
                            name="state"
                            type="text"
                            :rules="stateRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">PinCode:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addTeachers.pincode"
                            placeholder="fill your pincode"
                            name="pincode"
                            type="number"
                            :rules="pincode"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Mobile NO:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addTeachers.mobileNo"
                            placeholder="fill your MobileNo"
                            name="mobileNo"
                            type="number"
                            :rules="mobileNoRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Select Country:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-autocomplete
                            v-model="addTeachers.country"
                            :rules="country"
                            :items="countries"
                            placeholder="Select Country Name"
                            required
                          ></v-autocomplete>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Join Date</label>
                        </v-flex>
                          <v-flex xs8 class="ml-3">
                            <v-menu
                              ref="menu1"
                              :close-on-content-click="false"
                              v-model="menu1"
                              :nudge-right="40"
                              lazy
                              transition="scale-transition"
                              offset-y
                              full-width
                              min-width="290px"
                            >
                              <v-text-field
                                slot="activator"
                                :rules="joinDateRules"
                                v-model="addTeachers.joinDate"
                                placeholder="Select date"
                              ></v-text-field>
                              <v-date-picker
                                ref="picker"
                                v-model="addTeachers.joinDate"
                                :max="new Date().toISOString().substr(0, 10)"
                                min="1950-01-01"
                                @input="menu1 = false"
                              ></v-date-picker>
                            </v-menu>
                          </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Uplaod Image:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            label="Select Image"
                            @click="pickFile"
                            v-model="imageName"
                            prepend-icon="attach_file"
                          ></v-text-field>
                        <input
                        type="file"
                        style="display: none"
                        ref="image"
                        accept="image/*"
                        @change="onFilePicked"
                      >
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
                          <label class>Present Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="addTeachers.presentAddress"
                            :rules="presentAddress"
                            placeholder="fill Your present Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
                          <label>Permanent Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="addTeachers.permanentAddress"
                            :rules="permanentAddress"
                            placeholder="fill Your Permanent Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <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>
  </v-app>
</template>

<script>
// import AppToolbar from '@/components/AppToolbar';
import http from "@/Services/http.js";
import Util from "@/util";

export default {
  components: {
    // "one-month": onemonth,
  },
  data: () => ({
    component: "report-generate",
    snackbar: false,
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    loading: false,
    date: null,
    search: "",
    menu: false,
    menu1: false,
    menu2: false,    
    menu3: false,
    dialog: false,
    dialog1: false,
    valid: true,
    isActive: true,
    newActive: false,
    pagination: {
      rowsPerPage: 15
    },
    imageData: {},
    imageName: "",
    imageUrl: "",
    imageFile: "",
    nameRules: [v => !!v || " Full Name is required"],
    dateRules: [v => !!v || " DOB is required"],
    cityRules: [v => !!v || " City Name is required"],
    pincode: [v => !!v || " Pincode is required"],
    country: [v => !!v || " Country Name is required"],
    permanentAddress: [v => !!v || " Permanent Address is required"],
    presentAddress: [v => !!v || " Present Address  is required"],
    mobileNoRules: [v => !!v || "Mobile Number is required"],
    stateRules: [v => !!v || "State Name is required"],
    joinDateRules: [v => !!v || " Join Date is required"],
    errorMessages: "",
    emailRules: [
      v => !!v || "E-mail is required",
      v =>
        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
        "E-mail must be valid"
    ],
    countries: [
      "Afghanistan",
      "Albania",
      "Algeria",
      "Andorra",
      "Angola",
      "Anguilla",
      "Antigua &amp; Barbuda",
      "Argentina",
      "Armenia",
      "Aruba",
      "Australia",
      "Austria",
      "Azerbaijan",
      "Bahamas",
      "Bahrain",
      "Bangladesh",
      "Barbados",
      "Belarus",
      "Belgium",
      "Belize",
      "Benin",
      "Bermuda",
      "Bhutan",
      "Bolivia",
      "Bosnia &amp; Herzegovina",
      "Botswana",
      "Brazil",
      "British Virgin Islands",
      "Brunei",
      "Bulgaria",
      "Burkina Faso",
      "Burundi",
      "Cambodia",
      "Cameroon",
      "Cape Verde",
      "Cayman Islands",
      "Chad",
      "Chile",
      "China",
      "Colombia",
      "Congo",
      "Cook Islands",
      "Costa Rica",
      "Cote D Ivoire",
      "Croatia",
      "Cruise Ship",
      "Cuba",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Djibouti",
      "Dominica",
      "Dominican Republic",
      "Ecuador",
      "Egypt",
      "El Salvador",
      "Equatorial Guinea",
      "Estonia",
      "Ethiopia",
      "Falkland Islands",
      "Faroe Islands",
      "Fiji",
      "Finland",
      "France",
      "French Polynesia",
      "French West Indies",
      "Gabon",
      "Gambia",
      "Georgia",
      "Germany",
      "Ghana",
      "Gibraltar",
      "Greece",
      "Greenland",
      "Grenada",
      "Guam",
      "Guatemala",
      "Guernsey",
      "Guinea",
      "Guinea Bissau",
      "Guyana",
      "Haiti",
      "Honduras",
      "Hong Kong",
      "Hungary",
      "Iceland",
      "India",
      "Indonesia",
      "Iran",
      "Iraq",
      "Ireland",
      "Isle of Man",
      "Israel",
      "Italy",
      "Jamaica",
      "Japan",
      "Jersey",
      "Jordan",
      "Kazakhstan",
      "Kenya",
      "Kuwait",
      "Kyrgyz Republic",
      "Laos",
      "Latvia",
      "Lebanon",
      "Lesotho",
      "Liberia",
      "Libya",
      "Liechtenstein",
      "Lithuania",
      "Luxembourg",
      "Macau",
      "Macedonia",
      "Madagascar",
      "Malawi",
      "Malaysia",
      "Maldives",
      "Mali",
      "Malta",
      "Mauritania",
      "Mauritius",
      "Mexico",
      "Moldova",
      "Monaco",
      "Mongolia",
      "Montenegro",
      "Montserrat",
      "Morocco",
      "Mozambique",
      "Namibia",
      "Nepal",
      "Netherlands",
      "Netherlands Antilles",
      "New Caledonia",
      "New Zealand",
      "Nicaragua",
      "Niger",
      "Nigeria",
      "Norway",
      "Oman",
      "Pakistan",
      "Palestine",
      "Panama",
      "Papua New Guinea",
      "Paraguay",
      "Peru",
      "Philippines",
      "Poland",
      "Portugal",
      "Puerto Rico",
      "Qatar",
      "Reunion",
      "Romania",
      "Russia",
      "Rwanda",
      "Saint Pierre &amp; Miquelon",
      "Samoa",
      "San Marino",
      "Satellite",
      "Saudi Arabia",
      "Senegal",
      "Serbia",
      "Seychelles",
      "Sierra Leone",
      "Singapore",
      "Slovakia",
      "Slovenia",
      "South Africa",
      "South Korea",
      "Spain",
      "Sri Lanka",
      "St Kitts &amp; Nevis",
      "St Lucia",
      "St Vincent",
      "St. Lucia",
      "Sudan",
      "Suriname",
      "Swaziland",
      "Sweden",
      "Switzerland",
      "Syria",
      "Taiwan",
      "Tajikistan",
      "Tanzania",
      "Thailand",
      "Timor L'Este",
      "Togo",
      "Tonga",
      "Trinidad &amp; Tobago",
      "Tunisia",
      "Turkey",
      "Turkmenistan",
      "Turks &amp; Caicos",
      "Uganda",
      "Ukraine",
      "United Arab Emirates",
      "United Kingdom",
      "United States",
      "Uruguay",
      "Uzbekistan",
      "Venezuela",
      "Vietnam",
      "Virgin Islands (US)",
      "Yemen",
      "Zambia",
      "Zimbabwe"
    ],
    headers: [
      {
        text: "No",
        align: "center",
        sortable: false,
        value: "No"
      },
      { text: "Name", value: "name", sortable: false, align: "center" },
      { text: "Email", value: "email", sortable: false, align: "center" },
      { text: "DOB", value: "dob", sortable: false, align: "center" },
      { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
      { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
      { text: "Action", value: "", sortable: false, align: "center" }
    ],
    desserts: [],
    editedIndex: -1,
    upload:'',
    editedItem: {
      role: "TEACHER",
      name: "",
      email: "",
      date: null,
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobileNo: "",
      state: "",
      joinDate: null
    },
    addTeachers: {
      role: "TEACHER",
      name: "",
      email: "",
      date: null,
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobileNo: "",
      state: "",
      joinDate: null
    },
    defaultItem: {
      role: "TEACHER",
      name: "",
      email: ""
    },
    userName: "",
    items: [
      {
        href: "/changepassword",
        title: "Change Password",
        click: e => {
          console.log(e);
        }
      },
      {
        href: "#",
        title: "Logout",
        click: e => {
          window.getApp.$emit("APP_LOGOUT");
        }
      }
    ]
  }),
  watch: {
    menu(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    },
    menu1(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    }
  },
  methods: {
    save (date) {
      this.$refs.menu.save(date)
    },
    save (date) {
      this.$refs.menu1.save(date)
    },
    pickFile() {
      this.$refs.image.click();
    },

    onFilePicked(e) {
      // console.log(e)
      const files = e.target.files;
      this.upload = e.target.files[0];
      console.log("imageData-upload========>",this.upload)
      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 = "";
      }
    },
    getTeacherList() {
      var token = this.$store.state.token;
      http()
        .get("/getTeachersList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.desserts = response.data.data;
          // console.log("getTeacherList=====>",this.desserts)
        })
        .catch(err => {
          // console.log("err====>", err);
          this.$router.replace({ path: "/" });
        });
    },
    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    profile(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog1 = true;
    },
    deleteItem(item) {
      let deleteTeachers = {
        teacherId: item._id
      };
      //  console.log("deleteUers",deleteTeachers)
      http()
        .delete(
          "/deleteTeacher",
          confirm("Are you sure you want to delete this?") && {
            params: deleteTeachers
          }
        )
        .then(response => {
          // console.log("deleteUers",deleteTeachers)
          if ((this.snackbar = true)) {
            this.text = "Successfully delete Existing User";
          }
          this.getTeacherList();
        })
        .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;
    },
    // close2() {
    //   this.dialog2 = false;
    // },
    submit() {
      if (this.$refs.form.validate()) {
        let images = new FormData();
        images.append("upload", this.imageFile);
        console.log(images);
        // var form_data = new FormData();
        //  for (var key in addTeacher) {
        //     if (key === 'upload') {
        //      form_data.append(key, this.imageFile);
        //    } else {
        //      form_data.append(key, addTeacher[key])
        //    }
        //  }
        console.log("images",images)
        let addTeacher = {
          name: this.addTeachers.name,
          email: this.addTeachers.email,
          role: this.addTeachers.role,
          dob: this.addTeachers.date,
          city: this.addTeachers.city,
          pincode: this.addTeachers.pincode,
          country: this.addTeachers.country,
          permanentAddress: this.addTeachers.permanentAddress,
          presentAddress: this.addTeachers.presentAddress,
          mobileNo: this.addTeachers.mobileNo,
          state: this.addTeachers.state,
          joinDate: this.addTeachers.joinDate,
          images
          // upload:this.imageFile
        };
        // console.log("addTeacher============>", addTeacher);
        http()
          .post("/createTeacher", addTeacher)
          .then(response => {
            console.log("addTeacher", addTeacher);
            this.getTeacherList();
            if ((this.snackbar = true)) {
              this.text = "New user added successfully";
            }

            this.clear();
          })
          .catch(error => {
            // console.log(error);
            if ((this.snackbar = true)) {
              this.text = error.response.data.message;
            }
          });
      }
    },
    mail() {},
    download() {},
    clear() {
      this.$refs.form.reset();
    },
    save() {
      let editTeacher = {
        teacherId: this.editedItem._id,
        name: this.editedItem.name,
        email: this.editedItem.email,
        role: this.editedItem.role,
        dob: this.editedItem.date,
        city: this.editedItem.city,
        pincode: this.editedItem.pincode,
        country: this.editedItem.country,
        permanentAddress: this.editedItem.permanentAddress,
        presentAddress: this.editedItem.presentAddress,
        mobileNo: this.editedItem.mobileNo,
        state: this.editedItem.state,
        joinDate: this.editedItem.joinDate,
        // imageData,
      };
      http()
        .put("/updateTeacher", editTeacher)
        .then(response => {
          console.log("editTeacher",editTeacher);
          if ((this.snackbar = true)) {
            this.text = "Successfully Edit Existing User";
          }
          this.getTeacherList();
        })
        .catch(error => {
          console.log(error);
        });
      this.close();
    },
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    }
  },
  mounted() {
    this.getTeacherList();
    // console.log("Id",this.$store.state.id)
    // console.log("token",this.$store.state.token)
  },
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav;
    }
  }
};
</script>
<style scoped>
.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;
}
.v-tabs__item a {
  font-size: 16px !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) {
  .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: 962px) {
.imglogo{
    position: absolute;
    top: 13px;
    left: 13px !important;
    width: 70px;
    height: 24px;
} */
}
@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>