<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-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="40px" style="position:absolute; top:10px; "> 
        <img src="/static/avatar/download.png"/> </v-avatar> 
       </v-flex>  
            <v-card-text>
            <v-container grid-list-md>
            <v-layout wrap justify-center>
            <v-flex xs12 sm9> 
            <v-form>
      <v-text-field
        v-model="editedItem.Name" 
        v-validate="'required|max:15'"
        :error-messages="errors.collect('Name')"
        label="First Name"
        data-vv-name="Name"
        required >
      </v-text-field>
        <v-text-field
        v-validate="'required|max:10'"
        v-model="editedItem.LName"
        :error-messages="errors.collect('name')"
        label="Last Name"
        data-vv-name="name"
        required>
      </v-text-field>
      <v-text-field
        v-model="editedItem.Email" 
        v-validate="'required|email'"
        :error-messages="errors.collect('email')"
        label="E-mail"
        data-vv-name="email"
        required>
      </v-text-field>
      <v-text-field
         v-model="editedItem.DOB" 
         label="Date of Birth"
        :rules="[rules.required, rules.min]"
         >
      </v-text-field>
      <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="40px" style="position:absolute; top:10px;"> 
        <img src="/static/avatar/download.png"/> </v-avatar> 
       </v-flex>  
   <v-card-text>
      <v-container grid-list-md>
        <v-layout wrap justify-center>
          <v-flex offset-xs3>
            
            <br><br>
            <table>
              <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="800px">
  
  <v-toolbar color="white">
         <v-toolbar-title>Report</v-toolbar-title>
         <v-toolbar-items>
          <h5>Patient Name: {{ editedItem.Name }}</h5>
         
         </v-toolbar-items>
         <v-spacer></v-spacer>
         <v-icon @click="close2">close</v-icon>
         
         </v-toolbar>
       <v-card>
         <v-flex>
         </v-flex>
       </v-card>
  </v-dialog>
    

        <v-data-table

          :headers="headers"
          :items="desserts"

        >
          <template slot="items" slot-scope="props">

            <td style="border-right:1px solid red">{{ props.item.No }}</td>

            <td>{{ props.item.Name+' '+props.item.LName }}</td>
            <td>{{ props.item.Email }}</td>
            <!-- <td class="text-xs-right">{{ props.item.carbs }}</td>
            <td class="text-xs-right">{{ props.item.protein }}</td> -->
            <td class="justify-center layout px-0">

            <v-icon

            @click="report(props.item)"

              class="mr-2"

            >

              report

            </v-icon>
              <v-icon

              class="mr-2"

              @click="profile(props.item)"

            >

              visibility

            </v-icon>

              <v-icon
              
                class="mr-2"
                @click="editItem(props.item)"
              >
                edit
              </v-icon>
              <v-icon
                
                @click="deleteItem(props.item)"
              >
                delete
              </v-icon>
            </td>
            <td></td>
          </template>
        </v-data-table>

    </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 ref="form" v-model="valid" lazy-validation>
      <v-text-field
        v-model="Name"
        :rules="nameRules"
        label="Name"
        required

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

        :rules="nameRules"
        v-model="LName"
        label="Last name"
        required
        ></v-text-field>
      <v-text-field

        v-model="email"

        :rules="emailRules"

        label="E-mail"

        required
      ></v-text-field>

      <v-text-field

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

        label="Date of Birth"
        v-model="DOB"
        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 axios from 'axios';

  export default {

    data: () => ({

      No: '',
      Name: '',

      LName: '',

      Email: '',

      DOB: '',

      clear: '',

      submit: '',

      search: '',
      dialog: false,

      dialog1: false,
      dialog2: false,
      valid: true,

      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'

      },

      nameRules: [
        v => !!v || 'Name is required',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid'
      ],

      headers: [
        {
          text: 'No',
          align: 'left',
          sortable: false,

          value: 'No'

        },
        { text: 'Name', value: 'Name', sortable: false },
        { text: 'Email', value: 'Email', sortable: false },

        { text: '', value: '', sortable: false },
        { text: '', value: '', sortable: false },
  
      ],
      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: '',

      }

    }),

    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);
      },
  
      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,
  
          });
        }
      },
      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;
  }
  </style>