<template>

    <v-container fluid class="body-color">

      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        color="success"
      >{{ text }}</v-snackbar>

      <!-- ****** ATTENDENCE STUDENTS TABLE ****** -->
      <!-- <download-csv :data="json_data">

              <v-btn>Download Data</v-btn>

      </download-csv>-->
      <v-toolbar color="transparent" flat>
        <v-spacer></v-spacer>
        <v-flex xs12 sm4 md2>
          <v-select
            small
            :items="addclass"
            label="Select Class"
            v-model="selectStudents.select"
            item-text="classNum"
            item-value="_id"
            name="Select Class"
            @change="getSections(selectStudents.select)"
            class="px-2"
            required
          ></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="studentsList"
        :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.rollNo}}</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 Students Attendence',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>

              <v-tooltip top>
                <img
                  slot="activator"

                  style="cursor:pointer; width:20px; height:20px; "
                  @click="deleteItem(props.item)"
                  class="mr-3"

                  src="/static/icon/delete.png"

                />

                <span>Delete</span>

              </v-tooltip>

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

      },
      imageData: {},
      imageName: "",
      imageUrl: "",
      imageFile: "",
      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: "Roll No", value: "rollNo", sortable: false, align: "center" },
        { text: "Email", value: "email", sortable: false, align: "center" },
        { text: "Action", value: "", sortable: false, align: "center" }
      ],

      // json_data: [],

      studentsList: [],
      parentId: "",
      token: "",
      selectStudents: {
        select: "",
        selectSection: ""
      }
    }),
    methods: {
      getSections(_id) {

        this.showLoader = true;

        var token = this.$store.state.token;
        http()
          .get(
            "/getStudentsList",
            { params: { classId: _id } },
            {
              headers: { Authorization: "Bearer " + token }
            }
          )
          .then(response => {

            this.showLoader = false;

            this.studentsList = response.data.data;

          })

          .catch(error => {

            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }

          });
      },
      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: "/" });

          });

      },
      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.getAllClass();

    }
  };

  </script>