<template>
    <v-container fluid class="body-color">
      <!-- ****** STUDENTS TABLE ****** -->
      <v-toolbar color="transparent" flat>
        <v-spacer></v-spacer>
        <v-flex xs12 sm4 md2>
          <v-select
            small
            :items="addclass"
            label="Select Class"
            v-model="getReport.classId"
            item-text="classNum"
            item-value="_id"
            name="Select Class"
            @change="getCourses(getReport.classId)"
            class="mr-2"
            required
          ></v-select>
        </v-flex>
        <v-flex xs12 sm4 md2>
          <v-select
            :items="courseData"
            label="Select Course"
            v-model="getReport.courseId"

            item-text="courseName"

            item-value="_id"
            required
            class="ml-2"
            @change="getStudentTable(getReport.courseId)"
          ></v-select>
        </v-flex>
        <v-card-title class="body-1" v-show="show">
          <v-btn icon large flat @click="displaySearch">
            <v-avatar size="27">
              <img src="/static/icon/search.png" alt="icon" />
            </v-avatar>
          </v-btn>
        </v-card-title>
        <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
          <v-layout>
            <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
            <v-icon @click="closeSearch" color="error">close</v-icon>
          </v-layout>
        </v-flex>
      </v-toolbar>
      <v-data-table
        :headers="headers"
        :items="studentsData"
        :pagination.sync="pagination"
        :search="search"
        select-all
        v-model="selected"
        item-key="name"
      >
        <template slot="items" slot-scope="props">
          <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
            <td class="text-xs-center td td-row">
              <v-checkbox

                v-model="props.item.enroll"
                @change="selectParticularStudent(props.item)"

                primary
                hide-details
              ></v-checkbox>
            </td>
            <td class="text-xs-center td td-row">
              <v-avatar size="40">
                <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
              </v-avatar>
            </td>
            <td class="text-xs-center td td-row">{{ props.item.name}}</td>
            <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
            <td class="text-xs-center td td-row">{{ props.item.email }}</td>
          </tr>
        </template>
        <template slot="headers" slot-scope="props">
          <tr>
            <th>
              <v-checkbox
                :input-value="props.all"
                :indeterminate="props.indeterminate"
                primary
                hide-details
                @click.native="toggleAll"
              ></v-checkbox>
            </th>
            <th
              v-for="header in props.headers"
              :key="header.text"
              :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              <v-icon small>arrow_upward</v-icon>
              {{ header.text }}
            </th>
          </tr>
        </template>
        <v-alert
          slot="no-results"
          :value="true"
          color="error"
          icon="warning"
        >Your search for "{{ search }}" found no results.</v-alert>
      </v-data-table>
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        color="success"
      >{{ text }}</v-snackbar>
      <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";
  
  export default {
    data: () => ({
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      show: true,
      showSearch: false,
      showLoader: false,
      loading: false,
      date: null,
      search: "",
      addclass: [],
      pagination: {
        rowsPerPage: 10
      },
      headers: [
        {
          text: "Profile Pic",
          value: "profilprofilePicUrlePicUrl",
          sortable: false,
          align: "center"
        },
        { text: "Name", value: "name", sortable: false, align: "center" },
        {
          text: "Mobile No",
          value: "fatherCellNo",
          sortable: false,
          align: "center"
        },
        { text: "Email", value: "email", sortable: false, align: "center" }
        // { text: "Action", value: "", sortable: false, align: "center" }
      ],
      token: "",
      selectStudents: {
        select: "",
        selectSection: ""
      },
  
      role: "",
      schoolRole: "",
      menu: false,
      valid: true,
  
      getReport: {},
      studentsData: [],
      courseData: [],
      addSection: [],

      selected: []

    }),
    methods: {
      save(date) {
        this.$refs.menu.save(date);
      },
      getAllClass() {
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.addclass = response.data.data;
          })
          .catch(error => {
            // console.log("err====>", err);
            // this.$router.replace({ path: "/" });
          });
      },
      getCourses(classId) {
        this.showLoader = true;
        http()
          .get("/getCourseesList", {
            params: {
              classId: classId
            }
          })
          .then(response => {
            this.courseData = response.data.data;
            this.showLoader = false;
          })
          .catch(err => {
            console.log("err====>", err);
            this.showLoader = false;
          });
      },
      getStudents() {
        this.showLoader = true;
        http()
          .get("/getStudentsList", {
            params: {
              classId: this.getReport.classId
            }
          })
          .then(response => {
            this.studentsData = response.data.data;
            this.showLoader = false;
            // this.addStudentAttendenceDialog = false;
            var attendence = "";
            for (let i = 0; i < this.studentsData.length; i++) {
              this.studentsData[i].attendence = true;
            }

            this.getParticularCourse();

          })
          .catch(error => {
            console.log("err====>", error);
            this.showLoader = false;
          });
      },
      getStudentTable(id) {

        // console.log("id", this.getReport.courseId);

        this.getStudents();
      },
      update() {
        var studentsAttendence = [];
        for (var j = 0; j < this.studentsData.length; j++) {
          studentsAttendence.push({
            studentId: this.studentsData[j]._id,
            isPresent: this.studentsData[j].attendence
          });
        }
        if (this.$refs.form.validate()) {
          let attendanceData = {
            sectionId: this.getReport.sectionId,
            date: this.date,
            students: studentsAttendence
          };
          http()
            .put("/updateAttendance", attendanceData)
            .then(response => {
              this.snackbar = true;
              this.text = response.data.message;
              this.addStudentAttendenceDialog = false;
            })
            .catch(error => {
              this.snackbar = true;
              this.text = error.response.data.message;
            });
        }
      },
      toggleAll() {
        if (this.selected.length) this.selected = [];
        else this.selected = this.studentsData.slice();

        let selectedStudentsArray = [];

        for (let i = 0; i < this.selected.length; i++) {
          selectedStudentsArray.push({ studentId: this.selected[i]._id });
        }
        // console.log("selectedStudentsArray", selectedStudentsArray);

        var payload = {
          courseId: this.getReport.courseId,
          enrollStudents: selectedStudentsArray
        };
        http()
          .put("/enrollStudents", payload)
          .then(response => {
            this.snackbar = true;
            this.text = response.data.message;

            this.getParticularCourse();

          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
          });
      },
      selectParticularStudent(selected) {

        console.log("selected", selected);

        let selectedStudentsArray = [];

        selectedStudentsArray.push({ studentId: selected._id });

        // console.log("selected.enroll", selected.enroll);
        if (selected.enroll === true) {

          var payload = {
            courseId: this.getReport.courseId,
            enrollStudents: selectedStudentsArray
          };
          http()
            .put("/enrollStudents", payload)
            .then(response => {
              this.snackbar = true;
              this.text = response.data.message;

              this.getParticularCourse();

            })
            .catch(error => {
              this.snackbar = true;
              this.text = error.response.data.message;
            });
        }
        if (
          selected.enroll == false &&
          selected.enroll != undefined &&
          selected.enroll != null
        ) {
          var payloadDeleteStudents = {
            courseId: this.getReport.courseId,
            enrollStudentsId: selected.enrollId
          };
          http()
            .put("/deleteStudents", payloadDeleteStudents)
            .then(response => {
              this.snackbar = true;
              this.text = response.data.message;

              this.getParticularCourse();

            })
            .catch(error => {
              this.snackbar = true;
              this.text = error.response.data.message;
            });
        }

      },

      getParticularCourse() {
        var payload = {
          courseId: this.getReport.courseId
        };
        http()
          .get("/getParticularCourse", {
            params: payload
          })
          .then(response => {

            for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
              var studentId = {};
              studentId = response.data.data.enrollStudents[i];
              for (let j = 0; j < this.studentsData.length; j++) {
                if (studentId.studentId == this.studentsData[j]._id) {

                  // console.log("studentId._id", studentId._id);

                  this.studentsData[j].enroll = true;
                  this.studentsData[j].enrollId = studentId._id;
                }
              }
            }

            this.snackbar = true;
            this.text = response.data.message;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
          });
      },

      changeSort(column) {
        if (this.pagination.sortBy === column) {
          this.pagination.descending = !this.pagination.descending;
        } else {
          this.pagination.sortBy = column;
          this.pagination.descending = false;
        }
      },
      displaySearch() {
        this.show = false;
        this.showSearch = true;
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";
      }
    },
    mounted() {
      // this.getStudentList();
      this.token = this.$store.state.token;
      this.role = this.$store.state.role;
      this.getAllClass();
    }
  };
  </script>