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