<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" round dark @click="printProgressReport()">

                          Print
                          <v-icon right dark>print</v-icon>
                        </v-btn>
                      </v-flex>
                    </v-layout>

                    <div>
                      <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
                        <!-- <v-flex xs12  flat> -->
                        <!-- {{value}}---{{id}}---{{index}} -->

                        <v-card

                          id="printMe"
                          class="ma-3"
                          style="
                          border: 1px solid lightgrey;
                          margin-bottom:14px;
                          padding:20px"

                        >

                          <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: 10px;"
                                >
                                  <v-flex xs12 sm12 md12>
                                    <v-layout>
                                      <div class="school-logo">
                                        <v-avatar>
                                          <img
                                            :src="userData.schoolLogoUrl"
                                            v-if="userData.schoolLogoUrl"
                                          />
                                          <img
                                            src="/static/schoolIcons/INTRACK_White.png"
                                            v-else-if="!userData.schoolLogoUrl"
                                          />
                                        </v-avatar>
                                      </div>
                                      <div class="school-name">
                                        <h2>{{ userData.name }}</h2>
                                      </div>
                                    </v-layout>
                                  </v-flex>
                                </div>
                                <!-- Profile School -->

                                <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; ">

                                  <v-layout>
                                    <v-flex
                                      xs5

                                      sm5
                                      md5
                                      lg5

                                      style="padding: 4px;    
                                      padding-left: 16px !important;"
                                    >
                                      <p
                                        style="font-size:20px;margin-bottom: 16px;"
                                      >{{ userData.name }}</p>
                                      <p
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                      >{{ userData.address }}</p>
                                      <p
                                        style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"

                                      >Phone : {{ userData.mobile }}</p>

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

                                      >Email : {{ userData.email }}</p>

                                    </v-flex>
                                    <!-- Profile Student Report Card-->

                                    <v-flex xs5 sm5 md5 lg5>

                                      <div v-for="(studentMark,i,index) in value" :key="index">
                                        <p
                                          v-if="index == 0"
                                          style="font-size:20px;margin-bottom: 16px;"
                                        >{{ 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>
                                    </v-flex>

                                    <v-flex xs2 sm2 md2 lg2>

                                      <div v-for="(studentMark,i,index) in value" :key="index">
                                        <v-avatar
                                          size="100"
                                          style="margin-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"
                                          />
                                          <img
                                            :src="studentMark[0].studentId.profilePicUrl"
                                            v-else-if="studentMark[0].studentId.profilePicUrl"
                                          />
                                        </v-avatar>
                                      </div>
                                    </v-flex>
                                  </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;"

                            >
                              <!-- {{studentMark}} -->
                              <!-- <div

                            style="overflow-x:auto;    
                          border: 1px solid lightgrey !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: 6px;"
                                    >Subject</td>
                                    <template>
                                      <td
                                        v-for="(studentMarkData,i) in studentMark.studentsMarks"
                                        :key="i"
                                        colspan="2"
                                        style="border: 1px solid lightgrey !important;padding: 6px;"
                                      >{{studentMarkData.markDistributionId.distributionType}}</td>
                                      <td
                                        style="border: 1px solid lightgrey !important;padding: 6px;"
                                      >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: 6px;"
                                      >Marks</td>
                                      <td
                                        :key="ind"
                                        style="border: 1px solid lightgrey !important;padding: 6px;"
                                      >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: 6px;"
                                    >{{studentMark.subjectName}}</td>
                                    <template v-for="(exam, index) in  studentMark.studentsMarks">
                                      <td
                                        :key="index"
                                        style="border: 1px solid lightgrey !important;padding: 6px;"
                                      >{{exam.marksScored}}</td>
                                      <td
                                        :key="index"
                                        style="border: 1px solid lightgrey !important;padding: 6px;"
                                      >{{exam.markDistributionId.markValue}}</td>
                                    </template>

                                    <td

                                      style="border: 1px solid lightgrey !important;padding: 6px;"
                                    >{{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: 6px;"

                                    >Total Marks</td>

                                    <td

                                      colspan="7"
                                      style="border: 1px solid lightgrey !important;padding: 6px;"
                                    >{{ studentMark.allSubjectTotalMarks }}</td>
                                  </tr>
                                  <tr>
                                    <td
                                      colspan="5"
                                      class="subheding"
                                      style="    
                                      border: 1px solid #e2e7eb;
                                      text-align:center
                                      padding: 6px;"
                                    >Grade</td>
                                    <td
                                      colspan="7"
                                      style="border: 1px solid lightgrey !important;padding: 6px;"
                                    >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
                                  </tr>
                                  <tr>
                                    <td
                                      colspan="5"
                                      style="
                                       border: 1px solid #e2e7eb;
                                      text-align:center
                                      padding: 6px;"
                                      class="subheding"
                                    >Average Mark</td>

                                    <td

                                      colspan="7"
                                      style="border: 1px solid lightgrey !important;padding: 6px;"
                                    >-</td>
                                  </tr>
                                  <tr>

                                    <td

                                      colspan="5"
                                      style="
                                      border: 1px solid #e2e7eb;
                                      text-align:center
                                      padding: 6px; !important;
                                      font-size: 16px !important;"
                                      class="subheding"
                                    >GPA</td>

                                    <td

                                      colspan="7"
                                      style="border: 1px solid lightgrey !important;padding: 6px !important;font-size: 16px !important;"
                                    >-</td>
                                  </tr>
                                </tfoot>
                              </table>
                              <!-- </div> -->
                            </v-card>

                          </div>

                        </v-card>

                        <!-- </v-flex> -->
                      </card>
                    </div>
                    <p style="page-break-after: always;">&nbsp;</p>

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

      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;

            // console.log("getSectionsList=====>", response.data.data);

          })
          .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 => {

            this.cardData = response.data.data;

            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() {

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

          });

      }

    }
  };
  </script>

  <style scoped>

  table {
    border-collapse: collapse;
    border: 1px solid #e2e7eb;
  }
  
  th,
  td {
    border: 1px solid #e2e7eb;

    padding: 6px;

    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