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