<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="coursrName"
          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
              :input-value="props.selected"
              @change="selectParticularStudent(props.item._id)"
              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: [],
    SectionName: ["A", "B", "C", "D", "E", "F"],
    classRules: [v => !!v || "Class is required"],
    sectionRules: [v => !!v || "Class is required"],
    studentRules: [v => !!v || "Student is required"],
    dataValid: [v => !!v || "Date is required"]
  }),
  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;
          }
        })
        .catch(error => {
          console.log("err====>", error);
          this.showLoader = false;
        });
    },
    getStudentTable(id) {
      console.log("id", this.getReport.courseId);
      this.getStudents();
      this.getParticularCourse();
    },
    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();
      console.log("this.selected", this.selected);
      console.log("selected====", selected);
      let selectedStudentsArray = [];
      selectedStudentsArray.push({ studentId: selected.id });
      var payload = {
        courseId: this.getReport.courseId,
        enrollStudents: selectedStudentsArray
      };
      http()
        .put("/enrollStudents", payload)
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
        })
        .catch(error => {
          this.snackbar = true;
          this.text = error.response.data.message;
        });
    },
    selectParticularStudent(selected) {
      console.log("selected====", selected);
      let selectedStudentsArray = [];
      selectedStudentsArray.push({ studentId: selected });
      var payload = {
        courseId: this.getReport.courseId,
        enrollStudents: selectedStudentsArray
      };
      http()
        .put("/enrollStudents", payload)
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
        })
        .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 => {
          conso.log("DTAAAAA", response.data.data);
          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>