<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 sm6 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 sm6 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 sm6 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
                  @click="getMarkReportList"
                  round
                  dark
                  :loading="loading"
                  class="right mt-3"
                >Get Report</v-btn>

              </v-flex>
            </v-layout>
          </v-flex>
        </v-form>

      </v-card>

      <v-container grid-list-md v-show="showReport">
        <!-- {{ filterData }} -->

        <v-layout>

          <v-flex xs12 sm12 v-if="filterData != {}">

            <v-btn class="add-button" round 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>

            <!-- ****** 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-if="index === 0">

                  <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important">
                    <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" />
                    <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" />
                  </v-flex>
                </v-layout>

                <v-layout style="padding-top:10px" v-if="index === 0">

                  <v-flex xs5>
                    <p style="margin:0px;margin-bottom:4px">
                      <span style="font-size:20px">{{ userData.name }}</span>
                      <br />
                      <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
                    </p>
                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                    >phone : {{ userData.mobile }}</p>
                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                    >Email : {{ userData.email }}</p>
                  </v-flex>
                  <v-flex xs5>
                    <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;"
                    >Roll NO : {{ value[0].studentId.rollNo }}</p>
                    <p
                      style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
                    >Section : {{ value[0].sectionId.name }}</p>
                  </v-flex>
                  <v-flex xs2>
                    <v-avatar size="100">
                      <img
                        :src="value[0].studentId.profilePicUrl"
                        v-if="value[0].studentId.profilePicUrl"
                        width="100px"
                      />
                      <img
                        src="/static/icon/user.png"
                        v-else-if="!value[0].studentId.profilePicUrl"
                        width="100px"
                      />
                    </v-avatar>
                  </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; 
                    display: block;"
                    

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

                      <!-- <td
                        v-for="(exam,i) in value[index].studentsMarks"
                        colspan="2"
                        style="border: 1px solid lightgrey !important;padding: 10px;"
                      >{{ exam.markDistributionId.distributionType }}</td>-->

                      <template v-for="studentData in  value">

                        <td
                          colspan="2"

                          v-for="studentMark in studentData.studentsMarks"
                        >{{ studentMark.markDistributionId.distributionType }}</td>

                      </template>
                      <!-- <td>{{value[0].studentsMarks[1].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 style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                        <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</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>
                      <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>

                  <!-- <tfoot>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Total Amount (RS) :</span>
                      </td>
                      <td>{{ feeType.subTotal }}</td>
                    </tr>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Paid (RS) :</span>
                      </td>
                      <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
                    </tr>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Balance (RS) :</span>
                      </td>
                      <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                    </tr>
                  </tfoot>-->

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

  </template>
  
  <script>
  import http from "@/Services/http.js";
  import moment from "moment";

  import _ from "underscore";

  
  export default {
    data: () => ({

      showLoader: false,

      markData: [],
      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: {}

    }),

    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 => {
            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;
        http()
          .get("/getParticularMark", {
            params: { studentId: this.getReport.studentId },
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {

            this.showLoader = false;

            let newData = response.data.data;

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

            for (var i = 0; i < newData.length; i++) {
              newData[i].examination = newData[i].examId._id;

              // console.log("newData[i].examination", newData[i].examination);

            }
            this.filterData = _.groupBy(newData, ["examination"]);

            for (let data in this.filterData) {

              // console.log("data+++++++++++++++++++++++++++++++++++", data);

              for (let item in this.filterData[data]) {

                console.log(
                  "filterData[data]==========================>",
                  this.filterData[data]
                );
                console.log("filterData[item]==========================>", item);

                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 total = 0;
                // total += this.filterData[data][item].totalMarks  ;
                // console.log("total", total);

              }
            }

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

      },
      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: 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> s