<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="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="mail" src="/static/icon/email1.png"/>

           <img id="d" @click="download" src="/static/icon/download1.png"/>

         </span>

         <v-card-text>
           <h5 style="position: absolute; top:275px; left:270px"><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: -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;
  }
  .active {
    background-color: black;
    color: white !important;

  }

  #flex{

  height: 300px;

  }

  </style>