<template>
  <v-app id="pages-dasboard" class="dashbaordBackground">
    <v-container fluid grid-list-xl>
      <v-layout row wrap class="pt-3">
        <!-- ***** Total Students ***** -->
        <v-flex xs12 class="pt-2">
          <v-layout row wrap>
            <v-flex xs12 sm12 lg3 md3>
              <v-card width="90" height="90" class="ml-3 pa-1 white iconCard" dark>
                <img
                  src="/static/schoolIcons/Students.png"
                  class="iconOfDashboard"
                  width="80"
                  alt="Students"
                />
              </v-card>
              <v-card class="pa-3" style="margin-top: -44px;">
                <div class="body-2 grey--text text-xs-right">Students</div>
                <br />
                <h3 class="headline text-xs-right pb-4">{{ students.length }}</h3>
              </v-card>
            </v-flex>
            <!-- ***** Total Parents ***** -->
            <v-flex xs12 sm12 lg3 md3>
              <v-card width="90" height="90" class="ml-3 pa-1 white agentIcon" dark>
                <img
                  src="/static/schoolIcons/Parents.png"
                  width="80"
                  class="iconOfDashboard"
                  alt="Parents"
                />
              </v-card>
              <v-card class="pa-3" style="margin-top: -44px;">
                <div class="body-2 grey--text text-xs-right">Parents</div>
                <br />
                <h3 class="headline text-xs-right pb-4">{{ parents.length }}</h3>
              </v-card>
            </v-flex>
            <!-- ***** Total Teachers***** -->
            <v-flex xs12 sm12 lg3 md3>
              <v-card width="90" height="90" class="ml-3 pa-1 white farmerIcon" dark>
                <img
                  src="/static/schoolIcons/Teachers.png"
                  width="80"
                  class="iconOfDashboard"
                  alt="Teachers"
                />
              </v-card>
              <v-card class="pa-3" style="margin-top: -44px;">
                <div class="body-2 grey--text text-xs-right">Teachers</div>
                <br />
                <h3 class="headline text-xs-right pb-4">{{ teachers.length }}</h3>
              </v-card>
            </v-flex>
            <!-- ***** Total Class***** -->
            <v-flex xs12 sm12 lg3 md3>
              <v-card width="90" height="90" class="ml-3 pa-1 white khasraIcon" dark>
                <img
                  src="/static/schoolIcons/Class.png"
                  width="80"
                  class="iconOfDashboard"
                  alt="class"
                />
              </v-card>
              <v-card class="pa-3" style="margin-top: -44px;">
                <div class="body-2 grey--text text-xs-right">Class</div>
                <br />
                <h3 class="headline text-xs-right pb-4">{{ classes.length}}</h3>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
      <v-layout>
        <v-flex xs12>
          <v-card>
            <v-toolbar color="grey lighten-2" flat>
              <v-spacer></v-spacer>
              <v-toolbar-title>School Details</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-flex align-center justify-center layout text-xs-center class="mt-3">
              <v-avatar size="160px">
                <img src="/static/icon/user.png" v-if="!schoolData.schoolLogoUrl" />
                <img :src="schoolData.schoolLogoUrl" v-else-if="schoolData.schoolLogoUrl" />
              </v-avatar>
            </v-flex>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <h5 class="right my-1">
                        <b>Full Name:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1 left">{{ schoolData.name }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4>
                      <h5 class="right my-1">
                        <b>Email:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1 left">{{ schoolData.email }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>Create:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1">{{ dates(schoolData.created) }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4>
                      <b>
                        <h5 class="right my-1">
                          <b>City:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1 left">{{ schoolData.city }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>State:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1 left">{{ schoolData.state }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4>
                      <b>
                        <h5 class="right my-1">
                          <b>Pincode:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1">{{ schoolData.pinCode }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>Fax No:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1 left">{{ schoolData.faxNo }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4>
                      <b>
                        <h5 class="right my-1">
                          <b>Country:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1">{{ schoolData.country }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>Mobile No:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1">{{ schoolData.mobile }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm5>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>Country:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1">{{ schoolData.country }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex sm5 xs6>
                      <b>
                        <h5 class="right my-1">
                          <b>LandLine No:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm6 xs6>
                      <h5 class="my-1">{{ schoolData.landLineNo }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4 class="hidden-xs-only hidden-sm-only">
                      <b>
                        <h5 class="right my-1">
                          <b>Registration No:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex xs6 sm4 class="hidden-lg-only hidden-md-only hidden-xl-only">
                      <b>
                        <h5 class="right my-1">
                          <b>RegistrationNo:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1">{{ schoolData.registrationNo }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm5>
                      <b>
                        <h5 class="right my-1">
                          <b>School Details:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm7 xs6>
                      <h5 class="my-1">{{ schoolData.schoolDetails }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <v-flex xs12 sm6>
                  <v-layout>
                    <v-flex xs6 sm4>
                      <b>
                        <h5 class="right my-1">
                          <b>Address:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm8 xs6>
                      <h5 class="my-1">{{ schoolData.address }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <v-flex xs12 sm5>
                  <v-layout>
                    <v-flex xs6 sm6 class="hidden-xs-only hidden-sm-only">
                      <b>
                        <h5 class="right my-1">
                          <b>Academic Year:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex xs6 sm6 class="hidden-lg-only hidden-md-only hidden-xl-only">
                      <b>
                        <h5 class="right my-1">
                          <b>AcademicYear:</b>
                        </h5>
                      </b>
                    </v-flex>
                    <v-flex sm6 xs6>
                      <h5 class="my-1">{{ schoolData.establishmentYear }}</h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-app>
</template>


<script>
import http from "@/Services/http.js";
import moment from "moment";

export default {
  data() {
    return {
      showLoader: false,
      students: "",
      parents: "",
      teachers: "",
      classes: "",
      schoolData: ""
    };
  },
  mounted() {
    this.getStudents();
    this.getTeachers();
    this.getParents();
    this.getClasses();
    this.getSchoolData();
  },
  methods: {
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
    },
    getStudents() {
      http()
        .get("/getStudentsList", {
          params: { schoolId: this.$route.params.schoolId }
        })
        .then(response => {
          this.students = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
    getParents() {
      http()
        .get("/getParentsList", {
          params: { schoolId: this.$route.params.schoolId }
        })
        .then(response => {
          this.parents = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getTeachers() {
      http()
        .get("/getTeachersList", {
          params: { schoolId: this.$route.params.schoolId }
        })
        .then(response => {
          this.teachers = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
    getClasses() {
      http()
        .get("/getClassesList", {
          params: { schoolId: this.$route.params.schoolId }
        })
        .then(response => {
          this.classes = response.data.data;
          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);
            this.$store.dispatch("Role", null);
          }
        });
    },
    getSchoolData() {
      http()
        .get("/getParticularSchool", {
          params: { schoolId: this.$route.params.schoolId }
        })
        .then(response => {
          this.schoolData = response.data.data;
          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);
            this.$store.dispatch("Role", null);
          }
        });
    }
  }
};
</script>

<style  scoped>
.iconCard {
  position: relative !important;
  border-radius: 4px;
  z-index: 1;
}
.agentIcon {
  position: relative !important;
  border-radius: 4px;
  z-index: 1;
}
.farmerIcon {
  position: relative !important;
  border-radius: 4px;
  z-index: 1;
}
.khasraIcon {
  position: relative !important;
  border-radius: 4px;
  z-index: 1;
}
</style>