<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