<template>
  <v-container fluid class="body-color">
    <!-- **** Id Card Select options **** -->
    <v-card flat class="elevation-0 transparent">
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-flex xs12 sm12 lg12>
          <v-layout wrap>
            <v-flex xs12 sm12 lg4>
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-autocomplete
                    v-model="getReport.role"
                    label="Select Type"
                    :items="getRoles"
                    item-text="name"
                    item-value="role"
                    @change="getRoleInputs(getReport.role)"
                    required
                  ></v-autocomplete>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showClass">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    v-model="getReport.classId"
                    label="Select Class"
                    :items="classList"
                    item-text="classNum"
                    item-value="_id"
                    @change="getSections(getReport.classId)"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showSections">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    :items="addSection"
                    label="Select Section"
                    v-model="getReport.sectionId"
                    item-text="name"
                    item-value="_id"
                    name="Select Section"
                    @change="getStudents"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showStudents">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    :items="getStudentsList"
                    label="Select Student"
                    v-model="getReport._id"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showTeacher">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Teacher"
                    :items="teacherList"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showAdmin">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Admin"
                    :items="userData"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showAccountant">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Accountant"
                    :items="Users"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4 v-if="showLibrarian">
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Librarian"
                    :items="Users"
                    item-text="name"
                    item-value="_id"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4>
              <v-layout>
                <v-flex xs12 sm12 lg10 class="ml-2">
                  <v-autocomplete
                    label="Select View Type"
                    type="text"
                    :items="typeList"
                    v-model="getReport.form"
                    item-text="name"
                    item-value="value"
                    :rules="typeRules"
                    @change="getReportType(getReport.form)"
                    required
                  ></v-autocomplete>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg4>
              <v-btn
                @click="getCards"
                round
                dark
                :loading="loading"
                class="open-dialog-button mt-3"
              >Get Report</v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-form>
    </v-card>
    <div>
      <v-layout v-show="showReport">
        <v-flex xs12>
          <v-card class="transparent elevation-0">
            <v-layout>
              <v-flex xs12>
                <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
                  Print
                  <v-icon right dark>print</v-icon>
                </v-btn>
              </v-flex>
            </v-layout>
          </v-card>
          <v-container grid-list-md id="printMe">
            <v-layout class="col-sm-12">
              <div
                style="font-family: arial;
                  max-width: 794px;
                  max-height: 1123px;
                  margin-left: auto;
                  margin-right: auto;
                  -webkit-print-color-adjust: exact;"
              >
                <div
                  style="
                     float: left;
                     height: 520px;
                     width: 520px;
                     background: #fff;
                     border: 1px solid lightgray;
                     position:relative;"
                >
                  <!-- bottom-right-side-image -->
                  <img
                    src="/static/icon/shape1.png"
                    alt="shape"
                    style="position:absolute;width: 90px;"
                  />
                  <!-- Front Side -->
                  <v-layout
                    style="
                     text-align: center;
                     margin-top: 50px;"
                    v-if="frontPart"
                  >
                    <v-flex xs12>
                      <!-- school Logo Url -->
                      <img
                        v-if="getCard.schoolLogoUrl"
                        :src="getCard.schoolLogoUrl"
                        alt="schoollogo"
                        style="
                         width: 110px;
                         margin-top:10px;
                         overflow:hidden"
                      />
                      <img
                        src="/static/default_thumb.png"
                        v-if="!getCard.schoolLogoUrl"
                        alt="schoollogo"
                        style="
                         width: 110px;
                         margin-top:10px;
                         overflow:hidden"
                      />
                      <v-layout style="margin:auto">
                        <!-- profile url -->
                        <img
                          v-if="getCard.profilePicUrl"
                          :src="getCard.profilePicUrl"
                          alt="profileImage"
                          style=";
                          width: 110px;
                          margin:10px auto;
                          width: 110px;
                          margin: 10px auto;
                          border: 3px solid #323232;
                          border-radius: 12px;"
                        />
                        <img
                          style=";
                        width: 110px;
                        margin:10px auto;
                        width: 110px;
                        margin: 10px auto;"
                          alt="dummy"
                          src="/static/icon/user.png"
                          v-if="!getCard.profilePicUrl && getCard.role != '2'"
                        />
                      </v-layout>

                      <p
                        style="color: #302653;font-size:24px;
                          letter-spacing: 4px;
                          margin-bottom:14px;"
                      >
                        <b>{{ getCard.name}}</b>
                      </p>
                      <p
                        style="color: #302653;
                          font-size:14px;
                          letter-spacing: 4px;
                          margin-bottom:14px;"
                      >
                        <b>{{ getCard.gender}}</b>
                      </p>
                      <p
                        v-if="getCard.classId"
                        style="color: #302653;
                          font-size:24px;
                          letter-spacing: 4px;
                          margin-bottom:14px;"
                      >{{ getCard.classId.classNum }}</p>
                      <p
                        v-if="getCard.classId"
                        style="color: #302653;
                          font-size:24px;
                          letter-spacing: 4px;
                          margin-bottom:14px;"
                      >{{ getCard.sectionId.name }}</p>
                      <p
                        v-if="getCard.rollNo"
                        style="color: #302653;
                           font-size:24px;
                          letter-spacing: 2px;
                          margin-bottom:10px;"
                      >Roll: {{ getCard.rollNo }}</p>
                      <p
                        v-if="getCard.joinDate"
                        style="color: #302653;
                          margin-bottom:10px;
                          font-size:16px;
                          letter-spacing: 2px;"
                      >{{ dates(getCard.joinDate) }}</p>
                      <p
                        v-if="getCard.joiningDate"
                        style="color: #302653;
                          margin-bottom:10px;
                          font-size:16px;
                          letter-spacing: 2px;"
                      >{{ dates(getCard.joiningDate) }}</p>
                      <p
                        v-if="getCard.phone"
                        style="color: #302653;
                          margin-bottom:10px;
                          font-size:16px;
                          letter-spacing: 2px;"
                      >{{ getCard.phone }}</p>
                      <p
                        style="
                        font-size: 19px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 5px;
                        margin-bottom:10px;"
                      >
                        <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
                        <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
                      </p>
                      <!-- <p
                        style="
                        font-size: 17px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 4px;"
                      >{{ getCard.address}}</p>-->
                      <p
                        style="
                        font-size: 17px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 4px;
                        margin-bottom:14px;"
                      >{{ getCard.email}}</p>
                    </v-flex>
                  </v-layout>
                  <!-- back side -->
                  <v-layout style="
                     text-align: center;" v-if="backPart">
                    <v-flex xs12>
                      <!-- school Logo Url -->
                      <img
                        v-if="getCard.schoolLogoUrl"
                        :src="getCard.schoolLogoUrl"
                        alt="schoollogo"
                        style="
                         width: 110px;
                         margin-top:10px;
                         overflow:hidden"
                      />
                      <img
                        v-if="getCard.schoolId"
                        :src="getCard.schoolId.schoolLogoUrl"
                        alt="schoollogo"
                        style="
                         width: 110px;
                         margin-top:10px;
                         overflow:hidden"
                      />
                      <!-- <v-layout style="margin:auto">
                        <img
                          v-if="getCard.profilePicUrl"
                          :src="getCard.profilePicUrl"
                          alt="profileImage"
                          style=";
                          width: 110px;
                          margin:10px auto;
                          width: 110px;
                          margin: 10px auto;
                          border: 3px solid #323232;
                          border-radius: 12px;"
                        />
                      </v-layout>-->
                      <p
                        v-if="getCard.schoolLogoUrl"
                        style="color: #302653;
                          font-size:24px;
                          letter-spacing: 4px;
                          margin-bottom:14px;"
                      >
                        <b>{{ getCard.name}}</b>
                      </p>

                      <p
                        v-if="getCard.city"
                        style="
                        font-size: 17px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 4px;
                        margin-bottom:14px;"
                      >{{ getCard.city}}</p>
                      <p
                        style="
                        font-size: 17px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 4px;
                        margin-bottom:14px;"
                      >
                        {{ getCard.address }}
                        {{ getCard.presentAddress }}
                        <span
                          v-if="getCard.state"
                        >({{ getCard.state }})</span>
                      </p>
                      <p
                        v-if="getCard.establishmentYear"
                        style="
                        font-size: 17px;
                        font-weight: 100;
                        color: rgb(48, 38, 83);
                        letter-spacing: 4px;
                        margin-bottom:14px;"
                      >{{ getCard.establishmentYear }}</p>
                    </v-flex>
                  </v-layout>
                  <!-- bottom-right-side-image -->
                  <img
                    src="static/icon/shape2.png"
                    alt="shape2"
                    style="bottom: 0;
                      position: absolute;
                      right: 0;
                      width: 110px;"
                  />
                </div>
              </div>
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>
    </div>
    <v-snackbar
      :timeout="timeout"
      :top="y === 'top'"
      :right="x === 'right'"
      :vertical="mode === 'vertical'"
      v-model="snackbar"
      :color="color"
    >{{ text }}</v-snackbar>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-container>
</template>

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

export default {
  data: () => ({
    showLoader: false,
    valid: true,
    report: {},
    userData: {},
    snackbar: false,
    color: "",
    y: "top",
    x: "right",
    mode: "",
    timeout: 10000,
    text: "",
    loading: false,
    showReport: false,
    frontPart: false,
    backPart: false,
    showClass: false,
    showTeacher: false,
    showAdmin: false,
    showAccountant: false,
    showLibrarian: false,
    hideprintIdCard: false,
    hidebackprintIdCard: false,
    showStudents: false,
    showSections: false,
    getRoles: [],
    classList: [],
    getCard: [],
    addSection: [],
    getStudentsList: [],
    teacherList: [],
    userData: [],
    Users: [],
    getReport: {},
    // cardRules: [v => !!v || "Id-Card Field is required"],
    // classRules: [v => !!v || "Class Field is required"],
    // sectionRules: [v => !!v || "Section Field is required"],
    // studentRules: [v => !!v || "Student Field is required"],
    // teacherRules: [v => !!v || "Teacher Field is required"],
    // adminRules: [v => !!v || "Admin Field is required"],
    // accountantRules: [v => !!v || "Accountant Field is required"],
    // librarianRules: [v => !!v || "Librarian Field is required"],

    typeRules: [v => !!v || "Type is required"],
    // backgroundRules: [v => !!v || "Background is required"],
    typeList: [
      {
        name: "Front Part",
        value: "frontPart"
      },
      {
        name: "Back Part",
        value: "backPart"
      }
    ],
    backgroundList: ["Yes", "No"]
  }),

  mounted() {
    this.token = this.$store.state.token;
    this.getUserData();
    this.getRole();
  },

  methods: {
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
      return date;
    },
    getReportType() {
      if (this.getReport.form === "frontPart") {
        this.frontPart = true;
        this.backPart = false;
      }
      if (this.getReport.form === "backPart") {
        this.frontPart = false;
        this.backPart = true;
      }
    },
    getRoleInputs(role) {
      console.log("role", role);
      this.showReport = false;
      this.getReport._id = "";
      this.getCard = "";
      if (role === 4) {
        // console.log("role", role);
        this.showClass = true;
        this.showTeacher = false;
        this.showAdmin = false;
        this.showAccountant = false;
        this.showLibrarian = false;
        this.showStudents = false;
        this.showSections = false;
        this.getClass();
      }
      if (role === 3) {
        this.showTeacher = true;
        this.showClass = false;
        this.showAdmin = false;
        this.showAccountant = false;
        this.showLibrarian = false;
        this.showStudents = false;
        this.showSections = false;
        this.getTeacherList();
      }
      if (role === 2) {
        this.showAdmin = true;
        this.showTeacher = false;
        this.showClass = false;
        this.showAccountant = false;
        this.showLibrarian = false;
        this.showStudents = false;
        this.showSections = false;
        this.getUserData();
      }
      if (role === 6) {
        this.showAccountant = true;
        this.showAdmin = false;
        this.showTeacher = false;
        this.showClass = false;
        this.showLibrarian = false;
        this.showStudents = false;
        this.showSections = false;
        this.getUsersList(role);
      }
      if (role === 7) {
        this.showLibrarian = true;
        this.showAccountant = false;
        this.showAdmin = false;
        this.showTeacher = false;
        this.showClass = false;
        this.showStudents = false;
        this.showSections = false;
        this.getUsersList(role);
      }
    },

    prindIDCardReport() {
      // Pass the element id here
      this.$htmlToPaper("printMe");
    },
    getUserData() {
      this.showLoader = true;
      http()
        .get("/getParticularUserDetail")
        .then(response => {
          this.userData = response.data.data;
          this.showLoader = false;
          // this.adminList = 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);
          }
        });
    },
    getRole() {
      this.showLoader = true;
      http()
        .get("/getRolesList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          var getRoles = [];
          getRoles = response.data.data;
          // if (getRoles[0].role !== 1) {
          //   getRoles = response.data.data;
          // }
          for (let i = 0; i < getRoles.length; i++) {
            if (getRoles[i].role != "1" && getRoles[i].role != "5") {
              this.getRoles.push(getRoles[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);
            this.$store.dispatch("Role", null);
          }
        });
    },
    getClass() {
      console.log("get classes");
      this.showLoader = true;
      http()
        .get("/getClassesList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.classList = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          // console.log("err====>", err);
        });
    },
    getSections(_id) {
      this.showLoader = true;
      http()
        .get(
          "/getSectionsList",
          { params: { classId: _id } },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          this.addSection = response.data.data;
          this.showSections = true;
          this.showLoader = false;
        })
        .catch(err => {
          this.showLoader = false;
          // console.log("err====>", err);
        });
    },
    getStudents() {
      this.showLoader = true;
      http()
        .get("/getStudentWithClass", {
          params: {
            classId: this.getReport.classId,
            sectionId: this.getReport.sectionId
          }
        })
        .then(response => {
          this.getStudentsList = response.data.data;
          this.showStudents = true;
          this.showLoader = false;
        })
        .catch(error => {
          console.log("err====>", error);
          this.showLoader = false;
        });
    },
    getCards() {
      if (this.$refs.form.validate()) {
        this.showLoader = true;
        http()
          .get("/getIdCardDetail", {
            headers: {
              Authorization: "Bearer " + this.token
            },
            params: {
              profileId: this.getReport._id,
              role: this.getReport.role
            }
          })
          .then(response => {
            this.getCard = "";
            var data = response.data.data;
            if (
              Object.keys(data.adminData).length != 0 &&
              data.adminData.constructor === Object
            ) {
              this.getCard = response.data.data.adminData;
              console.log("this.getCard ", this.getCard);
            }
            if (
              Object.keys(data.teachersData).length != 0 &&
              data.teachersData.constructor === Object
            ) {
              this.getCard = response.data.data.teachersData;
              console.log("this.getCard--teachersData ", this.getCard);
            }
            if (
              Object.keys(data.studentData).length != 0 &&
              data.studentData.constructor === Object
            ) {
              this.getCard = response.data.data.studentData;
              console.log("this.getCard--studentData ", this.getCard);
            }
            if (
              Object.keys(data.usersData).length != 0 &&
              data.usersData.constructor === Object
            ) {
              this.getCard = response.data.data.usersData;
              console.log("this.getCard--usersData   ", this.getCard);
            }
            // console.log("this.getCard--all ", response.data.data);
            this.showLoader = false;
            this.showReport = true;
          })
          .catch(error => {
            this.showLoader = false;
            console.log("error", error.response.data.errors);
            if (error.response.data.errors) {
              this.snackbar = true;
              this.text = " Field is required";
              this.color = "error";
            }
          });
      }
    },
    getTeacherList() {
      this.showLoader = true;
      var token = this.$store.state.token;
      http()
        .get("/getTeachersList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.teacherList = 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);
          }
        });
    },
    getUsersList(role) {
      this.showLoader = true;
      var token = this.$store.state.token;
      http()
        .get("/getUsersList?role=" + role, {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.Users = 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);
          }
        });
    },
    getParentDetails() {
      http()
        .get("getParentsList", {
          headers: {
            Authorization: "Bearer " + this.$store.state.token
          }
        })
        .then(response => {
          this.parentsList = response.data.data;
        })
        .catch(error => {
          // console.log("err====>", error.response.data.message);
          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>
.Data {
  width: 100%;
  float: left;
  margin-bottom: 0px;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 5px;
  text-align: justify;
}
.idcardreport {
  font-family: arial;
  max-width: 794px;
  max-height: 1123px;
  margin-left: auto;
  margin-right: auto;
  -webkit-print-color-adjust: exact;
}
.idcardreport1 {
  text-align: center;
  margin-left: 35%;
}
.icard-front {
  margin: 3px;
  float: left;
  padding: 10px;
  text-align: center;
  height: 520px;
  width: 520px;
  background: #fff;
  border: 1px solid lightgray;
}
.print-data {
  margin: 3px;
  float: left;
  /* border: 1px solid #000; */
  padding: 10px;
  /* width: 55%; */
  text-align: center;
  height: 95%;
}
.rightside {
  float: right !important;
}
.icard-front h2 {
  font-size: 30px;
}
.icard-back h2 {
  font-size: 30px;
}
.print-data h2 {
  font-size: 30px;
  text-align: center;
}
.print-data img {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}
.icard-front img {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}
.icard-back img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
.icard-img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 5px;
  border: 1px solid #ddd;
}
.icard-data {
  /* font-family: Arial; */
  max-width: 794px;
  max-height: 1123px;
  margin-left: auto;
  margin-right: auto;
  -webkit-print-color-adjust: exact;
}
.icard-back {
  margin: 3px;
  /* float: left; */
  /* border: 1px solid #000; */
  padding: 10px;
  /* width: 55%; */
  text-align: center;
  /* height: 95%; */
  /* margin-top: 35%; */
}
.back-icard {
  margin: 3px;
  padding: 10px;
}
.icard-back h3 {
  background-color: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px 0px;
  margin: 5px;
  margin-top: 13px;
}
.icard-back h5 {
  font-size: 11px;
  color: #000;
  font-weight: bold;
  padding: 5px 0px;
}
/* .icard-back p {
  font-size: 15px;
  color: #000;
  font-weight: 500px;
  line-height: 17px;
} */
.school-address {
  /* width: 40%; */
  font-weight: 500px;
  color: #000;
}
.address {
  font-weight: 500px;
  color: #000;
  text-align: center;
}
.icard-bottom {
  padding-top: 5px;
  text-align: center;
}
.qrcode {
  float: left;
  width: 50%;
}
.qrcode img {
  width: 60px;
  height: 60px;
  margin-top: 15px;
}
.session {
  float: right;
  width: 70%;
  margin-top: 15px;
}
@media screen and (max-width: 360px) {
  .icard-front {
    width: 316px;
    height: 418px;
    float: inherit;
  }
  .icard-back {
    float: left;
  }
}
</style>