<template>
  <v-app id="login">
    <v-container fill-height>
      <v-layout>
        <v-flex xs12 sm12 md12 lg12 class="mt-5">
          <v-toolbar class="fixcolors mt-5" dark>
            <v-spacer></v-spacer>
            <v-toolbar-title>General Setting</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card class="elevation-1 pa-3" id="form">
            <v-card-text>
              <v-flex xs12>
                <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                  <v-flex xs12>
                    <!-- <v-layout> -->
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Site Title:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Site title"
                              v-model="setting.name"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Phone:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Phone number"
                              v-model="setting.mobile"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    <!-- </v-layout> -->
                    <!-- <v-layout> -->
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Email:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your email"
                              v-model="setting.email"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 sm4>
                            <label class="subheading right pt-4">Address:</label>
                          </v-flex>
                          <v-flex xs8 sm5>
                            <v-text-field
                              class="ml-3"
                              placeholder="fill your Address"
                              v-model="setting.address"
                            ></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    <!-- </v-layout> -->
                  </v-flex>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn
                  class="mt-3"
                  round
                  color="black"
                  dark
                  large
                  :loading="loading"
                  @click="reset"
                >submit</v-btn>
              </v-flex>
            </v-card-actions>
            <v-snackbar
              :timeout="timeout"
              :top="y === 'top'"
              :right="x === 'right'"
              :vertical="mode === 'vertical'"
              v-model="snackbar"
              :color="color"
            >{{ text }}</v-snackbar>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";

export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 4000,
      text: "",
      color: "",
      setting: {},
      valid: true,
      loading: false,
      text: ""
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    // this.getRole();
  },
  methods: {
    reset() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        this.setting.schoolId = this.$store.state.id;
        http()
          .put("/updateSchool", this.setting, {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.loading = false;
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.clear();
          })
          .catch(error => {
            // console.log("err====>",err);
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
            this.loading = false;
          });
      }
    },
    // getRole() {
    //   this.showLoader = true;
    //   http()
    //     .get("/getRolesList", {
    //       headers: { Authorization: "Bearer " + this.token }
    //     })
    //     .then(response => {
    //       for (let i = 0; i < response.data.data.length; i++) {
    //         if (
    //           response.data.data[i].name != "SUPERADMIN" &&
    //           response.data.data[i].name != "ADMIN"
    //         ) {
    //           this.getRoles.push(response.data.data[i]);
    //           this.showLoader = false;
    //         }
    //       }
    //     })
    //     .catch(error => {
    //       this.showLoader = false;
    //       if (error.response.status === 401) {
    //         this.$router.replace({ path: "/" });
    //         this.$store.dispatch("setToken", null);
    //         this.$store.dispatch("Id", null);
    //       }
    //     });
    // },
    clear() {
      this.$refs.form.reset();
    }
    // getUsers(roles) {
    //   this.showLoader = true;
    //   http()
    //     .get("/getUserWithRole", {
    //       params: {
    //         name: roles
    //       },
    //       headers: { Authorization: "Bearer " + this.token }
    //     })
    //     .then(response => {
    //       this.getUsersName = response.data.data;
    //     })
    //     .catch(error => {
    //       this.showLoader = false;
    //       if (error.response.status === 401) {
    //         this.$router.replace({ path: "/" });
    //         this.$store.dispatch("setToken", null);
    //         this.$store.dispatch("Id", null);
    //       }
    //     });
    // }
  }
};
</script>
<style scoped>
img {
  position: absolute;
  top: 13px;
  left: 50px;
}
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>
