<template>
<v-tabs
 grow
 slider-color="black"
>

  <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
    Existing user
  </v-tab>
  
  <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
    Add New Users
  </v-tab>

  <v-tab-item>
     <v-dialog v-model="dialog" max-width="500px">
       <v-toolbar color="white">
       <v-spacer></v-spacer>
       <v-toolbar-title>Edit Profile</v-toolbar-title>
       <v-spacer></v-spacer>
       </v-toolbar>
       <v-card>
       <v-flex align-center justify-center layout text-xs-center>
       <v-avatar size="50px" style="position:absolute; top:10px; "> 
       <img src="/static/icon/user.png"/></v-avatar> 
     </v-flex>  
          <v-card-text>
          <v-container>
          <v-layout wrap justify-center>
      <v-flex xs12 sm9>
      <v-form>
   
      <v-layout style="position:relative; top:15px;">
      <v-flex xs4 class="pt-4 subheading">
      <label>First Name: </label>
      </v-flex>
      <v-flex xs8>
      <v-text-field
      v-model="editedItem.Name"
      v-validate="'required'"
      :rules="nameRules"
      data-vv-name="Name"
      required
      ></v-text-field></v-flex></v-layout>
      <v-layout>
      <v-flex xs4 class="pt-4 subheading">
      <label>Last Name: </label>
      </v-flex>
      <v-flex xs8>
      <v-text-field
      v-model="editedItem.LName"
      v-validate="'required'"
      :rules="lnameRules"
      data-vv-name="Name"
      required
      ></v-text-field></v-flex></v-layout>
     
     <v-layout>
      <v-flex xs4 class="pt-4 subheading">
      <label>Email ID: </label>
      </v-flex>
      <v-flex xs8>
      <v-text-field
      v-model="editedItem.Email"
      v-validate="'required|email'"
      :rules="emailRules"
      data-vv-name="E-mail"
      required
      ></v-text-field></v-flex></v-layout>
       <v-layout>
      <v-flex xs4 class="pt-4 subheading">
      <label>Date of Birth: </label>
      </v-flex>
      <v-flex xs8>
      <v-text-field
      v-model="editedItem.DOB"
     :rules="[rules.required, rules.min]"
      ></v-text-field></v-flex></v-layout>
    <v-card-actions>

      <v-btn round dark @click.native="close">Cancel</v-btn>
      <v-spacer></v-spacer>
      <v-btn round dark @click.native="save">Save</v-btn>
     
      </v-card-actions>
      </v-form>
      </v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</v-dialog>

<v-dialog v-model="dialog1" max-width="500px">
       <v-toolbar color="white">
       <v-spacer></v-spacer>
       <v-toolbar-title>Profile</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-icon @click="close1">close</v-icon>
       </v-toolbar>
       

      <v-card>
      <v-flex align-center justify-center layout text-xs-center>
      <v-avatar size="50px" style="position:absolute; top:20px;"> 
      <img src="/static/icon/user.png"/> </v-avatar> 
     </v-flex>  
 <v-card-text>
    <v-container grid-list-md>
      <v-layout wrap justify-center>
        <v-flex offset-xs3 id="flex">
          
          <br><br>
          <table style="position:absolute; top:110px;">
            <th>
              <tr><h5><b>First Name:</b></h5></tr><br>
              <tr><h5><b>Last Name:</b></h5></tr><br>
              <tr><h5><b>Email:</b></h5></tr><br>
              <tr><h5><b>Date Of Birth:</b></h5></tr>
            </th>
            <th>
             <tr><td><h5><b>{{ editedItem.Name }}</b></h5></td></tr><br>
            <tr> <td><h5><b>{{ editedItem.LName }}</b></h5></td></tr><br>
            <tr><td><h5><b>{{ editedItem.Email }}</b></h5></td></tr><br>
            <tr><td><h5><b>{{ editedItem.DOB }}</b></h5></td></tr>
            </th>
            
        
          </table>
        </v-flex>
      </v-layout>
    </v-container>
    </v-card-text>
    </v-card>
</v-dialog>

<v-dialog v-model="dialog2" max-width="700px">
 
  <v-card>
     <div id="dialog">
     <h4><b> Report </b> </h4>
     <h5 id="name"><b>Patient Name:</b> {{ editedItem.Name+' '+editedItem.LName }}</h5>
     <h5 id="m">Select Month:</h5>
     <v-btn flat id="G">Generate</v-btn>
   <v-spacer></v-spacer>
       <v-icon id="icon" @click="close2">close</v-icon>
       <span id="bt">
         <!-- <v-btn flat>1 month</v-btn>
         <v-btn flat>3 Month</v-btn>
         <v-btn flat>6 Month</v-btn>
         <v-btn flat>9 Month</v-btn> -->
         <v-flex xs10>
         <v-tabs
          slider-color="transparent"
          >
          <v-tab ripple>1 Month</v-tab>
          <v-tab ripple>3 Month</v-tab>
          <v-tab ripple>6 Month</v-tab>
          <v-tab ripple>9 Month</v-tab>
         <img id="e" @click="mail" src="/static/icon/email1.png"/>
         <img id="d" @click="download" src="/static/icon/download1.png"/>
         </v-tabs></v-flex>
       </span>
       <v-card-text>
         <h5 style="position: absolute; top:275px; left:230px"><b>Select month to generate report</b></h5>
       </v-card-text>
       </div>
    </v-card>
</v-dialog>

      <v-data-table
        :headers="headers"
        :items="desserts"
        :pagination.sync="pagination"
      >
        <template slot="items" slot-scope="props">
          <td id="td" class="text-xs-center">{{ props.item.No }}</td>
          <td id="td" class="text-xs-center">{{ props.item.Name+' '+props.item.LName }}</td>
          <td id="td" class="text-xs-center">{{ props.item.Email }}</td>
          
      
          <td class="text-xs-center">
          
           <span>
          <img style="cursor:pointer; height:20px; " class="mr-5" @click="report(props.item)" src="/static/icon/List1.png"/>
          <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-2" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
          </span>
          </td>
          
        </template>
        
      </v-data-table>
      
  </v-tab-item>
  <v-tab-item>
       <v-flex xs12 sm6 offset-sm3>
 
 
<v-card flat>
  <v-container fluid fill-height>
    <v-layout align-center>
      <v-flex xs12 sm8 offset-sm2> 
       <v-flex offset-sm5>
        <v-avatar size="55px"> 
        <img src="/static/icon/user.png"/> </v-avatar> 
      </v-flex>
<v-form ref="form" v-model="valid" lazy-validation>
    <v-layout>
      <v-flex xs4 class="pt-4 subheading">
      <label>First Name: </label>
      </v-flex>
      <v-flex xs8>
      <v-text-field
        v-model="Name"
        :rules="nameRules"
        required
      ></v-text-field>
      </v-flex>
    </v-layout>
    <v-layout>
    <v-flex xs4 class="pt-4 subheading">
    <label>Last Name: </label>
    </v-flex>
    <v-flex xs8>
    <v-text-field
      :rules="lnameRules"
      v-model="LName"
      required
      ></v-text-field>
      </v-flex>
      </v-layout>
      <v-layout>
    <v-flex xs4 class="pt-4 subheading">
    <label>Email ID: </label>
    </v-flex>
    <v-flex xs8>
    <v-text-field
      :rules="emailRules"
      v-model="email"
      required
      ></v-text-field>
      </v-flex>
      </v-layout>
    
     <v-layout>
    <v-flex xs4 class="pt-4 subheading">
    <label>Date of Birth: </label>
    </v-flex>
    <v-flex xs8>
    <v-text-field
      :rules="[rules.required, rules.min]"
      v-model="DOB"
      required
      ></v-text-field>
      </v-flex>
      </v-layout>
 <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 axios from 'axios';
export default {
  data: () => ({
    No: '',
    Name: '',
    LName: '',
    Email: '',
    DOB: '',
    search: '',
    dialog: false,
    dialog1: false,
    dialog2: false,
    valid: true,
    isActive: true,
    newActive: false,
    pagination: {
      rowsPerPage: 10
    },
    rules: {
      required: value => !!value || 'Date of Birth 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'
    },
    nameRules: [v => !!v || ' First Name is required'],
    email: '',
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+/.test(v) || 'E-mail must be valid'
    ],
    lnameRules: [v => !!v || ' Last Name is required'],
    headers: [
      {
        text: 'No',
        align: 'center',
        sortable: false,
        value: 'No'
      },
      { text: 'Name', value: 'Name', sortable: false, align: 'center' },
      { text: 'Email', value: 'Email', sortable: false, align: 'center' },
      { text: '', value: '', sortable: false, align: 'center' }
    ],
    desserts: [
      {
        No: 1,
        Name: 'Amit',
        LName: 'goyal',
        Email: 'jsi@gmail.com',
        DOB: '22/09/1996'
      },
      {
        No: 2,
        Name: 'Sumit',
        LName: 'kumar',
        Email: 'aasi@gmail.com',
        DOB: '16/09/1997'
      }
    ],
    editedIndex: -1,
    editedItem: {
      No: '',
      Name: '',
      LName: '',
      Email: ''
    },
    defaultItem: {
      No: '',
      Name: '',
      LName: '',
      Email: ''
    }
  }),
  // computed: {
  //   pages () {
  //     if (this.pagination.rowsPerPage == null ||
  //       this.pagination.totalItems == null
  //     ) return 0;
  //     return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage);
  //   }
  // },
  methods: {
    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    profile (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog1 = true;
    },
    report (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog2 = true;
    },

    deleteItem (item) {
      const index = this.desserts.indexOf(item);
      confirm('Are you sure you want to delete this item?') &&
        this.desserts.splice(index, 1);
    },
    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()) {
        // Native form submission is not yet supported
        axios.post('/api/submit', {
          Name: this.Name,
          LName: this.LName,
          Email: this.Email,
          DOB: this.DOB
        });
      }
    },
    mail () {
      // this.editedIndex = this.desserts.indexOf();
    },
    download () {
      // this.editedIndex = this.desserts.indexOf();
    
    },
    clear () {
      this.$refs.form.reset();
    },
    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close();
    }
  },
};
</script>
<style scoped>
.v-card__actions .v-btn {
  margin: 0 15px;
  min-width: 120px;
}

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;
}
#bt {
  position: relative;
  top: -20px;
  left: 115px;
}
#e {
  position: relative;
  top: 13px;
  right: -140px;
  height: 17px;
  cursor: pointer;
}
#d {
  position: relative;
  top: 13px;
  right: -180px;
  height: 17px;
  cursor: pointer;
}
#td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#dialog {
  height: 550px;
}
.active {
  background-color: black;
  color: white !important;
}
#flex{
height: 300px;
}
</style>