<template>
  <v-container fluid class="body-color">
    <!-- **** Admit Card 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 lg4 class="subheading mt-4">
                  <label class="right">Exam :</label>
                </v-flex>
                <v-flex xs7 sm6 lg8 class="ml-2">
                  <v-autocomplete
                    v-model="getReport.examId"
                    label="Please Select"
                    :items="examData"
                    item-text="examName"
                    item-value="_id"
                    :rules="examRules"
                    @change="getExamList"
                    required
                  ></v-autocomplete>
                </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">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 lg4>
              <v-layout>
                <v-flex xs4 sm4 lg3 class="subheading mt-4">
                  <label class="right">Type:</label>
                </v-flex>
                <v-flex xs7 sm6 lg8 class="ml-2">
                  <v-autocomplete
                    label="Please Select"
                    type="text"
                    :rules="typeRules"
                    :items="typeList"
                    v-model="getReport.form"
                    item-text="name"
                    item-value="value"
                    @change="getReport(getReport.form)"
                    required
                  ></v-autocomplete>
                </v-flex>
              </v-layout>
            </v-flex>
            <!-- <v-flex xs12 sm12 lg4>
              <v-layout>
                <v-flex xs4 sm4 lg3 class="subheading mt-4">
                  <label class="right">Background:</label>
                </v-flex>
                <v-flex xs7 sm6 lg8 class="ml-2">
                  <v-autocomplete
                    label="Please Select"
                    type="text"
                    :rules="backgroundRules"
                    :items="backgroundList"
                    required
                  ></v-autocomplete>
                </v-flex>
              </v-layout>
            </v-flex>-->
            <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
              <v-btn
                @click="getSchedule"
                round
                dark
                :loading="loading"
                class="open-dialog-button mt-3 ml-5"
              >Get Report</v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-form>
    </v-card>
    <div v-if="frontPart">
      <v-layout v-show="showTable">
        <v-flex xs12>
          <v-layout>
            <v-flex xs12>
              <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
                Print
                <v-icon right dark>print</v-icon>
              </v-btn>
            </v-flex>
          </v-layout>
          <div class="admincardreport">
            <v-card class="transparent elevation-0">
                <v-layout>
                  <v-flex xs12 sm12 md12 class="text-xs-center">
                    <div class="line">
                      <div class="school-logo">
                        <img :src="userData.schoolLogoUrl" width="140" alt="logo" v-if="userData.profilePicUrl"/>
                        <img src="/static/icon/dashboard icons-18.png" width="140" v-else-if="!userData.profilePicUrl" />
                      </div>
                      <div class="school-name">
                        <h2>{{ userData.name }}</h2>
                        <v-flex class="school-address">
                          <p>{{ userData.address }}, {{ userData.pinCode }}</p>
                          <h4>First Terminal Exam Admit Card - (2019-2020)</h4>
                        </v-flex>
                      </div>
                      <!-- <div class="student-logo">
                        <v-avatar>
                          <img :src="studentData.profilePicUrl" width="140" v-if="studentData.profilePicUrl" />
                          <img src="/static/icon/user.png" width="140" v-else-if="!studentData.profilePicUrl" />
                        </v-avatar>
                      </div> -->
                    </div>
                    <div class="school-info">
                        <v-flex xs12 sm12 md12 >
                            <div class="student-info" v-if="getScheduleList.studentData">
                                <p
                                    style="font-size:18px;margin:0px;margin-bottom:4px;"
                                >Name : {{ getScheduleList.studentData.name }}</p>
                                <p
                                    style="font-size: 18px;margin:0px;margin-bottom:4px;"
                                >Class : {{ getScheduleList.studentData.classId.classNum}}</p>
                                <p
                                    style="font-size: 18px;margin:0px;margin-bottom:4px;"
                                >Section : {{ getScheduleList.studentData.sectionId.name }}</p>
                                <p
                                    style="font-size: 18px;margin:0px;margin-bottom:4px;"
                                >Roll NO : {{ getScheduleList.studentData.rollNo }}</p>
                                <p
                                    style="font-size: 18px;margin:0px;margin-bottom:4px;"
                                >Blood Group : {{ getScheduleList.studentData.bloodGroup }}</p>
                                <p style="font-size: 18px;color: #707478;">Subject in which Appearing</p>
                            </div>
                        </v-flex>
                    </div>
                  </v-flex>
                </v-layout>
                <v-data-table 
                    :headers="headers" 
                    :items="getScheduleListArray"
                    :pagination.sync="pagination"
                    :search="search"
                >
                  <template slot="items" slot-scope="props">
                    <td class="td td-row">{{ props.index + 1}}</td>
                    <td class="td td-row text-xs-center">{{ props.item.date }}</td>
                    <td class="td td-row text-xs-center">{{ props.item.timeFrom }}</td>
                    <td class="td td-row text-xs-center">{{ props.item.timeTo }}</td>
                    <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
                  </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-flex xs12 id="printMe" v-show="hideprintAdmitReport">
                    <v-layout>
                        <v-flex xs12 style="text-align:center;margin-bottom:10px">
                            <img :src="userData.schoolLogoUrl" width="140" alt="logo" v-if="userData.profilePicUrl"/>
                            <img src="/static/icon/dashboard icons-18.png" width="140" v-else-if="!userData.profilePicUrl" />
                            <p class="title">{{ userData.name }}</p>
                            <p>{{ userData.address }}, {{ userData.pinCode }}</p>
                            <h4>First Terminal Exam Admit Card - (2019-2020)</h4>
                        </v-flex>
                    </v-layout>
                    <table
                        class="mb-5 tableRsponsive feeTypeTable"
                        style="border: 1px solid lightgrey;
                            border-collapse: collapse;!important
                            table-layout: auto !important;
                            width: 100% !important;"
                    >
                        <thead style="border: 1px solid lightgrey !important;">
                        <tr style="border: 1px solid lightgrey !important;padding:4px;">
                            <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td>
                            <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td>
                            <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td>
                            <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td>
                            <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td>
                        </tr>
                        </thead>
                        <tbody 
                        style="border: 1px solid lightgrey !important;">
                        <tr v-for="(scheduleData,index) in getScheduleListArray">
                            <td
                                style="border: 1px soild lightgrey !importand;padding:6px;"
                            >{{ index + 1 }}</td>
                            <td
                            style="border: 1px solid lightgrey !important;padding: 6px;"
                            >{{ scheduleData.date }}</td>
                            <td
                            style="border: 1px solid lightgrey !important;padding: 6px;"
                            >{{ scheduleData.timeFrom }}</td>
                            <td
                            style="border: 1px solid lightgrey !important;padding: 6px;"
                            >{{ scheduleData.timeTo }}</td>
                            <td
                            style="border: 1px solid lightgrey !important;padding: 6px;"
                            >{{ scheduleData.subjectName }}</td>
                        </tr>
                        </tbody>
                    </table>
                </v-flex>
            </v-card>
          </div>
        </v-flex>
      </v-layout>
    </div>
    <div v-if="backPart">
        <v-layout v-show="showData">
            <v-flex xs12>
                <v-layout>
                    <v-flex xs12>
                        <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
                            Print
                            <v-icon right dark>print</v-icon>
                        </v-btn>
                    </v-flex>
                </v-layout>
            <v-flex xs12 sm12 md12 class="text-xs-center">
                <div class="admitcardreportbackend" id="printMe">
                    <ol>
                    <p>
                        <b>1. Do not Carry these Electronic Gadgets:</b>
                        Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
                        in the examination lab. These items are strictly prohibited from examination lab.
                    </p>
                    <p>
                        <b>2. Do not Carry these Ornaments:</b>
                        Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
                        necklace,pendants,badge,broach,hair-pin,hair-band.
                    </p>
                    <p>
                        <b>3. What Candidates wear to Examination hall:</b>
                        Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
                        like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
                    </p>
                    <p>
                        <b>4. Do not carry Stationary:</b>
                        Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
                        on the computer screen alloted to the candidates.
                    </p>
                    <p>
                        <b>5. Do not Carry Bags:</b>
                        Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
                        arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
                        safe custody of such items.
                    </p>
                    <p>
                        <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
                        If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
                        to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
                        from appearing in future examinations of the Commission for a period of 3 years.
                    </p>
                    <p>
                        <b>7. Candidate should not create Disturbance in Exam Hall:</b>
                        If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
                        his/her candidature shall be summarily canceled.
                    </p>
                    </ol>
                </div>
            </v-flex>
            </v-flex>
        </v-layout>
    </div>
  </v-container>
</template>
<script>
import http from "@/Services/http.js";
import moment from "moment";
import _ from "underscore";

export default {
  data: () => ({
    valid: true,
    userData: {},
    frontPart: false,
    backPart: false,
    loading: false,
    showTable: false,
    showData: false,
    hideprintAdmitReport: false,

    examRules: [v => !!v || "Exam Field is required"],
    classRules: [v => !!v || "Class Field Required"],
    sectionRules: [v => !!v || "Section Field is required"],
    studentRules: [v => !!v || "Student Field is required"],
    typeRules: [v => !!v || "Type Field is required"],
    backgroundRules: [v => !!v || "Background Field is required"],

    pagination: {
      rowsPerPage: 10
    },
    search: "",

    classList: [],
    studentData: {},
    scheduleData: {},
    examData: [],
    addSection: [],
    getStudentsList: [],
    getScheduleList: [],
    getScheduleListArray: [],
    typeList: [
        {
            name: "Front Part",
            value: "frontPart"
        },
        {
            name: "Back Part",
            value: "backPart"
        }
    ],
    backgroundList: ["Yes", "No"],

    headers: [
      {
        text: "No",
        align: "",
        sortable: false,
        value: "No"
      },
      {
        text: "Exam Date",
        align: "center",
        sortable: false,
        value: "date"
      },
      {
        text: "Start Time",
        align: "center",
        sortable: false,
        value: "timeFrom"
      },
      {
        text: "End Time",
        align: "center",
        sortable: false,
        value: "timeTo"
      },
      {
        text: "Subject Name",
        align: "center",
        sortable: false,
        value: "subjectName"
      }
    ]
  }),

  mounted() {
    this.token = this.$store.state.token;
    this.getClass();
    this.getExamList();
    this.getUserData();
  },

  methods: {
    getReport() {
        if (this.getReport.form === "frontPart") {
            this.frontPart = true;
            this.backPart = false;
        }
        if (this.getReport.form === "backPart") {
            this.frontPart = false;
            this.backPart = true;
        }
    },
    getExamList() {
      this.showLoader = true;
      this.loadingSearch = true;
      http()
        .get("/getExamsList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.examData = response.data.data;
          this.showLoader = false;
          this.loadingSearch = false;
        })
        .catch(error => {
          this.showLoader = false;
          this.loadingSearch = 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);
          }
        });
    },
    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;
        })
        .catch(error => {
          console.log("err====>", error);
          this.showLoader = false;
        });
    },
    getSchedule() {
      this.showLoader = true;
      http()
        .get("/getScheduleForParticularStudent", {
          params: {
            examId: this.getReport.examId,
            classId: this.getReport.classId,
            sectionId: this.getReport.sectionId,
            studentId: this.getReport.studentId
          }
        })
        .then(response => {
          this.getScheduleList = response.data.data;
          this.getScheduleListArray = response.data.data.scheduleData;
          this.showTable = true;
          this.showData = true;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
        });
    },

    printAdmitReport() {
      // 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);
          // }
        });
    },
    // created() {
    //     this.$root.$on("app:search", search => {
    //     this.search = search;
    //     });
    // },
    // beforeDestroy() {
    //     // dont forget to remove the listener
    //     this.$root.$off("app:search");
    // }
  }
};
</script>
<style scoped>
.admincardreport {
  border: 1px solid #ddd;
  overflow: hidden;
  padding: 20px 50px;
  /* margin-bottom: 10px;
  min-height: 443px; */
}
.line {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  padding-bottom: 10px;
  vertical-align: middle;
  /* margin-bottom: 4px; */
}
.school-logo {
  float: left;
}
.student-logo {
  position: absolute;
  top: 221px;
  right: 221px;
}
.school-name {
  box-sizing: border-box;
  align-items: center;
}
/* .student-info {
  float: left;
  width: max-content;
  text-align: initial;
} */
.student-info {
  width: 50%;
  float: left;
  text-align: initial;
}
.student-info p {
  width: 50%;
  float: left;
  margin-bottom: 1px;
  padding: 0 0px;
  font-size: 12px;
}
.admitcardreportbackend {
    border: 1px solid #ddd;
    overflow: hidden;
    padding: 5% 25%;
    /* margin-bottom: 10px;
    color: black; */
}
.admitcardreportbackend ol {
    margin: 0;
    margin-bottom: 10px;
}
.admitcardreportbackend p {
    line-height: 20px;
    text-align: left;
}
</style>