<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 xs12 sm12 lg10 class="ml-2">

                    <v-autocomplete
                      v-model="getReport.examId"

                      label="Please Select Exam"

                      :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-if="getReport.examId">

                <v-layout>

                  <v-flex xs12 sm12 lg10 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-if="getReport.classId">

                <v-layout>

                  <v-flex xs12 sm12 lg10 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-if="getReport.sectionId">

                <v-layout>

                  <v-flex xs12 sm12 lg10 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 lg3>

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-autocomplete

                      label="Please Select View Type"

                      type="text"
                      :rules="typeRules"
                      :items="typeList"
                      v-model="getReport.form"
                      item-text="name"
                      item-value="value"

                      required
                    ></v-autocomplete>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg3>

                <v-btn
                  @click="getSchedule"
                  round
                  dark
                  :loading="loading"

                  class="open-dialog-button mt-3"

                >Get Report</v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-form>
      </v-card>

      <div v-show="showTable">
        <v-flex xs12 sm12 md10 style="margin:auto">
          <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>

          <!-- ADMIT CARDS -->

          <div id="printMe" v-if="frontPart">
            <v-card

              v-for="(student,index) in getScheduleList.studentData"
              :key="index"
              class="mt-3"

              style=" 
              page-break-after: always;   

            background-color: #fff;
            border: 1px solid #ddd;
            color: rgba(0,0,0,0.87);
            overflow-x: auto;
            display: block;
            padding:14px !important;
            webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
            >

              <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto">

                <v-flex xs3 style="margin-bottom:0px">

                  <img
                    :src="userData.schoolLogoUrl"

                    style="widht:80px;height:80px;"

                    alt="logo"
                    v-if="userData.schoolLogoUrl"
                  />
                  <img
                    src="/static/default_thumb.png"

                    style="widht:80px;height:80px;"

                    v-else-if="!userData.schoolLogoUrl"
                  />

                  <div class="school-name">

                    <div class="body-1">{{ student.schoolId.address }}</div>
                    <div class="body-1">{{ student.schoolId.mobile }}</div>

                  </div>

                </v-flex>
                <v-flex xs5 style="text-align:center;margin-bottom:0px">
                  <p
                    style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px"

                  >{{ student.schoolId.name }}</p>
                  <p>{{ student.schoolId.email }}</p>

                  <div>

                    <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4>

                  </div>
                </v-flex>
                <v-flex xs4 style="text-align:center;margin-bottom:0px">

                  <img src="/static/icon/user.png" v-if="!student.profilePicUrl" width="80" />

                  <img

                    :src="student.profilePicUrl"

                    onerror="this.src='/static/icon/user.png';"

                    v-if="student.profilePicUrl"

                    width="80"
                  />

                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs5 style="margin-bottom:10px">
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                    <b>Name :</b>

                    <span>{{student.name}}</span>

                  </p>
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                    <b>Class :</b>

                    <span>{{student.classId.classNum}}</span>

                  </p>
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                    <b>Roll :</b>

                    <span>{{student.rollNo}}</span>

                  </p>
                </v-flex>
                <v-flex xs5 style="margin-bottom:10px">
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                    <b>Section :</b>

                    <span>{{student.sectionId.name }}</span>

                  </p>
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                    <b>Blood Group :</b>

                    <span style="color: #707478">{{student.bloodGroup }}</span>

                  </p>
                  <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p>
                </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,i) in getScheduleList.scheduleData" :key="i">
                    <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td>
                    <td
                      style="border: 1px solid lightgrey !important;padding: 6px;"
                    >{{ scheduleData.date ? scheduleData.date : '-' }}</td>
                    <td
                      style="border: 1px solid lightgrey !important;padding: 6px;"
                    >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td>
                    <td
                      style="border: 1px solid lightgrey !important;padding: 6px;"
                    >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td>
                    <td
                      style="border: 1px solid lightgrey !important;padding: 6px;"
                    >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td>
                  </tr>
                  <tr v-if="getScheduleList.scheduleData.length === 0">
                    <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td>
                    <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                    <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                    <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                    <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                  </tr>
                </tbody>
              </table>
            </v-card>
          </div>
          <div id="printMe" v-if="backPart">
            <v-card
              style=" 
             text-align:center
             background-color: #fff;
             border: 1px solid #ddd;
             color: rgba(0,0,0,0.87);
             overflow-x: auto;
             display: block;
             padding:14px !important;
             webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
             box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
            >
              <div
                style=" 
               margin-bottom: 16px;
               overflow: hidden;
               padding: 50px 90px;"
              >
                <ol style="
                 margin: 0;
                 margin-bottom: 10px;">
                  <p
                    style="
                 margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"

                  >

                    <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
                    style="
                 margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"
                  >
                    <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
                    style="
                 margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"
                  >
                    <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
                    style="
                margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"
                  >
                    <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
                    style="
                margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"
                  >
                    <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
                    style="
                margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;"
                  >
                    <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
                    style="
                margin-bottom: 16px;
                 line-height: 20px;
                 text-align: left;
                 "
                  >
                    <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-card>
          </div>
        </v-flex>

      </div>

      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ 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";
  import _ from "underscore";

  var qs = require("qs");

  
  export default {
    data: () => ({

      snackbar: false,
      color: "",
      y: "top",
      x: "right",
      mode: "",
      timeout: 10000,
      text: "",
      showLoader: false,

      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: [{ name: "Select All", _id: "selectAll" }],

      getScheduleList: [],
      getScheduleListArray: [],

      getReport: {},

      examName: [],

      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: {

      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) => {

            for (var i = 0; i < response.data.data.length; i++) {
              this.getStudentsList.push(response.data.data[i]);
            }

            this.showLoader = false;
          })

          .catch((error) => {

            //   console.log("err====>", error);

            this.showLoader = false;

            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;

          });
      },
      getSchedule() {

        if (this.$refs.form.validate()) {
          this.showLoader = true;

          let studentId = [];
          if (this.getReport.studentId == "selectAll") {
            studentId = [];
            for (var i = 1; i < this.getStudentsList.length; i++) {
              studentId.push(this.getStudentsList[i]._id);
            }
          } else {

            studentId.push(this.getReport.studentId);

          }

          // console.log("this.getReport.studentId - ", studentId);
          var admitPayload = {
            examId: this.getReport.examId,
            classId: this.getReport.classId,
            sectionId: this.getReport.sectionId,
            studentId: studentId,
          };

          http()

            .put("/getScheduleForParticularStudent", admitPayload, {

              paramsSerializer: (params) => {
                return qs.stringify(params);

              },

            })

            .then((response) => {

              this.showTable = true;
              this.getScheduleList = response.data.data;

              // console.log(" getScheduleList - ", this.getScheduleList);

              // this.schoolData = response.data.data.studentData.schoolId;

              if (response.data.data.scheduleData.length === 0) {
                this.showLoader = false;
                this.snackbar = true;

                this.text = "Data not found!";

                this.color = "error";

                return;
              }

              this.showData = true;

              if (this.getReport.form === "frontPart") {
                this.frontPart = true;
                this.backPart = false;
              }
              if (this.getReport.form === "backPart") {
                this.frontPart = false;
                this.backPart = 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>

  .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 ol {

    margin: 0;
    margin-bottom: 10px;

  }
  .admitcardreportbackend p {

    line-height: 20px;
    text-align: left;

  }
  </style>