<template>
  <v-app id="pages-dasboard">
    <!-- ****** PROFILE MARK  ****** -->

    <v-container fluid grid-list-md>
      <v-flex xs12 sm12>
        <v-container fluid>
          <v-layout wrap>
            <v-flex xs12 sm12 md3 class="mt-4">
              <v-card flat>
                <v-toolbar dark class="fixcolors" flat>
                  <v-spacer></v-spacer>
                  <v-toolbar-title>
                    <h3>Profile</h3>
                  </v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-card-text>
                  <v-container>
                    <v-layout wrap v-for="(value, id, index) in filterData" v-if="index == 0">
                      <v-flex xs12>
                        <v-layout>
                          <v-flex
                            xs12
                            class="text-xs-center text-sm-center text-md-center text-lg-center"
                          >
                            <v-avatar size="100px">
                              <img
                                src="/static/icon/user.png"
                                v-if="!value[0].studentId.profilePicUrl"
                              />
                              <img
                                :src="value[0].studentId.profilePicUrl"
                                v-else-if="value[0].studentId.profilePicUrl"
                              />
                            </v-avatar>
                          </v-flex>
                        </v-layout>
                        <v-layout>
                          <v-flex xs12 sm12>
                            <h3 class="text-xs-center">
                              <b>{{ value[0].studentId.name }}</b>
                            </h3>
                            <p class="text-xs-center grey--text">Student</p>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6>
                            <h4 class="right py-0">
                              <b>Roll No:</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6>
                            <h4 class="py-0">{{ value[0].studentId.rollNo }}</h4>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6>
                            <h4 class="right py-0">
                              <b>Class:</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6>
                            <h4 class="py-0">{{value[0].classId.classNum }}</h4>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6 class="right">
                            <h4 class="right py-0">
                              <b>Section:</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="right">
                            <h4 class="py-0">{{ value[0].sectionId.name}}</h4>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-container>
                </v-card-text>
              </v-card>
            </v-flex>

            <!-- ****** TABLE DATA MARK  ****** -->

            <v-flex xs12 sm12 md9 class="mt-4">
              <v-toolbar dark class="fixcolors" flat>
                <v-spacer></v-spacer>
                <v-toolbar-title>
                  <h3>Mark</h3>
                </v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card v-for="(value, id, index) in filterData">
                <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
                <table class="mb-3 tableRsponsive feeTypeTable">
                  <thead>
                    <tr class="info white--text">
                      <td rowspan="2">Subject</td>
                      <td
                        colspan="2"
                        v-for="exam in value[index].studentsMarks"
                      >{{exam.markDistributionId.distributionType}}</td>
                      <td>Total</td>
                    </tr>
                    <tr v-for="(subject, ind) in value" v-if="ind == 0">
                      <template v-for="(exam, i) in subject.studentsMarks">
                        <td class="bg-sky white--text">Mark</td>
                        <td class="bg-sky-light white--text">Highest Mark</td>
                      </template>
                      <td class="bg-sky white--text">Mark</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="subject in value">
                      <td>{{subject.subjectName}}</td>
                      <template v-for="(exam, i) in subject.studentsMarks">
                        <td>{{exam.marksScored}}</td>
                        <td>{{exam.markDistributionId.markValue}}</td>
                      </template>
                      <td>{{subject.totalMarks}}</td>
                    </tr>
                  </tbody>
                </table>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-flex>
    </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";
import _ from "underscore";

export default {
  data: () => ({
    showLoader: false,
    markData: [],
    token: "",
    markDistributions: [],
    markParticularDistributionData: [],
    filterData: []
  }),
  mounted() {
    this.token = this.$store.state.token;
    this.getMarkList();
  },
  methods: {
    getMarkList() {
      this.showLoader = false;
      http()
        .get("/getParticularMark", {
          params: { studentId: this.$route.params.markId },
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          let newData = response.data.data;
          for (var i = 0; i < newData.length; i++) {
            newData[i].examination = newData[i].examId._id;
          }
          this.filterData = _.groupBy(newData, ["examination"]);
          console.log("check filtered data", this.filterData);
          for (let data in this.filterData) {
            // console.log("this.filterData[data].length", this.filterData[data]);
            for (let item in this.filterData[data]) {
              // console.log("check", this.filterData[data][item].studentsMarks);
              var totalMarks = 0;
              for (
                let i = 0;
                i < this.filterData[data][item].studentsMarks.length;
                i++
              ) {
                // console.log(
                //   "check data",
                //   this.filterData[data][item].studentsMarks[i]
                // );
                totalMarks += this.filterData[data][item].studentsMarks[i]
                  .marksScored;
              }
              this.filterData[data][item].totalMarks = totalMarks;
            }
          }
          // var aray = [];
          // this.markData = response.data.data;
          // for (let i = 0; i < this.markData.length; i++) {
          //   console.log(this.markData[i].examId.examName);
          //   let index = -1;

          //   aray.forEach((dat_, k) => {
          //     if (dat_.category == this.markData[i].examId.examName) {
          //       index = k;
          //     }
          //   });
          //   if (index == -1) {
          //     var obj = {
          //       category: this.markData[i].examId.examName,
          //       extraData: []
          //     };
          //     obj.extraData.push(this.markData[i]);
          //     aray.push(obj);
          //   } else {
          //     console.log("=o", this.markData[i]);
          //     //  aray[index].extraData =

          //     aray[index].extraData.push(this.markData[i]);
          //   }
          //   console.log("aray-", aray);

          // for (let j = 0; j < this.markData[i].studentsMarks.length; j++) {
          //   //  console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained)

          //   this.markDistributions = this.markData[i].studentsMarks[
          //     j
          //   ].marksObtained;
          //   for (
          //     let k = 0;
          //     k < this.markData[i].studentsMarks[j].marksObtained.length;
          //     k++
          //   ) {
          //     this.markParticularDistributionData.push(
          //       this.markData[i].studentsMarks[j].marksObtained[k].marksScored
          //     );
          //     this.markParticularDistributionData.push(
          //       this.markData[i].studentsMarks[j].marksObtained[k]
          //         .markDistributionId.markValue
          //     );
          //     // console.log(
          //     //   "this.markParticularDistributionData",
          //     //   this.markParticularDistributionData
          //     // );
          //   }
          // }
          // }
          // this.markData = aray;
          // console.log("aray-2", aray);
          // 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);
          }
        });
    }
  }
};
</script>

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

th,
td {
  border: 1px solid #e2e7eb;
  padding: 10px;
  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;
}
@media screen and (max-width: 380px) {
  .tableRsponsive {
    display: block;
    position: relative;
    overflow: scroll;
  }
}
</style>