<template>

  <v-container grid-list-md>

  <v-flex>
    <v-card>
      <v-card-title>
       <b><h5> Healthcare Providers </h5></b>
        <v-spacer></v-spacer>
        <v-flex xs6 sm4>
        <v-text-field justify-right
          prepend-icon="search" 
          v-model="search"
          label="Find Yours Users"
        ></v-text-field></v-flex>
      </v-card-title>

     <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 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="50px" 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-data-table
        :headers="headers"
        :items="desserts"
        :search="search"

        class="elevation-1"

      >
      
        <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"><v-flex xs6 sm5 >

      <v-select
      :items="status"
      v-model="props.item.e1"
      menu-props="auto"
      label="Select"
      hide-details
      single-line
      ></v-select>
      </v-flex></td>
          <td>
            <span>
            <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-card>
  </v-flex>

  </v-container>
  </template>
  <script>
  export default {
    data: () => ({

      Name: '',
      LName: '',
      DOB: '',
      email: '',

      dialog: false,
      dialog1: false,

      status: ['Pending', 'Approved', 'Declined'],

      search: '',

      e1: '',

      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'
      },

      headers: [

        { 

          text: 'No',
          align: 'left',
          sortable: false,

          value: 'no'

        },
        { text: 'Name', value: 'Name', sortable: false },
        { text: 'Email', value: 'Email', sortable: false },
        { text: 'Status', value: 'Status', sortable: false },
        { text: '', value: '', sortable: false },
  
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        No: '',

        Name: '',

        LName: '',
        Email: '',
      },
      defaultItem: {
        No: '',

        Name: '',

        LName: '',
        Email: '',
      },
    }),

    watch: {
      dialog (val) {
        val || this.close();
      }
    },
  
    created () {
      this.initialize();
    },
    methods: {
      initialize () {
        this.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'
          }
        ];
      },
  
      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;
      },

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

  
      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: 0px;
  min-width: 120px;
  }

  #td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }

  tr{
    background-color: #D0D3D4;
  }

  </style>