<template>

    <v-app id="pages-dasboard">

      <v-tabs grow slider-color="gray">

        <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="1400px" scrollable>

            <v-card flat>
              <v-toolbar color="grey lighten-2" flat>

                <v-spacer></v-spacer>

                <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>

                <v-spacer></v-spacer>

              </v-toolbar>

              <v-card-text style="height: 740px;">

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

                    <v-layout>

                      <v-flex xs4 sm4 class="pt-4 subheading">
                        <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                      </v-flex>
                      <v-flex xs8 sm6 class="ml-3">
                        <v-text-field
                          v-model="editedItem.name"
                          placeholder="fill your full Name"
                          type="text"
                          required
                        ></v-text-field>

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

                  </v-flex>
                  <v-flex xs12 sm6>

                    <v-layout>

                      <v-flex xs4 sm4 class="pt-4 subheading">
                        <label class="right">Email ID:</label>

                      </v-flex>

                      <v-flex xs8 sm6 class="ml-3">

                        <v-text-field
                          placeholder="fill your email"
                          v-model="editedItem.email"
                          type="text"
                          required
                        ></v-text-field>

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

                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>

                    <v-layout>

                      <v-flex xs4 sm4 class="pt-4 subheading">
                        <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                        <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                      </v-flex>
                      <v-flex xs8 sm6 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 sm6 class="ml-3">
                        <v-text-field
                          v-model="editedItem.city"
                          placeholder="fill your City Name"
                          type="text"
                          required
                        ></v-text-field>

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

                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>

                    <v-layout>

                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right">State:</label>

                      </v-flex>

                      <v-flex xs8 sm6 class="ml-3">
                        <v-text-field
                          v-model="editedItem.state"
                          placeholder="fill your State 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">PinCode:</label>

                      </v-flex>

                      <v-flex xs8 sm6 class="ml-3">
                        <v-text-field
                          v-model="editedItem.pincode"
                          placeholder="fill your pincode"
                          type="number"
                          required
                        ></v-text-field>

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

                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>

                    <v-layout>

                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                      </v-flex>
                      <v-flex xs8 sm6 class="ml-3">
                        <v-text-field
                          v-model="editedItem.mobileNo"
                          placeholder="fill your 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 hidden-xs-only hidden-sm-only">Select Country:</label>
                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                      </v-flex>
                      <v-flex xs8 sm6 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 wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs4 class="pt-4 subheading">
                        <label class="right">Join Date:</label>
                      </v-flex>
                      <v-flex xs8 sm6 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 hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                        <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                      </v-flex>

                      <v-flex xs8 sm6 class="ml-3">

                        <v-text-field
                          label="Select Image"
                          @click="pickFile"
                          v-model="imageName"
                          append-icon="attach_file"
                        ></v-text-field>

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

                  </v-flex>
                </v-layout>
                <v-layout class="hidden-xs-only hidden-sm-only" wrap>

                  <v-flex xs12 sm6>

                    <v-layout>

                      <v-flex xs4 sm4 class="pt-4 subheading">
                        <label class="right">Present Address:</label>

                      </v-flex>

                      <v-flex xs8 sm6 class="ml-3">

                        <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 sm6>

                    <v-layout>

                      <v-flex xs4 sm4 class="pt-4 subheading">
                        <label class="right">Permanent Address:</label>

                      </v-flex>

                      <v-flex xs12 sm6 class="ml-3">

                        <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 class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                  <v-flex xs12 sm12>
                    <v-layout>
                      <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                        <label class>Present Address:</label>

                      </v-flex>

                    </v-layout>
                    <v-layout>

                      <v-flex xs12 sm12>

                        <v-textarea
                          name="input-4-3"
                          v-model="editedItem.presentAddress"
                          placeholder="fill Your present Address"
                          required
                        ></v-textarea>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm12>
                    <v-layout>
                      <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                        <label>Permanent Address:</label>

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

                    <v-layout>

                      <v-flex xs12 sm12>

                        <v-textarea
                          name="input-4-3"
                          v-model="editedItem.permanentAddress"
                          placeholder="fill Your Permanent Address"
                          required
                        ></v-textarea>

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

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

                  <v-flex xs12 sm10 offset-sm1>

                    <v-layout>
                      <v-flex xs6>
                        <v-btn round dark @click.native="close">Cancel</v-btn>
                      </v-flex>
                      <v-flex xs6>
                        <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>

              </v-card-text>
            </v-card>

          </v-dialog>

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

          <v-dialog v-model="dialog1" max-width="600px" scrollable>
            <v-card>
              <v-toolbar color="grey lighten-2" flat>

                <v-spacer></v-spacer>
                <v-toolbar-title>
                  <h3>Teacher Profile</h3>
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-icon @click="close1">close</v-icon>
              </v-toolbar>

              <v-card-text style="height: 700px;">

                <v-container grid-list-md>
                  <v-layout wrap>
                    <v-flex>

                      <v-flex align-center justify-center layout text-xs-center>
                        <v-avatar size="160px">
                          <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                          <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                        </v-avatar>

                      </v-flex>

                      <v-layout>
                        <v-flex xs5 sm6>

                          <h5 class="right my-1">
                            <b>Full Name:</b>
                          </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">
                            <b>Email:</b>
                          </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">
                            <b>City:</b>
                          </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">
                            <b>State:</b>
                          </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">
                            <b>Country:</b>
                          </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">
                            <b>Pincode:</b>
                          </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">
                            <b>Mobile No:</b>
                          </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">
                            <b>Join Date:</b>
                          </h5>

                        </v-flex>
                        <v-flex sm6 xs8>

                          <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>

                        </v-flex>
                      </v-layout>
                      <v-layout>
                        <v-flex xs5 sm6>

                          <h5 class="right my-1">
                            <b>D.O.B :</b>
                          </h5>

                        </v-flex>
                        <v-flex sm6 xs8>

                          <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>

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

                        <v-flex xs6 sm6>

                          <h5 class="right my-1">
                            <b>Permanent Address:</b>
                          </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">
                            <b>present Address:</b>
                          </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 + 1}}</td>

              <td id="td" class="text-xs-center">

                <v-avatar>
                  <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                  <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                </v-avatar>
              </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">{{ dates(props.item.dob) }}</td>
              <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>

              <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>

              <td id="td">
                <v-switch
                  class="pl-3"
                  v-model="props.item.status"
                  @change="suspendStatus(props.item.status,props.item._id)"
                ></v-switch>
              </td>

              <td class="text-xs-center">
                <span>

                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:25px; height:18px; "
                      class="mr5"
                      @click="profile(props.item)"
                      src="/static/icon/eye1.png"
                    />
                    <span>View</span>
                  </v-tooltip>
                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:20px; height:18px; "
                      class="mr5"
                      @click="editItem(props.item)"
                      src="/static/icon/edit1.png"
                    />
                    <span>Edit</span>
                  </v-tooltip>
                  <v-tooltip top>
                    <img
                      slot="activator"
                      style="cursor:pointer; width:20px; height:20px; "
                      class="mr5"
                      @click="deleteItem(props.item)"
                      src="/static/icon/delete1.png"
                    />
                    <span>Delete</span>
                  </v-tooltip>

                </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 fluid>

            <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"

                      >
                        <v-avatar size="100px">

                          <img src="/static/icon/user.png" v-if="!imageUrl" />

                        </v-avatar>

                        <img

                          :src="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 hidden-sm-only hidden-xs-only">Full Name:</label>
                            <label
                              class="right hidden-lg-only hidden-xl-only hidden-md-only"
                            >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"

                              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 sm4 class="pt-4 subheading">
                            <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                            <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</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 hidden-xs-only hidden-sm-only">Mobile No:</label>
                            <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>

                          </v-flex>
                          <v-flex xs8 class="ml-3">
                            <v-text-field
                              v-model="addTeachers.mobileNo"

                              placeholder="fill your Mobile No."

                              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 hidden-xs-only hidden-sm-only">Select Country:</label>
                            <label class="right hidden-lg-only hidden-md-only hidden-xl-only">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 hidden-xs-only hidden-sm-only">Uplaod Image:</label>

                            <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>

                          </v-flex>
                          <v-flex xs8 class="ml-3">
                            <v-text-field
                              label="Select Image"
                              @click="pickFile"
                              v-model="imageName"

                              append-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 class="hidden-xs-only hidden-sm-only">

                      <v-flex xs12 sm6>

                        <v-layout>

                          <v-flex xs4 md4 class="pt-4 subheading">
                            <label class="right">Present Address:</label>

                          </v-flex>

                          <v-flex xs8 md8 class="ml-3">

                            <v-text-field
                              name="input-4-3"
                              v-model="addTeachers.presentAddress"
                              :rules="presentAddress"
                              placeholder="fill Your present Address"

                              @keyup="copyData"

                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>

                      <v-flex xs12 sm6>

                        <v-layout>

                          <v-flex xs4 md4 class="pt-4 subheading addressForm">
                            <label class="right">Permanent Address:</label>

                          </v-flex>

                          <v-flex xs12 md8 class="ml-3">

                            <v-switch
                              v-model="addTeachers.permanentAddress"
                              label="Select Permanent Address"
                              :value="addTeachers.presentAddress"
                            ></v-switch>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                    <v-layout class="hidden-xs-only hidden-sm-only">
                      <v-flex xs12 sm6>
                        <v-layout>
                          <v-flex xs4 md4 class="pt-4 subheading addressForm">
                            <label class="right">Permanent Address:</label>
                          </v-flex>
                          <v-flex xs12 md8 class="ml-3">

                            <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 class="hidden-lg-only hidden-md-only hidden-xl-only">
                      <v-flex xs12 sm12>
                        <v-layout>

                          <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">

                            <label class>Present Addres:</label>

                          </v-flex>
                        </v-layout>
                        <v-layout>
                          <v-flex xs12 sm12>
                            <v-textarea
                              name="input-4-3"
                              v-model="addTeachers.presentAddress"
                              :rules="presentAddress"
                              placeholder="fill Your present Address"
                              required
                            ></v-textarea>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12 sm12>
                        <v-layout>

                          <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">

                            <label>Permanent Address:</label>

                          </v-flex>
                        </v-layout>
                        <v-layout>
                          <v-flex xs12 sm12>
                            <v-textarea
                              name="input-4-3"
                              v-model="addTeachers.permanentAddress"
                              :rules="permanentAddress"
                              placeholder="fill Your Permanent Address"
                              required
                            ></v-textarea>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                    <v-layout class="mx-2">

                      <v-flex xs12 sm11 offset-sm1>

                        <v-layout>

                          <v-flex xs6 class>

                            <v-btn @click="clear" round dark>clear</v-btn>
                          </v-flex>
                          <v-flex xs6>
                            <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
                          </v-flex>
                        </v-layout>

                      </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 moment from "moment";

  import countryList from "@/script/country.js";

  export default {

    data: () => ({

      component: "report-generate",
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",

      showLoader: false,

      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: "",

      switch1: true,

      countries: [],

      headers: [
        {

          text: "No",
          align: "center",

          sortable: false,

          value: "No"

        },

        {
          text: "Profile Pic",
          value: "profilePicUrl",
          sortable: false,
          align: "center"
        },

        { 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: "Status",
          value: "status",
          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: ""

      },
      status: ""

    }),

    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.imageUrl);

          });
        } else {
          this.imageName = "";
          this.imageFile = "";
          this.imageUrl = "";
        }
      },

      dates: function(date) {
        return moment(date).format("MMMM DD, YYYY");
      },

      getTeacherList() {

        this.showLoader = true;

        var token = this.$store.state.token;

        http()
          .get("/getTeachersList", {
            headers: { Authorization: "Bearer " + token }
          })

          .then(response => {

            this.desserts = response.data.data;

            this.showLoader = false;

            // console.log("getTeacherList=====>",this.desserts)

          })

          .catch(error => {

            this.showLoader = false;

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

          });

      },

      editItem(item) {

        this.editedIndex = this.desserts.indexOf(item);
        this.editedItem = Object.assign({}, item);

        this.editedItem.dob =
          this.editedItem.dob != undefined
            ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
            : (this.editedItem.dob = "");
        this.editedItem.joinDate =
          this.editedItem.joinDate != undefined
            ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
                0,
                10
              ))
            : (this.editedItem.joinDate = "");

        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 Teacher";

            }

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

      copyData() {
        this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
      },

      submit() {

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

          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

          };

          if (this.imageUrl) {
            var str = this.imageUrl;
            const [baseUrl, imageUrl] = str.split(/,/);
            addTeacher.upload = imageUrl;
          }

          this.loading = true;

          http()

            .post("/createTeacher", addTeacher)

            .then(response => {

              this.imageUrl = "";

              this.getTeacherList();

              this.snackbar = true;
              this.text = "New Teacher 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;

            });

        }
      },

      clear() {

        this.$refs.form.reset();

        this.imageUrl = "";

      },

      save() {

        this.loading = true;

        let editTeacher = {

          teacherId: this.editedItem._id,

          name: this.editedItem.name,

          email: this.editedItem.email,

          role: this.editedItem.role,

          dob: this.editedItem.dob,

          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

        };

        if (this.imageUrl) {

          var str = this.imageUrl;
          const [baseUrl, imageUrl] = str.split(/,/);
          editTeacher.upload = imageUrl;

        }

        http()

          .put("/suspendAccount", editTeacher)

          .then(response => {

            console.log("editTeacher", editTeacher);

            this.snackbar = true;
            this.text = "Successfully Edit Existing Teacher";

            this.loading = false;

            this.getTeacherList();

            this.close();

          })
          .catch(error => {

            console.log(error);

            this.loading = false;

          });

      },
      suspendStatus(suspendStatus, id) {
        if (suspendStatus == true) {
          this.status = "ON";
        } else if (suspendStatus == false) {
          this.status = "OFF";
        }
        let suspendStatusData = {
          teacherId: id,
          status: suspendStatus
        };
        http()
          .put("/suspendAccount", suspendStatusData)
          .then(response => {
            this.getTeacherList();
            this.text = response.data.message;
            this.snackbar = true;
          })
          .catch(error => {
            // console.log(error.response.data.data);
            this.text = error.response.data.message;
          });

      }

    },

    mounted() {

      const getCountryList = countryList();
      this.countries = getCountryList;

      this.getTeacherList();

    },

    created() {
      this.$root.$on("app:search", search => {
        this.search = search;
      });
    },
    beforeDestroy() {
      // dont forget to remove the listener
      this.$root.$off("app:search");

    }

  };

  </script>

  <style scoped>

  .active {

    background-color: gray;

    color: white !important;

  }

  .activebtn {
    color: black !important;
  }

  </style>