<template>
  <v-flex xs12>
    <app-toolbar class="app--toolbar"></app-toolbar> 
    <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 xs12 sm4 lg3 class="top">
          <v-text-field
            justify-right
            prepend-icon="search"
            v-model="term"
            label="Find Yours Users"
            color="black"
            @change="getProviderList"
          ></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 OF 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 OF PROVIDER DEATILS -->
      </v-dialog>
      <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
        :pagination.sync="pagination"
        :search="term"
      >
        <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-alert
          slot="no-results"
          :value="true"
          color="error"
          icon="warning"
        >Your search for "{{ term }}" found no results.</v-alert>
      </v-data-table>
    </v-card>
  </v-flex>
</template>
<script>
import http from "@/Services/http.js";
import AppToolbar from '@/components/AppToolbar';


export default {
  components: {
    AppToolbar,
  },
  data: () => ({
    snackbar: false,
    statussnackbar: false,
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    valid: "",
    modaledit: false,
    dialog: false,
    dialog1: false,
    statusList: ["APPROVED", "DECLINED"],
    term:'',
    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);
      //   });
      //    var token = this.$store.state.token;
      http()
        .get("/provider-list?term=" + this.term, {
          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", confirm('Are you sure you want to delete this?') && 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: 769px){
  .top{
    margin-top:30px;
  }
  
}
@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>