<template>
  <v-app id="pages-dasboard">
    <!-- ****** PROFILE MARK  ****** -->
    <v-container fluid grid-list-md>
      <v-layout>
        <v-flex xs12 sm12>
          <v-btn class="grey" dark @click="print()">
            Print
            <v-icon right dark>print</v-icon>
          </v-btn>
        </v-flex>
      </v-layout>
      <v-flex xs12 sm12 id="printMe">
        <v-layout wrap>
          <v-flex xs12 sm12 md3>
            <v-card class="fixcolors white--text" flat>
              <v-card-actions class="pa-0">
                <v-spacer></v-spacer>
                <v-card-title class="pa-2">
                  <h3>Profile</h3>
                </v-card-title>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
            <v-card flat>
              <v-layout
                wrap
                v-for="(value, id, index) in filterData"
                v-if="index == 0"
                :key="index"
              >
                <v-flex xs12 style="margin:16px;">
                  <v-layout>
                    <v-flex xs12>
                      <v-avatar
                        size="100px"
                        class="mx-auto"
                        style="margin: auto;display:block;margin-bottom:10px !important"
                      >
                        <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 style="text-align:center;">
                      <h3>
                        <b>{{ value[0].studentId.name }}</b>
                      </h3>
                      <p class="grey--text">Student</p>
                    </v-flex>
                  </v-layout>
                  <v-layout
                    style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
                     border-top-left-radius: 4px;"
                  >
                    <v-flex xs6 sm3 class="py-1">
                      <h4>
                        <b>RollNo</b>
                      </h4>
                    </v-flex>
                    <v-flex sm9 xs7 class="py-1">
                      <h4>: {{ value[0].studentId.rollNo }}</h4>
                    </v-flex>
                  </v-layout>
                  <v-layout style="border: 1px solid lightgrey;padding: 4px;">
                    <v-flex xs6 sm3 class="py-1">
                      <h4>
                        <b>Class</b>
                      </h4>
                    </v-flex>
                    <v-flex sm9 xs8 class="py-1">
                      <h4>: {{value[0].classId.classNum }}</h4>
                    </v-flex>
                  </v-layout>
                  <v-layout
                    style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
                     border-bottom-left-radius: 4px;"
                  >
                    <v-flex xs6 sm3 class>
                      <h4>
                        <b>Section</b>
                      </h4>
                    </v-flex>
                    <v-flex sm9 xs6 class>
                      <h4>: {{ value[0].sectionId.name}}</h4>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-layout v-if="filterData === []">
                <v-flex xs12>
                  <h5 class="text-xs-center pa-3">No Data Found</h5>
                </v-flex>
              </v-layout>
            </v-card>
          </v-flex>

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

          <v-flex xs12 sm12 md9>
            <v-card class="fixcolors white--text" flat>
              <v-card-actions class="pa-0">
                <v-spacer></v-spacer>
                <v-card-title class="pa-2">
                  <h3>Mark</h3>
                </v-card-title>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
            <v-card
              v-for="(value, id, index) in filterData"
              :key="index"
              flat
              style="border: 1px solid lightgrey;margin-bottom:14px;"
            >
              <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
              <table
                class="mb-5 tableRsponsive feeTypeTable"
                style="border: 1px solid lightgrey;
                  border-collapse: collapse;!important
                  table-layout: auto !important;
                  width: 100% !important;"
              >
                <thead style="border: 1px solid lightgrey !important;">
                  <tr
                    class="info white--text"
                    style="border: 1px solid lightgrey !important;padding:4px;"
                  >
                    <td
                      rowspan="2"
                      style="border: 1px solid lightgrey !important;padding: 10px;"
                    >Subject</td>
                    <td
                      colspan="2"
                      v-for="exam in value[index].studentsMarks"
                      style="border: 1px solid lightgrey !important;padding: 10px;"
                    >{{exam.markDistributionId.distributionType}}</td>
                    <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
                  </tr>
                  <tr
                    v-for="(subject, ind) in value"
                    v-if="ind == 0"
                    style="border: 1px solid lightgrey !important;"
                  >
                    <template v-for="(exam, i) in subject.studentsMarks">
                      <td
                        class="bg-sky white--text"
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >Mark</td>
                      <td
                        class="bg-sky-light white--text"
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >Highest Mark</td>
                    </template>
                    <td
                      class="bg-sky white--text"
                      style="border: 1px solid lightgrey !important;padding: 10px;"
                    >Mark</td>
                  </tr>
                </thead>
                <tbody style="border: 1px solid lightgrey !important;">
                  <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
                    <td
                      style="border: 1px solid lightgrey !important;padding: 10px;"
                    >{{subject.subjectName}}</td>
                    <template v-for="(exam, i) in subject.studentsMarks">
                      <td
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >{{exam.marksScored}}</td>
                      <td
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >{{exam.markDistributionId.markValue}}</td>
                    </template>
                    <td
                      style="border: 1px solid lightgrey !important;padding: 10px;"
                    >{{subject.totalMarks}}</td>
                  </tr>
                </tbody>
              </table>
            </v-card>
            <v-card v-if="filterData === []">
              <v-layout>
                <v-flex xs12>
                  <h5 class="text-xs-center pa-3">No Data Found</h5>
                </v-flex>
              </v-layout>
            </v-card>
          </v-flex>
        </v-layout>
      </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: true,
    nameShow: false,
    markData: [],
    token: "",
    markDistributions: [],
    markParticularDistributionData: [],
    filterData: [],
    output: null
  }),
  mounted() {
    this.token = this.$store.state.token;
    this.getMarkList();
  },
  methods: {
    getMarkList() {
      this.showLoader = true;
      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"]);
          for (let data in this.filterData) {
            for (let item in this.filterData[data]) {
              var totalMarks = 0;
              for (
                let i = 0;
                i < this.filterData[data][item].studentsMarks.length;
                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 {
          //     aray[index].extraData.push(this.markData[i]);
          //   }
          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);
          }
        });
    },
    print() {
      // Pass the element id here
      this.$htmlToPaper("printMe");
    }
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  border: 1px solid #e2e7eb;
}
th,
td {
  border: 1px solid #e2e7eb;
  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;
}
.loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.loader > div {
  position: relative;
  top: calc(50% - 16px);
}
@media screen and (max-width: 380px) {
  .tableRsponsive {
    display: block;
    position: relative;
    overflow: scroll;
  }
}
</style>