<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"

          color="black"

        ></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-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"
        :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

        v-model="editedItem.LName"

        :rules="lnameRules"
        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"

        :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: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"

        :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 id="td" class="text-xs-center">
            <v-flex xs6 sm6>
              <v-select
              :items="status"
              v-model="props.item.e1"
              menu-props="auto"
              label="Select"
              hide-details
              single-line
              ></v-select>
              </v-flex>
              </td>

          <td class="text-xs-center">

            <span>

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

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

      pagination: {
        rowsPerPage: 10,
    
      },

      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: 'Status', value: 'Status', sortable: false, align: 'center' },

        { 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 () {

        console.log('editedItem', this.editedItem);

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

  </style>