<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/icon/user.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'"

        :error-messages="errors.collect('Name')"
        label="First Name"
        data-vv-name="Name"
        required >
      </v-text-field>
        <v-text-field

        v-validate="'required'"

        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/icon/user.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-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>12 Month</v-btn>
           <img id="e" @click="" src="/static/avatar/email1.png"/>
      
           <img id="d" @click="" src="/static/avatar/download1.png"/>
         </span>
         </div>
      </v-card>

  </v-dialog>

        <v-data-table

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

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

            <td id="td">{{ props.item.No }}</td>
            <td id="td">{{ props.item.Name+' '+props.item.LName }}</td>
            <td id="td">{{ props.item.Email }}</td>
            
        
            <td id="td" class="justify-center align-center layout px-0">
            
             <span>
            <img style="cursor:pointer; height:20px; " class="mr-2" @click="report(props.item)" src="/static/icon/List1.png"/>
            <img style="cursor:pointer; width:25px; height:18px; " class="mr-2" @click="profile(props.item)" src="/static/icon/eye1.png"/>
            <img style="cursor:pointer; width:20px; height:18px; " class="mr-2" @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-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="55px"> 
          <img src="/static/icon/user.png"/> </v-avatar> 

        </v-flex>

  <v-form ref="form" v-model="valid" lazy-validation>
      <v-text-field
        v-model="Name"
        :rules="nameRules"

        label="First 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 },

      ],
      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;
  }

  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: -11px;
  }
  #G{
   position: absolute;
   top: 38px;
  }
  #bt{
    position: relative;
     top: -20px;
     left:115px;
  }
  #e{
   position: relative;
   right: -110px;
    height: 17px;
    cursor: pointer;
  }
  #d{
   position: relative;
   right: -150px;
   height: 17px;
   cursor: pointer;
  }
  #td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
  #dialog{
    height:550px;
    
  }

  </style>