<template>
    <v-container fluid class="body-color">
      <v-toolbar color="transparent" flat>
        <v-spacer></v-spacer>
        <v-flex xs12 sm4 md2>
          <v-select
            small
            :items="classList"
            label="Select Class"
            v-model="getAttendance.classId"
            item-text="classNum"
            item-value="_id"
            name="Select Class"
            class="px-2"
            @change="getSection(getAttendance.classId)"
            required
          ></v-select>
        </v-flex>
        <v-flex xs12 sm4 md2>
          <v-select
            small
            :items="addSection"
            label="Select Section"
            v-model="getAttendance.sectionId"
            item-text="name"
            item-value="_id"
            name="Select Section"
            @change="getStudentsDetail(getAttendance.sectionId)"
            class="px-2"
            required
          ></v-select>
        </v-flex>
      </v-toolbar>
      <v-data-table
        :headers="headers"
        :items="studentsData"
        :pagination.sync="pagination"
        :search="search"
      >
        <template slot="items" slot-scope="props">
          <tr class="tr">
            <td class="td td-row">{{ props.index + 1}}</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>
            <td class="text-xs-center td td-row">
              <router-link :to="{ name:'View Course Attendance',params: { id:props.item._id } }">
                <v-tooltip top>
                  <img
                    slot="activator"
                    style="cursor:pointer; width:20px; height:25px; "
                    class="mr-3"
                    src="/static/icon/view.png"
                  />
                  <span>View</span>
                </v-tooltip>
              </router-link>
            </td>
          </tr>
        </template>
      </v-data-table>
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        color="color"
      >{{ text }}</v-snackbar>
    </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: "",
      color: "",
      show: true,
  
      classList: [],
      addSection: [],
      studentsData: [],
  
      pagination: {
        rowsPerPage: 10,
      },
  
      role: "",
      schoolRole: "",
      search: "",
      getAttendance: {},
      headers: [
        {
          text: "No",
          align: "",
          sortable: false,
          value: "index",
        },
        {
          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: "Attendance", value: "", sortable: false, align: "center" },
      ],
    }),
    methods: {
      getAllClass() {
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token },
          })
          .then((response) => {
            this.classList = response.data.data;
          })
          .catch((error) => {
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
          });
      },
      getSection(_id) {
        this.showLoader = true;
        this.studentsData = [];
        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;
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
            // console.log("err====>", err);
          });
      },
      getStudentsDetail(_id) {
        this.showLoader = true;
        http()
          .get("/getStudentWithClass", {
            params: {
              classId: this.getAttendance.classId,
              sectionId: this.getAttendance.sectionId,
            },
          })
          .then((response) => {

            this.studentsData = response.data.data.filter((item) => item.status);

            this.showLoader = false;
            var attendance = "";
            for (let i = 0; i < this.studentsData.length; i++) {
              this.studentsData[i].attendance = true;
            }
          })
          .catch((error) => {
            //   console.log("err====>", error);
            this.showLoader = false;
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
          });
      },
    },
    mounted() {
      this.token = this.$store.state.token;
      this.getAllClass();
      this.role = this.$store.state.role;
    },
  };
  </script>