<template>
  <v-tabs

  
    slider-color="black"

  >

   <v-spacer></v-spacer>

    <v-tab ripple>
      Existing user
    </v-tab>
    <v-spacer></v-spacer>
    <v-tab ripple>
      Add New Users
    </v-tab>
    <v-spacer></v-spacer>
    <v-tab-item>
      <v-card flat>
        <v-card-text>
        <v-data-table
        :headers="headers"
        :items="desserts"

        class="elevation-1">
      <template slot="items" slot-scope="props">

    <td>{{ props.item.No }}</td>
    <td>{{ props.item.Name }}</td>
    <td>{{ props.item.Email }}</td>

      <!-- <td><v-flex xs6>
      </v-flex></td> -->
          <td class="justify-center layout px-0">
            <v-icon
              small
              class="mr-2"
              @click="report(props.item)"
            >
              visibility
            </v-icon>
              <v-icon
              small
              class="mr-2"
              @click="editItem(props.item)"
            >
              edit
            </v-icon>
            <v-icon
              small
              @click="deleteItem(props.item)"
            >
              delete
            </v-icon>
          </td>
        </template>
      </v-data-table>

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

    </v-tab-item>
    <v-tab-item>
         <v-flex xs12 sm6 offset-sm3>
   
   

  <v-card flat>

        <!-- <v-card-text>Contents for Item 2 go here</v-card-text> -->

    <v-container fluid fill-height>

      <v-layout align-center>

        <v-flex xs12 sm8 offset-sm2> 
         <v-flex offset-sm5>
          <v-avatar size="40px"> 

          <img src="/static/avatar/download.png"/> </v-avatar> 

        </v-flex>
         <v-form>

          
              <v-text-field

                v-validate="'required|FName'"

                label="First name"
                class="mt-5"

                v-model="FName"
                :rules="[() => FName.length > 0 || 'This field is required']"

                required
              ></v-text-field>
              <v-text-field

              v-validate="'required|LName'"

              label="Last name"

              v-model="LName"
              :rules="[() => LName.length > 0 || 'This field is required']"

              required
      ></v-text-field>
      <v-text-field

        v-model="email"

        :rules="[erules.required, erules.em]"

        label="E-mail"
        data-vv-name="email"
        required>
      </v-text-field>
      
   
      <v-text-field
         v-model="DOB"
         label="Date of Birth"

         persistent-hint

        :rules="[rules.required, rules.min]"

         required >
      </v-text-field>
    <v-card-actions>

    <v-btn @click="clear" round dark>clear</v-btn>

    <v-spacer></v-spacer>

    <v-btn @click="submit" round dark>Add</v-btn></v-card-actions>

  </v-form>
  </v-flex>
  </v-layout>
  </v-container>
      </v-card>
         </v-flex>
    </v-tab-item>  
  </v-tabs>
  
   
  </template>
  
  <script>
  import Vue from 'vue';
  import VeeValidate from 'vee-validate';
  Vue.use(VeeValidate);
  export default {
    $_veeValidate: {
      validator: 'new'
    },
    data: () => ({

      FName: '',
      LName: '',

      DOB: '',
      email: '',

      clear: '',

      search: '',
      dialog: false,
      state: ['Pending', 'Approved'],

      rules: {
        required: value => !!value || 'This field is Required.',
        min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy'
          
      },
      erules: {
        required: value => !!value || 'This email field is Required.', 
        em: v => (v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'Email must be valid') 
      },

      headers: [
        {
          text: 'No',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Name', value: 'Name', sortable: false },
        { text: 'Email', value: 'Email', sortable: false },
        // { text: 'Status', value: 'Status', sortable: false },
        // { text: 'Actions', value: 'name', sortable: false, align: 'center', }
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        No: '',
        Name: '',
        Email: '',
      },
      defaultItem: {
        No: '',
        Name: '',
        Email: '',
      },
    }),

    mounted () {
      this.$validator.localize('en', this.dictionary);
    },
  
    methods: {

      initialize () {
        this.desserts = [
          {
            No: 1,
            Name: 'amit',
            Email: 'jsi@gmail.com',
            DOB: '22/09/1996'
          },
          {
            No: 2,
            Name: 'sumit',
            Email: 'aasi@gmail.com',
            DOB: '16/09/1997'
          }
        ];
      },
  
      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog = true;
      },

      submit () {
        this.$validator.validateAll();
      },

  
      // report (item) {
      //   this.reportIndex = this.desserts.indexOf(item);
      //   this.reportItem = Object.assign({}, item);
      //   this.report = true;
      // },
  
      deleteItem (item) {
        const index = this.desserts.indexOf(item);
        confirm('Are you sure you want to delete this item?') &&
          this.desserts.splice(index, 1);
      },
  
      close () {
        this.dialog = false;
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem);
          this.editedIndex = -1;
        }, 300);
      },
  
      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem);
        } else {
          this.desserts.push(this.editedItem);
        }
        this.close();
      }
    }, 
  
    clear () {

      this.FName = '';
      this.LName = '';

      this.email = '';
      this.DOB = '';

      // this.select = null;
      // this.checkbox = null;

      this.$validator.reset();

    }
  };
  
  </script>

  <style scoped>
  .v-card__actions .v-btn{
    margin: 0 15px;
    min-width: 120px;
  }
  </style>