<template>
<!-- <v-container fluid> -->
<v-flex xs12>
  <v-card>
    <v-card-title>
      <v-flex xs12 lg2 md3 sm4>
      <h4 class="text-xs-center"> Healthcare Providers </h4>
      </v-flex>
      <v-spacer></v-spacer>
  <!-- SEARCH ALL HEALTH PROVIDER -->
      <v-flex xs8 sm4 lg3>
      <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>
<!-- EDIT HEALTH PROVIDER -->
    <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
    <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 ref="form" v-model="valid" lazy-validation>
          <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.lastname"
      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-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>
<!-- VIEW PROFILE PRVIDE LIST -->
<v-dialog v-model="dialog1" max-width="700px" >
       <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="60px" 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 sm12 offset-sm3><br><br>
                   <v-layout>
                     <v-flex xs4>
                     <h5 class="right">First Name:</h5>
                    </v-flex>
                    <v-flex xs8>
                    <h5 class="left">{{ editedItem.name }}</h5>
                  </v-flex>
                 </v-layout>
                  <v-layout>
                     <v-flex xs4>
                     <h5 class="right my-3">Last Name:</h5>
                    </v-flex>
                    <v-flex xs8>
                     <h5 class="my-3 left" >{{ editedItem.name }}</h5>
                  </v-flex>
                 </v-layout>
                  <v-layout>
                     <v-flex xs4 >
                     <h5 class="right">Email:</h5>
                    </v-flex>
                    <v-flex xs8>
                     <h5 class="left">{{ editedItem.email }}</h5>
                  </v-flex>
                 </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
    </v-card-text>
  </v-card>
<!-- PROVIDER DATA TABLE PROVIDER DEATILS -->
</v-dialog>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :search="search"
      class="elevation-1"
      :pagination.sync="pagination"
    >
     <template slot="items" slot-scope="props">
        <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="statussnackbar"
           color="success"
         >{{ text }}</v-snackbar>
          <td id="td" class="text-xs-center">{{ props.index }}</td>
          <td id="td" class="text-xs-center">{{ props.item.name}}</td>
          <td id="td" class="text-xs-center">{{ props.item.email }}</td>
          <td id="td" class="text-xs-center">
            <v-flex xs12 sm12>
            <v-select
            :items="statusList"
            @change="changeswitch(props.item)"
            v-model="props.item.e1"
            menu-props="auto"
            :label="props.item.verified"
            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-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
          </span>
    </td>
       
      </template>
    </v-data-table>

</v-card>
</v-flex>
<!-- </v-container> -->
</template>
<script>
import http from '@/Services/http.js';
export default {
  data: () => ({
    snackbar: false,
    statussnackbar:false,
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    valid: '',
    modaledit:false,
    dialog: false,
    dialog1: false,
    statusList: ["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 || ' Last Name is required'],
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+/.test(v) || 'E-mail must be valid'
    ],
    pagination: {
      rowsPerPage: 13,
  
    },
    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: 'verified', sortable: false, align: 'center' },
      { text: '', value: '', sortable: false },

    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      No: '',
      Name: '',
      lastname: '',
      Email: '',
      dob:''
    },
    defaultItem: {
      No: '',
      Name: '',
      lastname: '',
      Email: '',
      dob:''
    },
  }),
  watch: {
    dialog (val) {
      val || this.close();
    }
  },

  created () {
    this.initialize();
  },
  mounted(){
    this.getProviderList();
  },
  methods: {
     getProviderList(){
      var token = this.$store.state.token
       http().get('/provider-list',{headers: {Authorization: 'Bearer '+ token}})
        .then(response => {
          this.desserts = response.data.data.providerList;
       }).catch(err => {
           console.log("err====>",err);
       })
    },
    initialize () {
      this.desserts = [];
    },

    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;
    },
    changeswitch(item){
      let addStatus = {
       userId:item.userId,
       status:item.e1
      };
        http().post("/approve-decline", addStatus)
        .then(response => {
          if ((this.statussnackbar = true)) {
            this.text = "Successfully change your status is" +  " "  + item.e1;
          }
          this.getProviderList();
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteItem (item) {
      let addUsers = {
       userId:item.userId
      };
        http().post("/deleteProvider", addUsers)
        .then(response => {
           if ((this.snackbar = true)) {
            this.text = "Successfully delete Health Care Priovider";
        }
          this.getProviderList();
        })
        .catch(error => {
          console.log(error);
        });
    },

    close () {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    close1 () {
      this.dialog1 = false;
    },

    save () {
     let editUsers = {
        name:  this.editedItem.name +this.editedItem.lastname,
        dob:   this.editedItem.dob,
        email: this.editedItem.email,
        userId: this.editedItem.userId
     };
        http().post("/provider-detail", editUsers)
        .then(response => {
           if ((this.snackbar = true)) {
            this.text = "Successfully Edit Health Care Priovider";
          }
          this.getProviderList();
        })
        .catch(error => {
          console.log(error);
        });
       this.close();
    }
  }, 
};
</script>
<style scoped>
.v-card__actions .v-btn {
margin: 0px;
min-width: 120px;
}
#td {
    border: 1px solid #dddddd;
    padding: 8px;
}
#flex{
height: 300px;
}
.v-select_selctions.v-select_slot.v-select_selection{
  color: black !important;
}
@media screen and (max-width:476px){
.flex.xs4 {
    flex-basis: 55.666667%;
    max-width: 71.666667%;
}
}
@media screen and (max-width: 402px) {  
h5 {
    font-size: 13px;
}
/* .right{
  float:none !important;
} */
.left{
  float:none !important;
}

}

</style>