<template>
  <v-container fluid class="body-color">
    <!-- ******  Progress Card Report Table****** -->
    <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 lg3>
              <v-layout>
                <v-flex xs3 sm3 lg2 class="subheading mt-4">
                  <label class="right">Class:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    v-model="getReport.classId"
                    label="Select your class"
                    type="text"
                    :items="classList"
                    item-text="classNum"
                    item-value="_id"
                    :rules="classRules"
                    @change="getSections(getReport.classId)"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3>
              <v-layout>
                <v-flex xs3 sm3 lg2 class="subheading mt-4">
                  <label class="right">Section:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    :items="addSection"
                    label="Select your Section"
                    v-model="getReport.sectionId"
                    item-text="name"
                    item-value="_id"
                    name="Select Section"
                    @change="getStudents"
                    :rules="sectionRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3>
              <v-layout>
                <v-flex xs3 sm3 lg2 class="subheading mt-4">
                  <label class="right">Student:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    :items="getStudentsList"
                    label="Select your student"
                    v-model="getReport.studentId"
                    item-text="name"
                    item-value="_id"
                    :rules="studentRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3>
              <v-btn
                style="margin: auto;
                display: block;"
                @click="getMarkReportList"
                round
                dark
                :loading="loading"
                class="open-dialog-button mt-3"
              >Get Report</v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-form>
    </v-card>

    <v-layout v-show="showReport">
      <v-flex xs12>
        <v-card class="transparent elevation-0">
          <v-container grid-list-md class="report">
            <v-flex xs12 sm12>
              <v-layout wrap>
                <!-- ****** TABLE DATA MARK  ****** -->
                <v-flex xs12 sm12 md12>
                  <v-layout>
                    <v-flex xs12>
                      <v-btn
                        class="open-dialog-button"
                        :loading="printLoader"
                        round
                        dark
                        @click="printProgressReport()"
                      >
                        Print
                        <v-icon right dark>print</v-icon>
                      </v-btn>
                    </v-flex>
                  </v-layout>
                  <div id="printMe">
                    <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
                      <v-card
                        class="ma-3"
                        style="
                        border: 1px solid lightgrey;
                        margin-bottom:0px;
                        padding: 0px"
                      >
                        <div style="border: 1px solid lightgray;">
                          <v-layout>
                            <v-flex xs12 sm12 md12>
                              <div
                                style="    
                              border-bottom: 1px solid #ddd;
                              overflow: hidden;
                              vertical-align: middle;
                              margin: 10px;
                              padding-bottom: 0px;"
                              >
                                <!-- <v-flex xs12 sm12 md12> -->
                                <v-layout>
                                  <div class="school-logo">
                                    <img
                                      :src="userData.schoolLogoUrl"
                                      v-if="userData.schoolLogoUrl"
                                      style="width:40px !important;height:40px !important; float: left;"
                                    />
                                    <img
                                      src="/static/schoolIcons/INTRACK_White.png"
                                      v-else-if="!userData.schoolLogoUrl"
                                      style="width:40px !important;height:40px !important; float: left;"
                                    />
                                  </div>
                                  <div class="school-name">
                                    <h3>{{ schoolData.name }}</h3>
                                  </div>
                                </v-layout>
                                <!-- </v-flex> -->
                              </div>
                              <!-- Profile School -->
                              <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; ">
                                <v-layout>
                                  <div
                                    style="flex-basis: 40%;
                                      -webkit-box-flex: 0;
                                      -ms-flex-positive: 0;
                                      flex-grow: 0;
                                      max-width: 40%;"
                                  >
                                    <div
                                      style="padding: 4px;    
                                    padding-left: 16px !important;"
                                    >
                                      <p
                                        style="font-size:20px;margin-bottom: 0px;"
                                      >{{ schoolData.name }}</p>
                                      <p
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >{{ schoolData.address }}</p>
                                      <p
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >Phone : {{ schoolData.mobile }}</p>
                                      <p
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >Email : {{ schoolData.email }}</p>
                                    </div>
                                  </div>
                                  <!-- Profile Student Report Card-->
                                  <div
                                    style="flex-basis: 40%;
                                      -webkit-box-flex: 0;
                                      -ms-flex-positive: 0;
                                      flex-grow: 0;
                                      max-width: 40%;"
                                  >
                                    <div v-for="(studentMark,i,index) in value" :key="index">
                                      <p
                                        v-if="index == 0"
                                        style="font-size:20px;margin-bottom: 0px;"
                                      >{{ studentMark[0].studentId.name }}</p>
                                      <p
                                        v-if="index == 0"
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >
                                        Class :
                                        <b>{{ studentMark[0].classId.classNum }}</b>
                                      </p>
                                      <p
                                        v-if="index == 0"
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >
                                        Section :
                                        <b>{{ studentMark[0].sectionId.name }}</b>
                                      </p>
                                      <p
                                        v-if="index == 0"
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >
                                        Roll NO :
                                        <b>{{ studentMark[0].studentId.rollNo }}</b>
                                      </p>
                                    </div>
                                  </div>
                                  <div
                                    style="
                                        -ms-flex-preferred-size: 20%;
                                        flex-basis: 20%;
                                        -webkit-box-flex: 0;
                                        -ms-flex-positive: 0;
                                        flex-grow: 0;
                                        max-width: 20%;"
                                  >
                                    <div v-for="(studentMark,i,index) in value" :key="index">
                                      <div
                                        style="padding-top:16px"
                                        v-if="index == 0"
                                        class="hidden-sm-only hidden-xs-only"
                                      >
                                        <img
                                          src="/static/icon/user.png"
                                          v-if="!studentMark[0].studentId.profilePicUrl"
                                          style="width:60px;height:60px;"
                                        />
                                        <img
                                          :src="studentMark[0].studentId.profilePicUrl"
                                          v-else-if="studentMark[0].studentId.profilePicUrl"
                                          style="width:60px;height:60px;"
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </v-layout>
                              </v-flex>
                            </v-flex>
                          </v-layout>
                          <v-card
                            v-for="studentMarks in value"
                            :key="studentMarks"
                            style="    
                           background-color: #fff;
                           border-color: #fff;
                           color: rgba(0,0,0,0.87);
                           overflow-x: auto;
                           display: block;
                           webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
                           box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
                          >
                            <table
                              v-for="(studentMark,key) in studentMarks"
                              :key="key"
                              class="tableRsponsive feeTypeTable subheading"
                              style="border: 1px solid black;
                             border-collapse: collapse;!important
                             table-layout: auto !important;
                             width: 100% !important;
                             overflow: hidden;"
                            >
                              <thead
                                style="border: 1px solid transparent !important"
                                v-if="key == 0"
                              >
                                <tr style="border: 1px solid transparent !important">
                                  <td
                                    colspan="4"
                                    style="text-align: inherit !important;
                                    border-right: inherit;
                                    border-top: inherit;
                                    padding:14px;"
                                  >{{studentMark.examId.examName}}</td>
                                </tr>
                                <tr style="border: 1px solid lightgrey !important;padding:4px;">
                                  <td
                                    rowspan="2"
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >Subject</td>
                                  <template>
                                    <td
                                      v-for="(studentMarkData,i) in studentMark.studentsMarks"
                                      :key="i"
                                      colspan="2"
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >{{studentMarkData.markDistributionId.distributionType}}</td>
                                    <td
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >Total Marks</td>
                                  </template>
                                </tr>
                                <tr style="border: 1px solid lightgrey !important;">
                                  <template v-for="(exam, ind) in studentMark.studentsMarks">
                                    <td
                                      :key="ind"
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >Marks</td>
                                    <td
                                      :key="ind"
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >Highest Marks</td>
                                  </template>
                                </tr>
                              </thead>
                              <tbody
                                style="border: 1px solid lightgrey !important;"
                                v-if="key == 0"
                              >
                                <tr v-for="studentMark in studentMarks" :key="studentMark">
                                  <td
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >{{studentMark.subjectName}}</td>
                                  <template v-for="(exam, index) in  studentMark.studentsMarks">
                                    <td
                                      :key="index"
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >{{exam.marksScored}}</td>
                                    <td
                                      :key="index"
                                      style="border: 1px solid lightgrey !important;padding: 0px;"
                                    >{{exam.markDistributionId.markValue}}</td>
                                  </template>
                                  <td
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >{{studentMark.totalMarks}}</td>
                                </tr>
                              </tbody>
                              <tfoot v-if="key == studentMarks.length - 1">
                                <tr style="border: 1px solid lightgrey !important;">
                                  <td
                                    colspan="5"
                                    class="subheding"
                                    style="    
                                    border: 1px solid #e2e7eb;
                                    text-align:center
                                    padding: 0px;"
                                  >Total Marks</td>
                                  <td
                                    colspan="7"
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >{{ studentMark.allSubjectTotalMarks }}</td>
                                </tr>
                                <tr>
                                  <td
                                    colspan="5"
                                    class="subheding"
                                    style="    
                                    border: 1px solid #e2e7eb;
                                    text-align:center
                                    padding: 0px;"
                                  >Grade</td>
                                  <td
                                    colspan="7"
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
                                </tr>
                                <tr>
                                  <td
                                    colspan="5"
                                    style="
                                     border: 1px solid #e2e7eb;
                                    text-align:center
                                    padding: 0px;"
                                    class="subheding"
                                  >Average Mark</td>
                                  <td
                                    colspan="7"
                                    style="border: 1px solid lightgrey !important;padding: 0px;"
                                  >-</td>
                                </tr>
                                <tr>
                                  <td
                                    colspan="5"
                                    style="
                                    border: 1px solid #e2e7eb;
                                    text-align:center
                                    padding: 0px; !important;
                                    font-size: 16px !important;"
                                    class="subheding"
                                  >GPA</td>
                                  <td
                                    colspan="7"
                                    style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;"
                                  >-</td>
                                </tr>
                              </tfoot>
                            </table>
                          </v-card>
                        </div>
                      </v-card>
                      <p style="page-break-after: always;">&nbsp;</p>
                    </card>
                  </div>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
    <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";
import _ from "underscore";

export default {
  data: () => ({
    showLoader: false,
    cardData: [],
    token: "",
    markDistributions: [],
    markParticularDistributionData: [],
    loading: false,
    valid: true,
    loading: false,
    showReport: false,
    printLoader: false,
    addSection: [],
    filterData: [],
    getStudentsList: [],
    classRules: [(v) => !!v || "Class is required"],
    sectionRules: [(v) => !!v || "Class is required"],
    studentRules: [(v) => !!v || "Student is required"],
    getReport: {},
    classList: [],
    output: null,
    userData: {},
    newData: [],
    gradeAPlus: "A+",
    gradeA: "A",
    gradeBPlus: "B+",
    gradeB: "B",
    gradeCPlus: "C+",
    gradeC: "C",
    totalMarks: "",
  }),
  mounted() {
    this.token = this.$store.state.token;
    this.getClass();
    this.getUserData();
  },
  methods: {
    clear() {
      this.$refs.form.reset();
    },
    getClass() {
      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.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) => {
          response.data.data.unshift({
            name: "Select All",
            _id: "Select All",
          });
          this.getStudentsList = response.data.data;
          this.showLoader = false;
        })
        .catch((error) => {
          console.log("err====>", error);
          this.showLoader = false;
        });
    },
    getMarkReportList() {
      this.showLoader = true;
      this.showReport = true;
      var getSelectMarks = {};
      if (this.getReport.studentId == "Select All") {
        getSelectMarks = {
          classId: this.getReport.classId,
          sectionId: this.getReport.sectionId,
        };
      } else if (this.getReport.studentId != "Select All") {
        getSelectMarks = {
          classId: this.getReport.classId,
          sectionId: this.getReport.sectionId,
          studentId: this.getReport.studentId,
        };
      }
      http()
        .get("/getParticularMark", {
          params: getSelectMarks,
          headers: { Authorization: "Bearer " + this.token },
        })
        .then((response) => {
          console.log("===response===", response.data.data[0].schoolId);
          this.cardData = response.data.data;
          this.schoolData = response.data.data[0].schoolId;
          let newData = response.data.data;
          for (var i = 0; i < newData.length; i++) {
            newData[i].examination = newData[i].examId._id;
            newData[i].studentsId = newData[i].studentId._id;
          }
          var studentMarkArray = [];
          studentMarkArray = _.groupBy(newData, ["studentsId"]);
          for (let data in studentMarkArray) {
            studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
              "examination",
            ]);
          }
          this.filterData = studentMarkArray;
          for (let data in this.filterData) {
            for (let item in this.filterData[data]) {
              var allSubjectTotalMarks = 0;
              for (let i = 0; i < this.filterData[data][item].length; i++) {
                var totalMarks = 0;
                for (
                  let j = 0;
                  j < studentMarkArray[data][item][i].studentsMarks.length;
                  j++
                ) {
                  totalMarks +=
                    studentMarkArray[data][item][i].studentsMarks[j]
                      .marksScored;
                }
                this.filterData[data][item][i].totalMarks = totalMarks;

                allSubjectTotalMarks += this.filterData[data][item][i]
                  .totalMarks;
                this.filterData[data][item][
                  i
                ].allSubjectTotalMarks = allSubjectTotalMarks;
              }

              // this.totalMarks = totalMarks;
              if (totalMarks > 90) {
                this.filterData[data][item].grade = this.gradeAPlus;
              } else if (totalMarks > 80 && totalMarks < 90) {
                this.filterData[data][item].grade = this.gradeA;
              } else if (totalMarks > 70 && totalMarks < 80) {
                this.filterData[data][item].grade = this.gradeBPlus;
              } else if (totalMarks > 60 && totalMarks < 70) {
                this.filterData[data][item].grade = this.gradeB;
              } else if (totalMarks > 50 && totalMarks < 60) {
                this.filterData[data][item].grade = this.gradeCPlus;
              } else if (totalMarks > 40 && totalMarks < 50) {
                this.filterData[data][item].grade = this.gradeC;
              }
            }
          }
          // console.log("this.filterData-----------last", this.filterData);

          this.showLoader = false;
        })
        .catch((error) => {
          // console.log("err====>", err);
          this.showLoader = false;
          this.snackbar = true;
          // this.text = error.response.data.message;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    printProgressReport() {
      this.printLoader = true;
      setTimeout(() => {
        // Pass the element id here
        this.$htmlToPaper("printMe");
        this.printLoader = false;
      }, 4000);
    },
    getUserData() {
      http()
        .get("/getParticularUserDetail")
        .then((response) => {
          this.userData = response.data.data;
        })
        .catch((error) => {
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
  },
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  border: 1px solid #e2e7eb;
}

th,
td {
  border: 1px solid #e2e7eb;
  padding: 0px;
  text-align: center;
}
table.feeTypeTable {
  table-layout: auto !important;
  width: 100% !important;
}
.bg-sky {
  background-color: #98b2cc !important;
}
.bg-sky-light {
  background-color: #89a0b8;
}
.bg-purple {
  background-color: #9583ac;
}
.bg-skyDark {
  background-color: #956785;
}

/* .report {
  overflow: hidden;
  max-width: 794px;
  margin: 0px auto;
  margin-bottom: 10px;
  padding: 30px;
} */
.line {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  padding-bottom: 10px;
  vertical-align: middle;
  margin-bottom: 4px;
}
.school-logo {
  float: left;
}
.school-name {
  box-sizing: border-box;
}
.school-info {
  width: 100%;
  overflow: hidden;
}
.school-address {
  float: left;
  width: 40%;
}
.student-data {
  float: right;
  width: 40%;
}
.student-info {
  float: left;
}
@media screen and (max-width: 380px) {
  .tableRsponsive {
    /* display: block; */
    position: relative;
    overflow: scroll;
  }
}
</style> s