<template>
    <v-app id="pages-dasboard">

      <!-- ****** PROFILE MARK  ****** -->

      <v-container fluid grid-list-md>

        <v-layout>

          <v-flex xs12 sm8 md10>

            <v-btn class="open-dialog-button mt-3" round dark @click="print()">

              Print

              <v-icon size="18" right dark>print</v-icon>

            </v-btn>
          </v-flex>

          <v-flex xs12 sm4 md2 class="right">
            <v-select
              class
              :items="selectMark"
              label="Select"
              v-model="selectMarkList"
              @change="selectMarkData(selectMarkList)"
            ></v-select>
          </v-flex>

        </v-layout>
        <v-flex xs12 sm12 id="printMe">
          <v-layout wrap>

            <!-- ****** TABLE DATA MARK  ****** -->
            <v-flex xs12 sm12 md12>

              <v-card

                v-for="(value, id, index) in filterData"
                :key="index"
                flat

                style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"

              >

                <v-layout>

                  <v-flex xs12 sm12 md12 class="text-xs-center">

                    <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                    <p class="title">{{ userData.name }}</p>
                    <p>{{ userData.address }}</p>

                  </v-flex>

                  <!-- <v-flex xs12 sm12 md12 class="text-xs-center">

                    <v-avatar size="80px">
                      <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>

                    <p
                      style="font-size:20px;margin:0px;margin-bottom:4px;"
                    >{{ value[0].studentId.name }}</p>
                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"

                    > Class : {{ value[0].classId.classNum }}</p>

                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"

                    > Section : {{ value[0].sectionId.name }}</p>

                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"

                    > Roll No : {{ value[0].studentId.rollNo }}</p>

                  </v-flex>-->
                </v-layout>
                <v-layout wrap>
                  <v-flex xs12 sm12 md12 class="text-xs-center">
                    <v-card class="student-card" xs6 sm6 md6>
                      <v-avatar>
                        <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>
                      <p
                        style="font-size:20px;margin:0px;margin-bottom:4px;"
                      >{{ value[0].studentId.name }}</p>
                      <p
                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                      >Class : {{ value[0].classId.classNum }}</p>
                      <p
                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                      >Section : {{ value[0].sectionId.name }}</p>
                      <p
                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                      >Roll No : {{ value[0].studentId.rollNo }}</p>
                    </v-card>
                    <v-card class="student-table" xs6 sm6 md6>
                      <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
                      <table
                        class="mb-5 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 lightgrey !important;">
                          <tr style="border: 1px solid lightgrey !important;padding:4px;">
                            <td
                              rowspan="2"
                              style="border: 1px solid lightgrey !important;padding: 10px;"
                            >Subject</td>
                            <template v-for="studentData in  value">
                              <td
                                colspan="2"
                                v-for="studentMark in studentData.studentsMarks"
                                style="border: 1px solid lightgrey !important;padding: 10px;"
                              >{{studentMark.markDistributionId.distributionType}}</td>
                              <td
                                style="border: 1px solid lightgrey !important;padding: 10px;"
                              >Total Marks</td>
                            </template>
                          </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 style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td>
                              <td
                                style="border: 1px solid lightgrey !important;padding: 10px;"
                              >Highest Marks</td>
                            </template>
                            <!-- <td 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>-->
                            <td style="border: 1px solid lightgrey !important;padding: 10px;"></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-flex>
                </v-layout>

                <!-- <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;

                    overflow: hidden;"

                >
                  <thead style="border: 1px solid lightgrey !important;">

                    <tr style="border: 1px solid lightgrey !important;padding:4px;">

                      <td
                        rowspan="2"
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >Subject</td>

                      <template v-for="studentData in  value">
                        <td
                          colspan="2"
                          v-for="studentMark in studentData.studentsMarks"
                          style="border: 1px solid lightgrey !important;padding: 10px;"
                        >{{studentMark.markDistributionId.distributionType}}</td>

                        <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td>

                      </template>

                    </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 style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td>

                        <td
                          style="border: 1px solid lightgrey !important;padding: 10px;"
                        >Highest Marks</td>

                      </template>

                      <td 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>

                      <td style="border: 1px solid lightgrey !important;padding: 10px;"></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-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,

      showMark: true,
      showGrade: false,

      markData: [],
      token: "",
      markDistributions: [],

      markParticularDistributionData: [],

      filterData: [],

      output: null,
      gradeAPlus: "A+",
      gradeA: "A",
      gradeBPlus: "B+",
      gradeB: "B",
      gradeCPlus: "C+",
      gradeC: "C",
      selectMarkList: "Mark",
      selectMark: ["Mark", "Grade"],

      MarkData: "",
      userData: {}

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

      this.getUserData();

    },
    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;

            let newData = response.data.data;

            // console.log("newData", newData);

            for (var i = 0; i < newData.length; i++) {
              newData[i].examination = newData[i].examId._id;
            }
            this.filterData = _.groupBy(newData, ["examination"]);

            // console.log("this.filterData", this.filterData);

            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++

                ) {

                  // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
                  //   .marksScored)

                  totalMarks += this.filterData[data][item].studentsMarks[i]
                    .marksScored;

                }

                this.filterData[data][item].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;
                }

              }
            }

            this.showLoader = false;

          })
          .catch(error => {

            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");

      },

      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);
            // }

          });
      },

      selectMarkData(select) {
        if (select == "Mark") {
          this.showMark = true;
          this.showGrade = false;
        } else if (select == "Grade") {
          this.showGrade = true;
          this.showMark = false;
        }

      }
    }
  };
  </script>
  
  <style scoped>

  .student-card {
    float: left;
    width: 20%;
    height: 70%;
  }
  .student-table {
    margin-left: 28%;
    height: -webkit-fill-available;
  }

  .add-button {
    background: #feb83c !important;
    border-color: #feb83c !important;
    text-transform: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  .card-styles {
    background: #7f62f8 !important;
    border-color: #7f62f8 !important;
  }
  .open-dialog-button {
    background: #827bfa !important;
    border-color: #827bfa !important;
    text-transform: none !important;
  }

  /* 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>