<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="(mark,i) in markData" :key="i">
                      <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="!mark.studentsMarks[0].studentId.profilePicUrl"
                              />
                              <img
                                :src="mark.studentsMarks[0].studentId.profilePicUrl"
                                v-else-if="mark.studentsMarks[0].studentId.profilePicUrl"
                              />
                            </v-avatar>
                          </v-flex>
                        </v-layout>
                        <v-layout>
                          <v-flex xs12 sm12>
                            <h3 class="text-xs-center">
                              <b>{{ mark.studentsMarks[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 class="py-0">
                            <h4 class="right">
                              <b>Roll No :</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="py-0">
                            <h4>{{ mark.studentsMarks[0].studentId.rollNo }}</h4>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6 class="py-0">
                            <h4 class="right">
                              <b>Class :</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="right py-0">
                            <h4>{{ mark.classId.classNum }}</h4>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6 class="right py-0">
                            <h4 class="right">
                              <b>Section :</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="right py-0">
                            <h4>{{ mark.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-card>
                <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-title
                  v-for="(markList,i) in markData"
                  :key="i"
                  class="subheading"
                >{{ markList.examId.examName }}</v-card-title>
                <table class="feeTypeTable tableRsponsive">
                  <tr class="info white--text">
                    <th rowspan="2">Subject</th>
                    <th
                      colspan="2"
                      v-for="(markDistribution,i) in markDistributions"
                      :key="i "
                    >{{ markDistribution.markDistributionId.distributionType}}</th>
                    <!-- <th colspan="2">ASSIGNMENT</th> -->
                    <th colspan="3">Total</th>
                  </tr>
                  <tr class="info white--text">
                    <th
                      class="bg-sky"
                      v-for="(markDistribution,i) in markDistributions"
                      :key="i"
                    >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
                    <th
                      class="bg-sky-light"
                      v-for="(markDistribution,i) in markDistributions"
                      :key="i"
                    >{{i === 0 ? 'Mark' : 'Highest Mark'}}</th>
                    <th class="bg-sky">Mark</th>
                    <th class="bg-purple">Point</th>
                    <th class="bg-skyDark">Grade</th>
                  </tr>
                  <!-- </tr> -->
                  <tr v-for="(mark,i) in markData" :key="i">
                    <td>{{ mark.classId.subjects[0].subjectName }}</td>
                    <td
                      v-for="(markDistribution,i) in markParticularDistributionData"
                      :key="i"
                    >{{ markDistribution }}</td>
                    <!-- <td>
                      10	
                    </td>
                    <td>
                      10	
                    </td>
                    <td>
                      83
                    </td>
                    <td>
                      8	
                    </td>
                    <td>B
                    </td>-->
                  </tr>
                  <!-- <tfoot>
                    <tr>
                      <td colspan="2">Total:</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tfoot>-->
                </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";

export default {
  data: () => ({
    showLoader: false,
    markData: [],
    token: "",
    markDistributions: [],
    markParticularDistributionData: []
  }),
  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 => {
          this.markData = response.data.data;
          for (let i = 0; i < this.markData.length; i++) {
            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.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>