<template>
  <v-app id="login">
    <v-container>
      <v-layout>
        <v-flex xs12 sm12 md12 lg10 class="mt-5 mx-auto">
          <v-card flat class="Card-style pa-2">
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">General Setting</label>
              </v-flex>
            </v-layout>
            <v-card-text>
              <v-flex xs12>
                <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center mb-4"
                    >
                      <img
                        src="/static/default_thumb.png"
                        height="140"
                        width="140"
                        v-if="!imageData.imageUrl"
                      />
                      <input
                        type="file"
                        style="display: none"
                        ref="image"
                        accept="image/*"
                        @change="onFilePicked"
                      />
                      <img
                        :src="imageData.imageUrl"
                        height="150"
                        width="150"
                        v-if="imageData.imageUrl"
                      />
                    </v-flex>
                  </v-layout>
                  <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-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-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label>
                          <label
                            class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4"
                          >Uplaod :</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            label="Select Image"
                            @click="pickFile"
                            v-model="imageName"
                            append-icon="attach_file"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-flex>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn
                  class="mt-3 add-button"
                  round
                  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: "",
      imageData: {},
      imageName: "",
      imageUrl: "",
      imageFile: "",
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getParticularSchool();
  },
  methods: {
    pickFile() {
      this.$refs.image.click();
    },
    onFilePicked(e) {
      // console.log(e)
      const files = e.target.files;
      this.imageData.upload = e.target.files[0];
      if (files[0] !== undefined) {
        this.imageName = files[0].name;
        if (this.imageName.lastIndexOf(".") <= 0) {
          return;
        }
        const fr = new FileReader();
        fr.readAsDataURL(files[0]);
        fr.addEventListener("load", () => {
          this.imageUrl = fr.result;
          this.imageFile = files[0]; // this is an image file that can be sent to server...
          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
        });
      } else {
        this.imageName = "";
        this.imageFile = "";
        this.imageUrl = "";
      }
    },
    reset() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        if (this.imageUrl) {
          var str = this.imageUrl;
          const [baseUrl, imageUrl] = str.split(/,/);
          this.setting.upload = imageUrl;
        }
        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.imageUrl = "";
          })
          .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);
    //       }
    //     });
    // },
    getParticularSchool() {
      this.showLoader = true;
      http()
        .get("/getParticularSchool", {
          params: {
            schoolId: this.$store.state.id,
          },
          headers: { Authorization: "Bearer " + this.token },
        })
        .then((response) => {
          this.setting = response.data.data;
          this.imageData.imageUrl = response.data.data.schoolLogoUrl;
        })
        .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>
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>