<template>
  <v-app id="pages-dasboard">
    <v-toolbar class="fixcolors" fixed app>
      <v-toolbar-title class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
      </v-toolbar-title>
      <!-- ****** SEARCH ALL EXISTING StudentS ****** -->
      <v-flex xs7 sm3 class="userSearch">
        <v-text-field
          flat
          append-icon="search"
          label="Find your Students"
          v-model="search"
          color="white"
          dark
        ></v-text-field>
      </v-flex>
      <v-spacer></v-spacer>
      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">
          <v-avatar size="40px">
            <img src="/static/icon/user.png">
          </v-avatar>
        </v-btn>
        <v-list class="pa-0">
          <v-list-tile
            v-for="(item,index) in items"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
            @click="item.click"
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="index"
          >
            <v-list-tile-action v-if="item.icon">
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <v-tabs grow slider-color="black">
      <v-tab
        ripple
        @click="activeTab('existing')"
        v-bind:class="{ active: isActive }"
        id="tab"
        class="subheading"
      >Existing 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="1300px" 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: 800px;">
              <v-form ref="form">
                <v-container fluid>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
                    >
                      <v-avatar size="160px">
                       <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl">
                        <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">Select 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">Select 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">Full Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.name"
                            placeholder="fill your full Name"
                            name="name"
                            type="text"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Email ID:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            placeholder="fill your email"
                            v-model="editedItem.email"
                            type="text"
                            name="email"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Date of Birth:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-menu
                            ref="menu"
                            :close-on-content-click="false"
                            v-model="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">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">Mobile No:</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">Select Country:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-autocomplete
                            v-model="editedItem.country"
                            :items="countries"
                            placeholder="Select Country Name"
                            required
                          ></v-autocomplete>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-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">Father Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.fatherName"
                            :items="countries"
                            placeholder="Fill your father Name"
                            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">Father Cell No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.fatherCellNo"
                            placeholder="fill your father Cell Number"
                            name="state"
                            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">Mother Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.motherName"
                            placeholder="fill your Mother 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">Mother Cell No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.motherCellNo"
                            placeholder="fill your  Mother Cell Number"
                            name="state"
                            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">Academic Year:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="editedItem.establishmentYear"
                            placeholder="fill your Mother Name"
                            name="state"
                            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">Uplaod Image:</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 sm4>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Present Address:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-2">
                          <v-text-field
                            v-model="editedItem.presentAddress"
                            placeholder="fill Your present Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                      <v-flex xs12>
                      <v-layout>
                        <v-flex xs1 class="pt-4 subheading" style="flex-basis: 13.333333% !important; max-width: 13.333333% !important;">
                          <label class="right">Permanent Address:</label>
                        </v-flex>
                        <v-flex xs11 class="ml-2">
                          <v-textarea
                            rows="1"
                            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-card-actions>
                      <v-btn round dark @click.native="close">Cancel</v-btn>
                      <v-spacer></v-spacer>
                      <v-btn round dark @click="save">Save</v-btn>
                     </v-card-actions>
                    </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card-text>
            </v-card>
        </v-dialog>

        <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
        <v-dialog v-model="dialog1" max-width="600px" scrollable>
          <v-card>
             <v-toolbar color="grey lighten-2" flat>
              <v-spacer></v-spacer>
              <v-toolbar-title>Student Profile</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-icon @click="close1">close</v-icon>
            </v-toolbar>
            <v-card-text style="height: 760px;">
              <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>  
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Full Name:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.name }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Email:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.email }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs6 sm6>
                        <h5 class="right my-1">Gender:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.gender }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">City:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.city }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">State:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.state }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Country:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.country }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Pincode:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.pincode }}</h5>
                      </v-flex>
                    </v-layout>
                     <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Mobile No:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.mobile }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Academic Year:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Fahter Name:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Mother Name:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.motherName }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Father Cell No:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Mother Cell No:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs5 sm6>
                        <h5 class="right my-1">Date Of Birth:</h5>
                      </v-flex>
                      <v-flex sm6 xs8>
                        <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                     <v-flex xs6 sm6 >
                     <h5 class="right my-1">Permanent Address:</h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                    <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                  </v-flex>
                    </v-layout>
                    <v-layout>
                     <v-flex xs6 sm6 >
                     <h5 class="right my-1">present Address:</h5>
                    </v-flex>
                    <v-flex sm6 xs8>
                    <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                  </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
          </v-card>
        </v-dialog>

        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          color="success"
        >{{ text }}</v-snackbar>

       <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
         <v-card flat>
          <v-card-actions>
           <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-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.index}}</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.fatherName }}</td>
            <td id="td" class="text-xs-center">{{ props.item.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>
                <img
                  style="cursor:pointer; width:25px; height:18px; "
                  class="mr-5"
                  @click="profile(props.item)"
                  src="/static/icon/eye1.png"
                >
                <img
                  style="cursor:pointer; width:20px; height:18px; "
                  class="mr-5"
                  @click="editItem(props.item)"
                  src="/static/icon/edit1.png"
                >
                <img
                  style="cursor:pointer; height:20px; "
                  class="mr-5"
                  @click="deleteItem(props.item)"
                  src="/static/icon/delete1.png"
                >
              </span>
            </td>
          </template>
          <v-alert
            slot="no-results"
            :value="true"
            color="error"
            icon="warning"
          >Your search for "{{ search }}" found no results.</v-alert>
        </v-data-table>
      </v-tab-item>

      <!-- ****** ADD MULTIPLE STUDENTS ****** -->
      
      <v-tab-item>
        <v-container>
          <v-snackbar
            :timeout="timeout"
            :top="y === 'top'"
            :right="x === 'right'"
            :vertical="mode === 'vertical'"
            v-model="snackbar"
            color="success"
          >{{ text }}</v-snackbar>
          <v-flex xs12 sm12 class="my-4">
            <v-card flat>
              <v-form ref="form" v-model="valid" lazy-validation>
                <v-container fluid>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
                    >
                      <v-avatar size="100px">
                        <img src="/static/icon/user.png" v-if="!imageUrl">
                      </v-avatar>
                      <input
                        type="file"
                        style="display: none"
                        ref="image"
                        accept="image/*"
                        @change="onFilePicked"
                      >
                      <img
                        :src="imageData.imageUrl"
                        height="150"
                        v-if="imageUrl"
                        style="border-radius:50%; width:200px"
                      >
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Select Class:</label>
                        </v-flex>
                        <v-flex xs8 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">Select 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>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Full Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="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 class="pt-4 subheading">
                          <label class="right">Email ID:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            placeholder="fill your email"
                            :rules="emailRules"
                            v-model="addStudents.email"
                            type="text"
                            name="email"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Date of Birth:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-menu
                            ref="menu"
                            :close-on-content-click="false"
                            v-model="menu"
                            :nudge-right="40"
                            lazy
                            transition="scale-transition"
                            offset-y
                            full-width
                            min-width="290px"
                          >
                            <v-text-field
                              slot="activator"
                              :rules="dateRules"
                              v-model="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>
                    <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>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Mobile No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addStudents.mobile"
                            placeholder="fill your MobileNo"
                            name="mobileNo"
                            type="number"
                            :rules="mobileNoRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Select Country:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-autocomplete
                            v-model="addStudents.country"
                            :rules="country"
                            :items="countries"
                            placeholder="Select Country Name"
                            required
                          ></v-autocomplete>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">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">Father Name:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addStudents.fatherName"
                            :rules="fatherNameRules"
                            :items="countries"
                            placeholder="Fill your father Name"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Father Cell No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addStudents.fatherCellNo"
                            placeholder="fill your father Cell Number"
                            name="state"
                            type="number"
                            :rules="fatheCellNoRules"
                            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="addStudents.motherName"
                            placeholder="fill your Mother Name"
                            name="state"
                            type="text"
                            :rules="motherNameRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Mother Cell No:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addStudents.motherCellNo"
                            placeholder="fill your  Mother Cell Number"
                            name="state"
                            type="number"
                            :rules="motherCellNoRules"
                            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">Academic Year:</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            v-model="addStudents.establishmentYear"
                            placeholder="fill your Mother Name"
                            name="state"
                            type="number"
                            :rules="establishmentYearRules"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm6>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Uplaod Image:</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 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
                          <label class>Present Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="addStudents.presentAddress"
                            :rules="presentAddress"
                            placeholder="fill Your present Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
                          <label>Permanent Address:</label>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field
                            name="input-4-3"
                            v-model="addStudents.permanentAddress"
                            :rules="permanentAddress"
                            placeholder="fill Your Permanent Address"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <v-card-actions>
                        <v-btn @click="clear" round dark>clear</v-btn>
                        <v-spacer></v-spacer>
                        <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-form>
            </v-card>
          </v-flex>
        </v-container>
      </v-tab-item>
    </v-tabs>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-app>
</template>

<script>
import http from "@/Services/http.js";
import Util from "@/util";
import moment from "moment";

export default {
  data: () => ({
    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"],
    AddUsercredentials: {},
    pagination: {
      rowsPerPage: 15
    },
    imageData: {},
    imageName: "",
    imageUrl: "",
    imageFile: "",
    nameRules: [v => !!v || " Full Name is required"],
    dateRules: [v => !!v || " DOB is required"],
    cityRules: [v => !!v || " City Name is required"],
    pincode: [v => !!v || " Pincode is required"],
    country: [v => !!v || " Country Name is required"],
    permanentAddress: [v => !!v || " Permanent Address is required"],
    presentAddress: [v => !!v || " Present Address  is required"],
    mobileNoRules: [v => !!v || "Mobile Number is required"],
    stateRules: [v => !!v || "State Name is required"],
    classRules: [v => !!v || " Class Name is required"],
    sectionRules:[v => !!v || " Section Name is required"],
    genderRules: [v => !!v || " Select Gender is required"],
    fatherNameRules: [v => !!v || " Father Name is required"],
    fatheCellNoRules: [v => !!v || " father Cell Number  is required"],
    motherNameRules: [v => !!v || " Mother Name  is required"],
    motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
    establishmentYearRules: [v => !!v || " Academic Year  is required"],
    errorMessages: "",
    emailRules: [
      v => !!v || "E-mail is required",
      v =>
        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
        "E-mail must be valid"
    ],
    countries: [
      "Afghanistan",
      "Albania",
      "Algeria",
      "Andorra",
      "Angola",
      "Anguilla",
      "Antigua &amp; Barbuda",
      "Argentina",
      "Armenia",
      "Aruba",
      "Australia",
      "Austria",
      "Azerbaijan",
      "Bahamas",
      "Bahrain",
      "Bangladesh",
      "Barbados",
      "Belarus",
      "Belgium",
      "Belize",
      "Benin",
      "Bermuda",
      "Bhutan",
      "Bolivia",
      "Bosnia &amp; Herzegovina",
      "Botswana",
      "Brazil",
      "British Virgin Islands",
      "Brunei",
      "Bulgaria",
      "Burkina Faso",
      "Burundi",
      "Cambodia",
      "Cameroon",
      "Cape Verde",
      "Cayman Islands",
      "Chad",
      "Chile",
      "China",
      "Colombia",
      "Congo",
      "Cook Islands",
      "Costa Rica",
      "Cote D Ivoire",
      "Croatia",
      "Cruise Ship",
      "Cuba",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Djibouti",
      "Dominica",
      "Dominican Republic",
      "Ecuador",
      "Egypt",
      "El Salvador",
      "Equatorial Guinea",
      "Estonia",
      "Ethiopia",
      "Falkland Islands",
      "Faroe Islands",
      "Fiji",
      "Finland",
      "France",
      "French Polynesia",
      "French West Indies",
      "Gabon",
      "Gambia",
      "Georgia",
      "Germany",
      "Ghana",
      "Gibraltar",
      "Greece",
      "Greenland",
      "Grenada",
      "Guam",
      "Guatemala",
      "Guernsey",
      "Guinea",
      "Guinea Bissau",
      "Guyana",
      "Haiti",
      "Honduras",
      "Hong Kong",
      "Hungary",
      "Iceland",
      "India",
      "Indonesia",
      "Iran",
      "Iraq",
      "Ireland",
      "Isle of Man",
      "Israel",
      "Italy",
      "Jamaica",
      "Japan",
      "Jersey",
      "Jordan",
      "Kazakhstan",
      "Kenya",
      "Kuwait",
      "Kyrgyz Republic",
      "Laos",
      "Latvia",
      "Lebanon",
      "Lesotho",
      "Liberia",
      "Libya",
      "Liechtenstein",
      "Lithuania",
      "Luxembourg",
      "Macau",
      "Macedonia",
      "Madagascar",
      "Malawi",
      "Malaysia",
      "Maldives",
      "Mali",
      "Malta",
      "Mauritania",
      "Mauritius",
      "Mexico",
      "Moldova",
      "Monaco",
      "Mongolia",
      "Montenegro",
      "Montserrat",
      "Morocco",
      "Mozambique",
      "Namibia",
      "Nepal",
      "Netherlands",
      "Netherlands Antilles",
      "New Caledonia",
      "New Zealand",
      "Nicaragua",
      "Niger",
      "Nigeria",
      "Norway",
      "Oman",
      "Pakistan",
      "Palestine",
      "Panama",
      "Papua New Guinea",
      "Paraguay",
      "Peru",
      "Philippines",
      "Poland",
      "Portugal",
      "Puerto Rico",
      "Qatar",
      "Reunion",
      "Romania",
      "Russia",
      "Rwanda",
      "Saint Pierre &amp; Miquelon",
      "Samoa",
      "San Marino",
      "Satellite",
      "Saudi Arabia",
      "Senegal",
      "Serbia",
      "Seychelles",
      "Sierra Leone",
      "Singapore",
      "Slovakia",
      "Slovenia",
      "South Africa",
      "South Korea",
      "Spain",
      "Sri Lanka",
      "St Kitts &amp; Nevis",
      "St Lucia",
      "St Vincent",
      "St. Lucia",
      "Sudan",
      "Suriname",
      "Swaziland",
      "Sweden",
      "Switzerland",
      "Syria",
      "Taiwan",
      "Tajikistan",
      "Tanzania",
      "Thailand",
      "Timor L'Este",
      "Togo",
      "Tonga",
      "Trinidad &amp; Tobago",
      "Tunisia",
      "Turkey",
      "Turkmenistan",
      "Turks &amp; Caicos",
      "Uganda",
      "Ukraine",
      "United Arab Emirates",
      "United Kingdom",
      "United States",
      "Uruguay",
      "Uzbekistan",
      "Venezuela",
      "Vietnam",
      "Virgin Islands (US)",
      "Yemen",
      "Zambia",
      "Zimbabwe"
    ],
    headers: [
      {
        text: "No",
        align: "center",
        sortable: false,
        value: "No"
      },
      { text: "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: [],
    editedIndex: -1,
    addStudents: {
      role: "STUDENT",
      name: "",
      email: "",
      date: "",
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobile: "",
      state: "",
      gender: "",
      fatherName: "",
      fatheCellNo: "",
      motherName: "",
      motherCellNo: "",
      select: "",
      selectSection: "",
      establishmentYear: new Date().getFullYear()
    },
      selectStudents: {
      elect: "",
      selectSection: "",
      },
    editedItem: {
      role: "STUDENT",
      name: "",
      email: "",
      dob: "",
      city: "",
      pincode: "",
      country: "",
      permanentAddress: "",
      presentAddress: "",
      mobile: "",
      state: "",
      gender: "",
      fatherName: "",
      fatheCellNo: "",
      motherName: "",
      motherCellNo: "",
      select: "",
      selectSection: "",
      establishmentYear: new Date().getFullYear()
    },
    defaultItem: {
      role: "STUDENT",
      name: "",
      email: ""
    },
    userName: "",
    items: [
      {
        href: "/changepassword",
        title: "Change Password",
        click: e => {
          console.log(e);
        }
      },
      {
        href: "#",
        title: "Logout",
        click: e => {
          window.getApp.$emit("APP_LOGOUT");
        }
      }
    ]
  }),
  watch: {
    menu(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    },
    menu1(val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    }
  },
  methods: {
    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;
          console.log("getSectionsList=====>", this.addSection);
        })
        .catch(err => {
          console.log("err====>", err);
          this.showLoader = false;
        });
    },
    getSections(_id) {
      var token = this.$store.state.token;
      http()
        .get(
          "/getSectionsList",
          { params: { classId: _id } },
          {
            headers: { Authorization: "Bearer " + token }
          }
        )
        .then(response => {
          this.addSection = response.data.data;
          console.log("getSectionsList=====>", this.addSection);
        })
        .catch(err => {
          // console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    },
    getSection(_id) {
      var token = this.$store.state.token;
      http()
        .get(
          "/getSectionsList",
          { params: { classId: _id } },
          {
            headers: { Authorization: "Bearer " + token }
          }
        )
        .then(response => {
          this.addSection = response.data.data;
          console.log("getSectionsList=====>", this.addSection);
        })
        .catch(err => {
          // 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);
          console.log("upload=======>", this.imageData.imageUrl);
          console.log("imageFile", 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.dob = this.editedItem.dob.substring(0, 10)
      this.dialog = true;
    },
    profile(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog1 = true;
    },
    // report(item) {
    //   this.editedIndex = this.desserts.indexOf(item);
    //   this.editedItem = Object.assign({}, item);
    // this.dialog2 = 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)
          if ((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;
    },
    // close2() {
    //   this.dialog2 = false;
    // },
    submit() {
      if (this.$refs.form.validate()) {
        let addStudent = {
          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,
          fatherName: this.addStudents.fatherName,
          fatherCellNo: this.addStudents.fatherCellNo,
          motherName: this.addStudents.motherName,
          motherCellNo: this.addStudents.motherCellNo,
          establishmentYear: this.addStudents.establishmentYear,
          classId: this.addStudents.select,
          sectionId: this.addStudents.selectSection,
          upload:this.imageUrl
        };
        this.loading = true;
        http()
          .post("/createStudent", addStudent)
          .then(response => {
            // console.log(addStudent)
            if ((this.snackbar = true)) {
              this.text = "New Student added successfully";
            }
            // this.getStudentList();
            this.clear();
            this.loading = false;
          })
          .catch(error => {
            // console.log(error);
            if ((this.snackbar = true)) {
              this.text = error.response.data.message;
            }
            this.loading = false;
          });
      }
    },
    mail() {},
    download() {},
    clear() {
      this.$refs.form.reset();
    },
    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,
          fatherName: this.editedItem.fatherName,
          fatherCellNo: this.editedItem.fatherCellNo,
          motherName: this.editedItem.motherName,
          motherCellNo: this.editedItem.motherCellNo,
          establishmentYear: this.editedItem.establishmentYear,
          classId: this.editedItem.select,
          sectionId: this.editedItem.selectSection,
          upload:this.imageUrl
      };
      http()
        .put("/updateStudent", editStudent)
        .then(response => {
          // console.log("editStudent",editStudent);
          if ((this.snackbar = true)) {
            this.text = "Successfully Student Existing User";
          }
          this.findStudents();
        })
        .catch(error => {
          // console.log(error);
        });
      this.close();
    },
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    }
  },
  mounted() {
    // this.getStudentList();
    var token = this.$store.state.token;
    http()
      .get("/getClassesList", {
        headers: { Authorization: "Bearer " + token }
      })
      .then(response => {
        this.addclass = response.data.data;
        // console.log("getClassesList=====>",this.addclass) 
      })
      .catch(err => {
        // console.log("err====>", err);
        this.$router.replace({ path: "/" });
      });
  },

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