<template>
  <div>
    <v-tabs grow slider-color="gray">
      <v-tab
        ripple
        @click="activeTab('existing')"
        v-bind:class="{ active: isActive }"
        id="tab"
        class="subheading"
      >Existing Students</v-tab>
      <v-tab
        ripple
        @click="activeTab('new')"
        v-bind:class="{ active: newActive }"
        id="tab1"
        User
        class="subheading"
      >Add New Students</v-tab>

      <!-- ****** EDITS  STUDENTS 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="170 0px" scrollable>
          <v-card flat>
            <v-toolbar color="grey lighten-2" flat>
              <v-spacer></v-spacer>
              <v-toolbar-title>
                <h3>Edit Student Profile</h3>
              </v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card-text style="height: 680px;">
              <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"
                    >
                      <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>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-select
                            :items="addclass"
                            label="Select Class"
                            v-model="editedItem.select"
                            item-text="classNum"
                            item-value="_id"
                            name="Select Class"
                            @change="getSections(editedItem.select)"
                            required
                          ></v-select>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-select
                            :items="addSection"
                            label="Select Section"
                            v-model="editedItem.selectSection"
                            item-text="name"
                            item-value="_id"
                            name="Select Section"
                            required
                          ></v-select>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 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 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-layout>
                  <v-layout>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</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-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 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="menu1"
                            :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 Dob"
                            ></v-text-field>
                            <v-date-picker
                              ref="picker"
                              v-model="editedItem.dob"
                              :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 sm4>
                      <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 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.bloodGroup"
                            placeholder="fill your BloodGroup"
                            name="state"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Gender:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-select
                            :items="gender"
                            v-model="editedItem.gender"
                            placeholder="Select Gender"
                            required
                          ></v-select>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Medical Notes:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.medicalNotes"
                            placeholder="fill your medicalNotes"
                            name="mobileNo"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Height:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.height"
                            placeholder="fill your Height"
                            name="state"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Weight:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.weight"
                            placeholder="fill your Weight"
                            name="pincode"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <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>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm4>
                      <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 sm4>
                      <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-flex xs12 sm4>
                      <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="editedItem.mobile"
                            placeholder="fill your MobileNo"
                            name="mobileNo"
                            type="number"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm4>
                      <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="editedItem.country"
                            :items="countries"
                            placeholder="Select Country Name"
                            required
                          ></v-autocomplete>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            :items="gender"
                            v-model="editedItem.rollNo"
                            placeholder="fill roll number"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                      <v-layout>
                        <v-flex xs4 sm4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
                          <label
                            class="right hidden-lg-only hidden-md-only hidden-xl-only"
                          >Permanent Address:</label>
                        </v-flex>
                        <v-flex xs12 sm8 class="ml-3">
                          <v-text-field
                            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-xs-only hidden-sm-only">
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
                          <label
                            class="right hidden-lg-only hidden-md-only hidden-xl-only"
                          >Present Address:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.presentAddress"
                            placeholder="Select Country Name"
                            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 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
                            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 addr:</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 sm12>
                      <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-container>
              </v-form>
            </v-card-text>
          </v-card>
        </v-dialog>

        <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->

        <v-dialog v-model="dialog1" max-width="1100px" scrollable>
          <v-card>
            <v-toolbar color="grey lighten-2" flat>
              <v-spacer></v-spacer>
              <v-toolbar-title>Student Profile</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-icon @click="close1">close</v-icon>
            </v-toolbar>
            <v-card-text style="height: 700px;">
              <v-flex align-center justify-center layout text-xs-center class="mt-3">
                <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-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <h5 class="right my-1">
                          <b>Full Name:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1 left">{{ editedItem.name }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <h5 class="right my-1">
                          <b>Email:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm8 xs6>
                        <h5 class="my-1 left">{{ editedItem.email }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>Gender:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>D.O.B:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>Blood Group:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <!-- <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>Allergies:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm8 xs6>
                        <h5 class="my-1">{{ editedItem.allergies }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>-->
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>Roll No. :</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs6>
                        <h5 class="my-1">{{ editedItem.rollNo }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>Height:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1 left">{{ editedItem.height }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>Weight:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm8 xs6>
                        <h5 class="my-1">{{ editedItem.weight }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>City:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1 left">{{ editedItem.city }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>State:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm8 xs6>
                        <h5 class="my-1">{{ editedItem.state }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>Pincode:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1">{{ editedItem.pincode }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm5>
                    <v-layout>
                      <v-flex xs6 sm5>
                        <b>
                          <h5 class="right my-1">
                            <b>Country:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm7 xs6>
                        <h5 class="my-1">{{ editedItem.country }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex sm5 xs6>
                        <b>
                          <h5 class="right my-1">
                            <b>Mobile No:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs6>
                        <h5 class="my-1">{{ editedItem.mobile }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm4>
                        <b>
                          <h5 class="right my-1">
                            <b>FahterName:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm8 xs6>
                        <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm5>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <b>
                          <h5 class="right my-1">
                            <b>MotherName:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs6>
                        <h5 class="my-1">{{ editedItem.motherName }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <b>
                          <h5 class="right my-1">
                            <b>FatherCellNo:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs6>
                        <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm5>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <b>
                          <h5 class="right my-1">
                            <b>MotherCellNo:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs6>
                        <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <b>
                          <h5 class="my-1 right">
                            <b>AcademicYear:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm5 xs6>
                        <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm5>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <b>
                          <h5 class="my-1 right">
                            <b>MedicalNotes:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm5 xs6>
                        <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm5 class="hidden-xs-only">
                    <v-layout wrap>
                      <v-flex sm6>
                        <b>
                          <h5 class="my-1 right">
                            <b>present Address:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm5>
                        <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex sm6 class="hidden-xs-only">
                    <v-layout wrap>
                      <v-flex sm6>
                        <b>
                          <h5 class="my-1 right">
                            <b>Permanent Address:</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6>
                        <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
                <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
                  <v-flex xs12 sm5>
                    <v-layout wrap>
                      <v-flex xs12 sm6>
                        <b>
                          <h5 class="my-1">
                            <b>present Address:-</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm5 xs12>
                        <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm6>
                    <v-layout wrap>
                      <v-flex xs12 sm6>
                        <b>
                          <h5 class="my-1">
                            <b>Permanent Address:-</b>
                          </h5>
                        </b>
                      </v-flex>
                      <v-flex sm6 xs12>
                        <h5 class="my-1">{{ editedItem.permanentAddress }}</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-USERS STUDENTS TABLE ****** -->
        <v-card flat>
          <v-card-actions class="hidden-xs-only hidden-sm-only">
            <v-layout>
              <label class="right mt-4 ml-5">Select Class:</label>
              <v-select
                :items="addclass"
                label="Select Class"
                v-model="selectStudents.select"
                item-text="classNum"
                item-value="_id"
                name="Select Class"
                :rules="classRules"
                @change="getSections(selectStudents.select)"
                class="px-4"
                required
              ></v-select>
              <label class="right mt-4">Select Section:</label>
              <v-select
                :items="addSection"
                label="Select Section"
                v-model="selectStudents.selectSection"
                item-text="name"
                item-value="_id"
                name="Select Section"
                :rules="sectionRules"
                class="pl-3"
                required
              ></v-select>
            </v-layout>
            <v-spacer></v-spacer>
            <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
          </v-card-actions>
          <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
            <v-layout>
              <v-flex xs4>
                <label class="right mt-4">Select Class:</label>
              </v-flex>
              <v-flex xs8>
                <v-select
                  :items="addclass"
                  label="Select Class"
                  v-model="selectStudents.select"
                  item-text="classNum"
                  item-value="_id"
                  name="Select Class"
                  :rules="classRules"
                  @change="getSections(selectStudents.select)"
                  class="px-2"
                  required
                ></v-select>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs4>
                <label class="right mt-4">Select Section:</label>
              </v-flex>
              <v-flex xs8>
                <v-select
                  :items="addSection"
                  label="Select Section"
                  v-model="selectStudents.selectSection"
                  item-text="name"
                  item-value="_id"
                  name="Select Section"
                  :rules="sectionRules"
                  class="px-2"
                  required
                ></v-select>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs5 class="mx-auto mb-2">
                <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-card>
        <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.item.rollNo}}</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">{{ props.item.gender }}</td>
            <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
            <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
            <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
            <td id="td" class="text-xs-center">{{ props.item.mobile}}</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 STUDENTS DETAILS****** -->
      <v-tab-item>
        <v-container fluid>
          <v-layout align-center justify-center fill-height>
            <v-flex xs12 sm12 md10 lg11>
              <div>
                <v-app>
                  <v-stepper v-model="e2">
                    <v-stepper-header>
                      <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                      <v-divider></v-divider>
                      <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                    </v-stepper-header>
                    <v-stepper-items>
                      <v-stepper-content step="1">
                        <v-container fluid class>
                          <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="hidden-md-only hidden-lg-only hidden-xl-only">
                            <v-form ref="parentForm" v-model="valid" lazy-validation>
                              <v-layout wrap>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Father Cell No:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model.trim="parentData.fatherCellNo"
                                        placeholder="fill your father Cell Number"
                                        type="number"
                                        :rules="fatheCellNoRules"
                                        v-on:keyup="getParentDetails()"
                                        required
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Parent Email Id:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        placeholder="fill Parent email"
                                        v-model="parentData.email"
                                        type="text"
                                        required
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                              </v-layout>
                              <v-layout wrap>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Father Name:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model="parentData.fatherName"
                                        placeholder="Fill your father Name"
                                        required
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Mother Name:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model="parentData.motherName"
                                        placeholder="fill your Mother Name"
                                        name="state"
                                        type="text"
                                        required
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                              </v-layout>
                              <v-layout wrap>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Mother Cell No:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model="parentData.motherCellNo"
                                        placeholder="fill your  Mother Cell Number"
                                        name="state"
                                        type="number"
                                        required
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Father Profession:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model="parentData.fatherProfession"
                                        placeholder="fill your father profession"
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                              </v-layout>
                              <v-layout wrap>
                                <v-flex xs12 sm6>
                                  <v-layout wrap>
                                    <v-flex xs12 class="pt-4 subheading">
                                      <label>Mother Profession:</label>
                                    </v-flex>
                                    <v-flex xs12>
                                      <v-text-field
                                        v-model="parentData.motherProfession"
                                        placeholder="fill your mother profession"
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                              </v-layout>
                              <v-flex sm12 class="hidden-xs-only">
                                <v-card-actions>
                                  <v-spacer></v-spacer>
                                  <v-btn
                                    @click="submitParentDetails"
                                    round
                                    dark
                                    :loading="loading"
                                    v-show="showParent"
                                  >Add</v-btn>
                                  <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                                </v-card-actions>
                              </v-flex>
                              <v-flex
                                xs6
                                class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                              >
                                <v-btn
                                  @click="submitParentDetails"
                                  round
                                  dark
                                  :loading="loading"
                                  v-show="showParent"
                                >Add</v-btn>
                                <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                              </v-flex>
                            </v-form>
                          </v-flex>
                          <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
                            <v-form ref="parentForm" v-model="valid" lazy-validation>
                              <v-layout wrap>
                                <v-flex xs12 sm6>
                                  <v-layout>
                                    <v-flex xs4 class="pt-4 subheading">
                                      <label class="right">Father Cell No:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model.trim="parentData.fatherCellNo"
                                        placeholder="fill your father Cell Number"
                                        type="number"
                                        :rules="fatheCellNoRules"
                                        v-on:keyup="getParentDetails()"
                                        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">Parent Email Id:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        placeholder="fill Parent email"
                                        v-model="parentData.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 class="pt-4 subheading">
                                      <label class="right">Father Name:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model="parentData.fatherName"
                                        placeholder="Fill your father Name"
                                        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">Mother Name:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model="parentData.motherName"
                                        placeholder="fill your Mother Name"
                                        name="state"
                                        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">Mother Cell No:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model="parentData.motherCellNo"
                                        placeholder="fill your  Mother Cell Number"
                                        name="state"
                                        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">Father Profession:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model="parentData.fatherProfession"
                                        placeholder="fill your father profession"
                                      ></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">Mother Profession:</label>
                                    </v-flex>
                                    <v-flex xs8 class="ml-3">
                                      <v-text-field
                                        v-model="parentData.motherProfession"
                                        placeholder="fill your mother profession"
                                      ></v-text-field>
                                    </v-flex>
                                  </v-layout>
                                </v-flex>
                              </v-layout>
                              <v-flex sm12 class="hidden-xs-only">
                                <v-card-actions>
                                  <v-spacer></v-spacer>
                                  <v-btn
                                    @click="submitParentDetails"
                                    round
                                    dark
                                    :loading="loading"
                                    v-show="showParent"
                                  >Add</v-btn>
                                  <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                                </v-card-actions>
                              </v-flex>
                              <v-flex
                                xs6
                                class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                              >
                                <v-btn
                                  @click="submitParentDetails"
                                  round
                                  dark
                                  :loading="loading"
                                  v-show="showParent"
                                >Add</v-btn>
                                <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                              </v-flex>
                            </v-form>
                          </v-flex>
                        </v-container>
                      </v-stepper-content>
                      <v-stepper-content step="2">
                        <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>
                          <v-form ref="form" v-model="valid" lazy-validation>
                            <v-layout>
                              <v-flex
                                xs12
                                class="text-xs-center text-sm-center text-md-center text-lg-center"
                              >
                                <v-avatar size="100px">
                                  <img src="/static/icon/user.png" v-if="!imageUrl" />
                                </v-avatar>
                                <input
                                  type="file"
                                  style="display: none"
                                  ref="image"
                                  accept="image/*"
                                  @change="onFilePicked"
                                />
                                <img
                                  :src="imageData.imageUrl"
                                  height="150"
                                  v-if="imageUrl"
                                  style="border-radius:50%; width:200px"
                                />
                              </v-flex>
                            </v-layout>
                            <v-layout wrap>
                              <v-flex xs12 sm6>
                                <v-layout>
                                  <v-flex x4 sm4 class="pt-4 subheading">
                                    <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Class:</label>
                                  </v-flex>
                                  <v-flex xs8 sm8 class="ml-3">
                                    <v-select
                                      :items="addclass"
                                      label="Select Class"
                                      v-model="addStudents.select"
                                      item-text="classNum"
                                      item-value="_id"
                                      name="Select Class"
                                      :rules="classRules"
                                      @change="getSection(addStudents.select)"
                                      required
                                    ></v-select>
                                  </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 Section:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Section:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-select
                                      :items="addSection"
                                      label="Select Section"
                                      v-model="addStudents.selectSection"
                                      item-text="name"
                                      item-value="_id"
                                      name="Select Section"
                                      :rules="sectionRules"
                                      required
                                    ></v-select>
                                  </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-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 sm8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.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 sm4 class="pt-4 subheading">
                                    <label class="right">Email ID:</label>
                                  </v-flex>
                                  <v-flex xs8 sm8 class="ml-3">
                                    <v-text-field
                                      placeholder="fill your email"
                                      v-model="addStudents.email"
                                      type="text"
                                      name="email"
                                      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 sm8 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="addStudents.date"
                                        placeholder="Select date"
                                      ></v-text-field>
                                      <v-date-picker
                                        ref="picker"
                                        v-model="addStudents.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="addStudents.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 wrap>
                              <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="addStudents.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="addStudents.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 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 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.mobile"
                                      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 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="addStudents.country"
                                      :rules="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">Gender:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-select
                                      :items="gender"
                                      v-model="addStudents.gender"
                                      :rules="genderRules"
                                      label="Select Gender"
                                      required
                                    ></v-select>
                                  </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">Blood Group:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Blood:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.bloodGroup"
                                      placeholder="Fill your Blood Group"
                                      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">Allergies:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.allergies"
                                      placeholder="Fill your Allergies"
                                      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">Roll Number:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Roll No:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.rollNo"
                                      placeholder="Fill your Roll 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"
                                    >Medical Notes:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Medical:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.medicalNotes"
                                      placeholder="Fill your Medical Notes"
                                      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">Height:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.height"
                                      placeholder="Fill your Height"
                                      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">Weight:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.weight"
                                      placeholder="Fill your Weight"
                                      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">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>
                                  </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"
                                    >Academic Year:</label>
                                    <label
                                      class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                    >Year:</label>
                                  </v-flex>
                                  <v-flex xs8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.establishmentYear"
                                      placeholder="fill your Academic Year"
                                      name="state"
                                      type="number"
                                      :rules="establishmentYearRules"
                                      required
                                    ></v-text-field>
                                  </v-flex>
                                </v-layout>
                              </v-flex>
                            </v-layout>
                            <v-layout wrap class="hidden-xs-only hidden-sm-only">
                              <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 sm8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.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 sm4 class="pt-4 subheading addressForm">
                                    <label class="right">Permanent Address:</label>
                                  </v-flex>
                                  <v-flex xs12 sm8 class="ml-3">
                                    <v-switch
                                      v-model="addStudents.permanentAddress"
                                      label="Select Permanent Address"
                                      :value="addStudents.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 sm4 class="pt-4 subheading addressForm">
                                    <label class="right">Permanent Address:</label>
                                  </v-flex>
                                  <v-flex xs12 sm8 class="ml-3">
                                    <v-text-field
                                      v-model="addStudents.permanentAddress"
                                      :rules="permanentAddress"
                                      placeholder="fill Your Permanent Address"
                                    ></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 sm12 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="addStudents.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="addStudents.permanentAddress"
                                      :rules="permanentAddress"
                                      placeholder="fill Your Permanent Address"
                                      required
                                    ></v-textarea>
                                  </v-flex>
                                </v-layout>
                              </v-flex>
                            </v-layout>
                            <v-layout>
                              <v-flex xs12 sm11 offset-sm1>
                                <v-layout>
                                  <v-flex xs6>
                                    <v-btn round dark @click="e2 = 1">Back</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-form>
                        </v-flex>
                      </v-stepper-content>
                    </v-stepper-items>
                  </v-stepper>
                </v-app>
              </div>
            </v-flex>
          </v-layout>
        </v-container>
      </v-tab-item>
    </v-tabs>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </div>
</template>

<script>
import http from "@/Services/http.js";
import moment from "moment";
import countryList from "@/script/country.js";
import parent from "@/script/parents.js";

export default {
  data: () => ({
    e2: 0,
    showParent: true,
    showNext: false,
    snackbar: false,
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    showLoader: false,
    loading: false,
    date: null,
    search: "",
    menu: false,
    menu1: false,
    dialog: false,
    dialog1: false,
    valid: true,
    isActive: true,
    newActive: false,
    addclass: [],
    addSection: [],
    gender: ["Male", "Female"],
    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"],
    stateRules: [v => !!v || "State Name is required"],
    classRules: [v => !!v || " Class Name is required"],
    sectionRules: [v => !!v || " Section Name is required"],
    genderRules: [v => !!v || " Select Gender is required"],
    fatheCellNoRules: [v => !!v || " father Cell Number  is required"],
    establishmentYearRules: [v => !!v || " Academic Year  is required"],
    errorMessages: "",
    countries: [],
    headers: [
      {
        text: "Roll No.",
        align: "center",
        sortable: false,
        value: "rollNo"
      },
      {
        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: "Gender", value: "gender", sortable: false, align: "center" },
      {
        text: "Father Name",
        value: "fatherName",
        sortable: false,
        align: "center"
      },
      {
        text: "Mother Name",
        value: "motherName",
        sortable: false,
        align: "center"
      },
      {
        text: "Academic Year",
        value: "establishmentYear",
        sortable: false,
        align: "center"
      },
      { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
      { text: "Action", value: "", sortable: false, align: "center" }
    ],
    desserts: [],
    parentId: "",
    editedIndex: -1,
    parentData: {},
    addStudents: {
      role: "STUDENT",
      name: "",
      email: "",
      date: "",
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobile: "",
      state: "",
      gender: "",
      select: "",
      selectSection: "",
      bloodGroup: "",
      allergies: "",
      medicalNotes: "",
      height: "",
      weight: "",
      rollNo: "",
      establishmentYear: new Date().getFullYear()
    },
    selectStudents: {
      select: "",
      selectSection: ""
    },
    editedItem: {
      role: "STUDENT",
      name: "",
      email: "",
      dob: "",
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobile: "",
      state: "",
      gender: "",
      select: "",
      selectSection: "",
      bloodGroup: "",
      allergies: "",
      medicalNotes: "",
      height: "",
      weight: "",
      rollNo: "",
      establishmentYear: new Date().getFullYear()
    }
  }),
  watch: {
    menu(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    },
    menu1(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    }
  },
  methods: {
    findStudents() {
      this.showLoader = true;
      http()
        .get("/getStudentWithClass", {
          params: {
            classId: this.selectStudents.select,
            sectionId: this.selectStudents.selectSection
          }
        })
        .then(response => {
          this.desserts = response.data.data;
          this.showLoader = false;
        })
        .catch(err => {
          console.log("err====>", err);
          this.showLoader = false;
        });
    },
    getSections(_id) {
      var token = this.$store.state.token;
      this.showLoader = true;
      http()
        .get(
          "/getSectionsList",
          { params: { classId: _id } },
          {
            headers: { Authorization: "Bearer " + token }
          }
        )
        .then(response => {
          this.addSection = response.data.data;
          this.showLoader = false;
        })
        .catch(err => {
          this.showLoader = false;
          // console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    },
    getSection(_id) {
      var token = this.$store.state.token;
      this.showLoader = true;
      http()
        .get(
          "/getSectionsList",
          { params: { classId: _id } },
          {
            headers: { Authorization: "Bearer " + token }
          }
        )
        .then(response => {
          this.addSection = response.data.data;
          this.showLoader = false;
          // console.log("getSectionsList=====>", this.addSection);
        })
        .catch(err => {
          this.showLoader = false;
          // console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    },
    pickFile() {
      this.$refs.image.click();
    },
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
    },
    onFilePicked(e) {
      // console.log(e)
      const files = e.target.files;
      this.imageData.upload = e.target.files[0];
      if (files[0] !== undefined) {
        this.imageName = files[0].name;
        if (this.imageName.lastIndexOf(".") <= 0) {
          return;
        }
        const fr = new FileReader();
        fr.readAsDataURL(files[0]);
        fr.addEventListener("load", () => {
          this.imageUrl = fr.result;
          this.imageFile = files[0]; // this is an image file that can be sent to server...
          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
        });
      } else {
        this.imageName = "";
        this.imageFile = "";
        this.imageUrl = "";
      }
    },
    // getStudentList() {
    //   this.showLoader = true;
    //   var token = this.$store.state.token;
    //   http()
    //     .get("/getStudentsList", {
    //       headers: { Authorization: "Bearer " + token }
    //     })
    //     .then(response => {
    //       this.desserts = response.data.data;
    //       this.showLoader = false;
    //       // console.log("getStudentList=====>",this.desserts)
    //     })
    //     .catch(err => {
    //       // console.log("err====>", err);
    //       this.showLoader = false;
    //       this.$router.replace({ path: "/" });
    //     });
    // },
    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.editedItem.fatherName = item.parentId.fatherName;
      this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
      this.editedItem.motherName = item.parentId.motherName;
      this.editedItem.motherCellNo = item.parentId.motherCellNo;
      this.editedItem.dob =
        this.editedItem.dob != undefined
          ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
          : (this.editedItem.dob = "");
      this.dialog = true;
    },
    profile(item) {
      // console.log("item", item);
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.editedItem.fatherName = item.parentId.fatherName;
      this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
      this.editedItem.motherName = item.parentId.motherName;
      this.editedItem.motherCellNo = item.parentId.motherCellNo;

      this.dialog1 = true;
    },
    deleteItem(item) {
      let deleteStudent = {
        studentId: item._id
      };
      http()
        .delete(
          "/deleteStudent",
          confirm("Are you sure you want to delete this?") && {
            params: deleteStudent
          }
        )
        .then(response => {
          // console.log("deleteUers",deleteStudent)
          this.snackbar = true;
          this.text = "Successfully delete Existing Student";
          this.getStudentList();
        })
        .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.addStudents.permanentAddress = this.addStudents.presentAddress;
    },
    submit() {
      if (this.$refs.form.validate()) {
        let addStudent = {
          parentId: this.parentId,
          name: this.addStudents.name,
          email: this.addStudents.email,
          role: this.addStudents.role,
          dob: this.addStudents.date,
          city: this.addStudents.city,
          pincode: this.addStudents.pincode,
          country: this.addStudents.country,
          permanentAddress: this.addStudents.permanentAddress,
          presentAddress: this.addStudents.presentAddress,
          mobile: this.addStudents.mobile,
          state: this.addStudents.state,
          gender: this.addStudents.gender,
          establishmentYear: this.addStudents.establishmentYear,
          classId: this.addStudents.select,
          sectionId: this.addStudents.selectSection,
          bloodGroup: this.addStudents.bloodGroup,
          medicalNotes: this.addStudents.medicalNotes,
          height: this.addStudents.height,
          weight: this.addStudents.weight,
          rollNo: this.addStudents.rollNo
        };
        if (this.imageUrl) {
          var str = this.imageUrl;
          const [baseUrl, imageUrl] = str.split(/,/);
          addStudent.upload = imageUrl;
        }
        this.loading = true;
        http()
          .post("/createStudent", addStudent)
          .then(response => {
            // console.log(addStudent);
            this.snackbar = true;
            this.text = "New Student added successfully";
            // this.getStudentList();
            this.clear();
            this.loading = false;
          })
          .catch(error => {
            // console.log(error);
            this.snackbar = true;
            this.text = error.response.data.message;
            this.loading = false;
          });
      }
    },
    clear() {
      this.$refs.form.reset();
      this.imageUrl = "";
    },
    save() {
      let editStudent = {
        studentId: 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,
        mobile: this.editedItem.mobile,
        state: this.editedItem.state,
        gender: this.editedItem.gender,
        establishmentYear: this.editedItem.establishmentYear,
        classId: this.editedItem.select,
        sectionId: this.editedItem.selectSection,
        bloodGroup: this.editedItem.bloodGroup,
        medicalNotes: this.editedItem.medicalNotes,
        height: this.editedItem.height,
        weight: this.editedItem.weight,
        rollNo: this.editedItem.rollNo
      };
      if (this.imageUrl) {
        var str = this.imageUrl;
        const [baseUrl, imageUrl] = str.split(/,/);
        editStudent.upload = imageUrl;
      }
      http()
        .put("/updateStudent", editStudent)
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
          this.imageUrl = "";
          this.findStudents();
          this.close();
        })
        .catch(error => {
          // console.log(error);
          this.snackbar = true;
          this.text = error.response.data.statusText;
        });
    },
    submitParentDetails() {
      if (this.$refs.parentForm.validate()) {
        let addparentDetails = {
          email: this.parentData.email,
          fatherName: this.parentData.fatherName,
          fatherCellNo: this.parentData.fatherCellNo,
          motherName: this.parentData.motherName,
          motherCellNo: this.parentData.motherCellNo,
          role: "PARENT"
        };
        this.loading = true;
        http()
          .post("/createParent", addparentDetails)
          .then(response => {
            this.parentId = response.data.data.id;
            this.e2 = 2;
            this.snackbar = true;
            this.text = "successfully";
            // this.getStudentList();
            this.clear();
            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.text = error.response.data.statusText;
            this.loading = false;
          });
      }
    },
    getParentDetails() {
      if (this.parentData.fatherCellNo.length > 9) {
        this.showLoader = true;
        http()
          .get("getParticularParent", {
            params: { fatherCellNo: this.parentData.fatherCellNo },
            headers: {
              Authorization: "Bearer " + this.$store.state.token
            }
          })
          .then(response => {
            this.showNext = true;
            this.showParent = false;
            this.parentData = response.data.data;
            this.parentId = response.data.data._id;
            this.showLoader = false;
          })
          .catch(error => {
            console.log("err====>", error.response.data.message);
            this.text = error.response.data.message;
            this.snackbar = true;
            this.showLoader = false;
          });
      }
    }
  },
  mounted() {
    const getCountryList = countryList();
    this.countries = getCountryList;
    var token = this.$store.state.token;
    http()
      .get("/getClassesList", {
        headers: { Authorization: "Bearer " + token }
      })
      .then(response => {
        this.addclass = response.data.data;
      })
      .catch(error => {
        this.showLoader = false;
        if (error.response.status === 401) {
          this.$router.replace({ path: "/" });
          this.$store.dispatch("setToken", null);
          this.$store.dispatch("Id", null);
          this.$store.dispatch("Role", null);
        }
      });
  },
  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>