<template>
  <v-container fluid class="body-color">
    <!-- **** Id Card Report 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">Id Card For:</label>
                </v-flex>
                <v-flex xs7 sm6 lg8 class="ml-2">
                  <v-autocomplete
                    v-model="getReport.role"
                    label="Please Select"
                    :items="getRoles"
                    item-text="name"
                    item-value="role"
                    :rules="cardRules"
                    @change="getRoleInputs(getReport.role)"
                    required
                  ></v-autocomplete>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3 v-if="this.showClass">
              <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 Class"
                    :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 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 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 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 Student"
                    v-model="getReport._id"
                    item-text="name"
                    item-value="_id"
                    :rules="studentRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3 v-if="this.showTeacher">
              <v-layout>
                <v-flex xs3 sm6 lg2 class="subheading mt-4">
                  <label class="right">Teacher:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Teacher"
                    :items="teacherList"
                    item-text="name"
                    item-value="_id"
                    :rules="teacherRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3 v-if="this.showAdmin">
              <v-layout>
                <v-flex xs3 sm6 lg2 class="subheading mt-4">
                  <label class="right">Admin:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Admin"
                    :items="userData"
                    item-text="name"
                    item-value="_id"
                    :rules="adminRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3 v-if="this.showAccountant">
              <v-layout>
                <v-flex xs3 sm6 lg2 class="subheading mt-4">
                  <label class="right">Accountant:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Accountant"
                    :items="Users"
                    item-text="name"
                    item-value="_id"
                    :rules="accountantRules"
                    required
                  ></v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12 sm12 lg3 v-if="this.showLibrarian">
              <v-layout>
                <v-flex xs3 sm6 lg2 class="subheading mt-4">
                  <label class="right">Librarian:</label>
                </v-flex>
                <v-flex xs9 sm6 lg8 class="ml-2">
                  <v-select
                    v-model="getReport._id"
                    label="Select Librarian"
                    :items="Users"
                    item-text="name"
                    item-value="_id"
                    :rules="librarianRules"
                    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="getCards"
                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="showReport">
        <v-flex xs12>
          <v-card class="transparent elevation-0">
            <v-layout>
              <v-flex xs12>
                <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
                  Print
                  <v-icon right dark>print</v-icon>
                </v-btn>
              </v-flex>
            </v-layout>
            <v-container grid-list-md>
              <v-layout class="col-sm-12">
                <div class="idcardreport">
                  <div class="icard-front">
                    <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
                    <img src="/static/logo.png" alt="logo" class="logo"/> 
                    <h2>{{ userData.name }}</h2>
                    <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" class="icard-img"/>
                    <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" class="icard-img"/>
                    <div class="Data" v-if="this.getReport.role === 4">
                      <h3 style="text-align: center;">
                        <!-- <span>
                          <b>Name</b>
                        </span> -->
                        {{ getCard.studentData.name }}
                      </h3>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 4">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Class</b>
                        </span> -->
                        {{ getCard.studentData.classId.classNum }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 4">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Section</b>
                        </span> -->
                        {{ getCard.studentData.sectionId.name }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 4">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Roll No</b>
                        </span> -->
                        {{ getCard.studentData.rollNo }}
                      </p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                    </div>
                    <!-- <div class="Data" v-if="this.getReport.role === 4">
                      <p>
                        <span>
                          <b>Blood Group</b>
                        </span>
                        : {{ getCard.studentData.bloodGroup }}
                      </p>
                    </div>-->
                    <div class="Data" v-if="this.getReport.role === 3">
                      <h3 style="text-align: center;">
                        <!-- <span>
                          <b>Name</b>
                        </span> -->
                        {{ getCard.teachersData.name }}
                      </h3>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 3">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Phone No</b>
                        </span> -->
                        {{ getCard.teachersData.mobileNo }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 3">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Joining Date</b>
                        </span> -->
                        {{ getCard.teachersData.joinDate }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 3">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Email</b>
                        </span> -->
                        {{ getCard.teachersData.email }}
                      </p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 2">
                      <h3 style="text-align: center;">
                        <!-- <span>
                          <b>Name</b>
                        </span> -->
                        {{ getCard.adminData.name }}
                      </h3>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 2">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Establishment Year</b>
                        </span> -->
                        {{ getCard.adminData.establishmentYear }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 2">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Joining Date</b>
                        </span> -->
                        {{ getCard.adminData.joinDate }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 2">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Phone No</b>
                        </span> -->
                        {{ getCard.adminData.mobile }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 2">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Email</b>
                        </span> -->
                        {{ getCard.adminData.email }}
                      </p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 6">
                      <h3 style="text-align: center;">
                        <!-- <span>
                          <b>Name</b>
                        </span> -->
                        {{ getCard.usersData.name }}
                      </h3>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 6">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Email</b>
                        </span> -->
                        {{ getCard.usersData.email }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 6">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Phone No</b>
                        </span> -->
                        {{ getCard.usersData.phone }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 6">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Gender</b>
                        </span> -->
                        {{ getCard.usersData.gender }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 6">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Joining Date</b>
                        </span> -->
                        {{ getCard.usersData.joiningDate }}
                      </p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 7">
                      <h3 style="text-align: center;">
                        <!-- <span>
                          <b>Name</b>
                        </span> -->
                        {{ getCard.usersData.name }}
                      </h3>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 7">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Email</b>
                        </span> -->
                        {{ getCard.usersData.email }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 7">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Phone No</b>
                        </span> -->
                        {{ getCard.usersData.phone }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 7">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Gender</b>
                        </span> -->
                        {{ getCard.usersData.gender }}
                      </p>
                    </div>
                    <div class="Data" v-if="this.getReport.role === 7">
                      <p style="text-align: center;">
                        <!-- <span>
                          <b>Joining Date</b>
                        </span> -->
                        {{ getCard.usersData.joiningDate }}
                      </p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                    </div>
                  </div>
                </div>
              </v-layout>
            </v-container>
          </v-card>
          <v-flex xs12 id="printMe" v-show="hideprintIdCard">
            <!-- <v-layout class="col-sm-12" > -->
              <div class="idcardreport">
                <div class="print-data">
                  <img src="/static/icon/shape1.png" alt="shape" class="shape1" style="padding-left: 25%;"/>
                  <img src="/static/logo.png" alt="logo" class="logo" style="width: 70px; height: 70px; margin-left: 12%;"/> 
                  <h2 style="text-align: center;">{{ userData.name }}</h2>
                  <img
                    :src="getCards.profilePicUrl"
                    v-if="getCards.profilePicUrl"
                    style="margin-top: 31px;
                          margin-left: 45%;"
                  />
                  <img
                    src="/static/icon/user.png"
                    v-else-if="!getCards.profilePicUrl"
                    style="margin-top: 31px;
                          margin-left: 45%;"
                  />
                <table
                  class="mb-5 tableRsponsive feeTypeTable"
                  style="table-layout: auto !important;
                  width: 100% !important;
                  "
                >
                  <!-- <thead style="border: 1px solid lightgrey !important;">
                    <tr
                      style="border: 1px solid lightgrey !important;padding:4px;"
                      v-if="this.getReport.role === 4"
                    >
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
                    </tr>
                    <tr
                      style="border: 1px solid lightgrey !important;padding:4px;"
                      v-if="this.getReport.role === 3"
                    >
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
                    </tr>
                    <tr
                      style="border: 1px solid lightgrey !important;padding:4px;"
                      v-if="this.getReport.role === 2"
                    >
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                      <td
                        style="border: 1px solid lightgrey !important;padding: 6px;"
                      >Establishment Year</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                    </tr>
                    <tr
                      style="border: 1px solid lightgrey !important;padding:4px;"
                      v-if="this.getReport.role === 6"
                    >
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
                    </tr>
                    <tr
                      style="border: 1px solid lightgrey !important;padding:4px;"
                      v-if="this.getReport.role === 7"
                    >
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
                      <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
                    </tr>
                  </thead> -->
                  <tbody style="border: 1px solid lightgrey !important;">
                    <tr
                      v-if="this.getReport.role === 4"
                    >
                      <h3 style="text-align: center;">{{ getCard.studentData.name }}</h3>
                      <p style="text-align: center;">{{ getCard.studentData.classId.classNum }}</p>
                      <p style="text-align: center;">{{ getCard.studentData.sectionId.name }}</p>
                      <p style="text-align: center;">{{ getCard.studentData.rollNo }}</p>
                      <p style="text-align: center;">{{ getCard.studentData.bloodGroup }}</p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
                    </tr>
                    <tr
                      v-if="this.getReport.role === 3"
                    >
                      <h3 style="text-align: center;">{{ getCard.teachersData.name }}</h3>
                      <p style="text-align: center;">{{ getCard.teachersData.email }}</p>
                      <p style="text-align: center;">{{ getCard.teachersData.mobileNo }}</p>
                      <p style="text-align: center;">{{ getCard.teachersData.joinDate }}</p>
                      <img src="static/icon/shape2.png" alt="shape2" class="rightside" style="padding-left: 75%;"/>
                    </tr>
                    <tr
                      v-if="this.getReport.role === 2"
                    >
                      <h3 style="text-align: center;">{{ getCard.adminData.name }}</h3>
                      <p style="text-align: center;">{{ getCard.adminData.establishmentYear }}</p>
                      <p style="text-align: center;">{{ getCard.adminData.joinDate }}</p>
                      <p style="text-align: center;">{{ getCard.adminData.mobile }}</p>
                      <p style="text-align: center;">{{ getCard.adminData.email }}</p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
                    </tr>
                    <tr
                      v-if="this.getReport.role === 6"
                    >
                      <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
                      <p style="text-align: center;">{{ getCard.usersData.email }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
                    </tr>
                    <tr
                      v-if="this.getReport.role === 7"
                    >
                      <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
                      <p style="text-align: center;">{{ getCard.usersData.email }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
                      <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
                      <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
                    </tr>
                  </tbody>
                </table>
                </div>
              </div>
            <!-- </v-layout> -->
          </v-flex>
        </v-flex>
      </v-layout>
    </div>
    <div v-if="backPart" class="col-sm-12">
      <v-layout v-show="showReport">
        <v-flex xs12>
          <v-card class="transparent elevation-0">
            <v-layout>
              <v-flex xs12>
                <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
                  Print
                  <v-icon right dark>print</v-icon>
                </v-btn>
              </v-flex>
            </v-layout>
            <div class="icard-data">
              <div class="idcardreport">
                <div class="icard-back"> 
                  <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
                  <img src="/static/logo.png" alt="logo" class="logo" />
                  <h2>{{userData.name}}</h2>
                  <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
                  <div class="school-address">
                    <p>{{ userData.address }}, {{ userData.pinCode }}</p>
                  </div>
                  <!-- <div class="icard-bottom">
                    <div class="qrcode">
                      <img src="/static/icon/qr-code.png" alt="icon" />
                    </div>
                    <div class="session">
                      <span>Session: 2019-2020</span>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </v-card>
          <div class="icard-data" id="printMe" v-show="hidebackprintIdCard">
            <div class="idcardreport" style="margin-top: 25%;">
              <div class="back-icard">
                <img src="/static/icon/shape1.png" alt="shape" class="shape1" style="padding-left: 25%;"/>
                <img src="/static/logo.png" alt="logo" class="logo" style="width: 50px; height: 50px; margin-left: 12%;"/>
                <h2 style="text-align: center;">{{ userData.name }}</h2>
                <div class="address" style="text-align: center;">
                  <p>{{ userData.address }}, {{ userData.pinCode }}</p>
                </div>
                <img src="static/icon/shape2.png" alt="shape2" class="shape2" style="padding-left: 75%;"/>
              </div>
            </div>
          </div>
        </v-flex>
      </v-layout>
    </div>
  </v-container>
</template>

<script>
import http from "@/Services/http.js";
import moment from "moment";

export default {
  data: () => ({
    valid: true,
    report: {},
    userData: {},

    loading: false,
    showReport: false,
    frontPart: false,
    backPart: false,
    showClass: false,
    showTeacher: false,
    showAdmin: false,
    showAccountant: false,
    showLibrarian: false,
    hideprintIdCard: false,
    hidebackprintIdCard: false,

    getRoles: [],
    classList: [],
    getCard: [],
    addSection: [],
    getStudentsList: [],
    teacherList: [],
    userData: [],
    Users: [],

    cardRules: [v => !!v || "Id-Card Field is required"],
    classRules: [v => !!v || "Class Field is required"],
    sectionRules: [v => !!v || "Section Field is required"],
    studentRules: [v => !!v || "Student Field is required"],
    teacherRules: [v => !!v || "Teacher Field is required"],
    adminRules: [v => !!v || "Admin Field is required"],
    accountantRules: [v => !!v || "Accountant Field is required"],
    librarianRules: [v => !!v || "Librarian Field is required"],

    typeRules: [v => !!v || "Type is required"],
    backgroundRules: [v => !!v || "Background is required"],

    typeList: [
      {
        name: "Front Part",
        value: "frontPart"
      },
      {
        name: "Back Part",
        value: "backPart"
      }
    ],
    backgroundList: ["Yes", "No"]
  }),

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

  methods: {
    getReport() {
      if (this.getReport.form === "frontPart") {
        this.frontPart = true;
        this.backPart = false;
      }
      if (this.getReport.form === "backPart") {
        this.frontPart = false;
        this.backPart = true;
      }
    },
    getRoleInputs(role) {
      // console.log("role", role);
      if (role === 4) {
        // console.log("role", role);
        this.showClass = true;
        this.getClass();
      }
      if (role === 3) {
        this.showTeacher = true;
        this.getTeacherList();
      }
      if (role === 2) {
        this.showAdmin = true;
        this.getUserData();
      }
      if (role === 6) {
        this.showAccountant = true;
        this.getUsersList();
      }
      if (role === 7) {
        this.showLibrarian = true;
        this.getUsersList();
      }
    },

    prindIDCardReport() {
      // Pass the element id here
      this.$htmlToPaper("printMe");
    },
    getUserData() {
      http()
        .get("/getParticularUserDetail")
        .then(response => {
          this.userData = response.data.data;
          // this.adminList = response.data.data;
        })
        .catch(error => {
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getRole() {
      this.showLoader = true;
      http()
        .get("/getRolesList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.getRoles = response.data.data;
          if (this.getRoles[0].role !== 1) {
            this.getRoles = response.data.data;
            console.log("bdhcbkguvhb", this.getRoles[0].role);
          }
          // this.role = response.data.data;
          // console.log("this.role", this.role);
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          //   this.$store.dispatch("Role", null);
          // }
        });
    },
    getClass() {
      console.log("get classes");
      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;
        });
    },
    getCards() {
      http()
        .get("/getIdCardDetail", {
          headers: {
            Authorization: "Bearer " + this.token
          },
          params: {
            profileId: this.getReport._id,
            role: this.getReport.role
          }
        })
        .then(response => {
          this.getCard = response.data.data;
          this.showLoader = false;
          this.showReport = true;
        })
        .catch(error => {
          this.showLoader = false;
        });
    },
    getTeacherList() {
      this.showLoader = true;
      var token = this.$store.state.token;
      http()
        .get("/getTeachersList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.teacherList = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
    getUsersList() {
      this.showLoader = true;
      var token = this.$store.state.token;
      http()
        .get("/getUsersList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.Users = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
          }
        });
    },
    getParentDetails() {
      http()
        .get("getParentsList", {
          headers: {
            Authorization: "Bearer " + this.$store.state.token
          }
        })
        .then(response => {
          this.parentsList = response.data.data;
        })
        .catch(error => {
          // console.log("err====>", error.response.data.message);
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
            this.$store.dispatch("Role", null);
          }
        });
    }
  }
};
</script>

<style scoped>
.Data {
  width: 100%;
  float: left;
  margin-bottom: 0px;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 5px;
  text-align: justify;
}
.idcardreport {
  font-family: arial;
  max-width: 794px;
  max-height: 1123px;
  margin-left: auto;
  margin-right: auto;
  -webkit-print-color-adjust: exact;
}
.idcardreport1 {
  text-align: center;
  margin-left: 35%;
}
.icard-front {
  margin: 3px;
  float: left;
  /* border: 1px solid #000; */
  padding: 10px;
  /* width: 55%; */
  text-align: center;
  height: 95%;
}
.print-data {
  margin: 3px;
  float: left;
  /* border: 1px solid #000; */
  padding: 10px;
  /* width: 55%; */
  text-align: center;
  height: 95%;
}
.shape1 {
 float: left;
}
.shape2 {
  float: right;
}
.rightside {
  float: right !important;
}
.icard-front h2 {
  font-size: 30px;
}
.icard-back h2 {
  font-size: 30px;
}
.print-data h2 {
  font-size: 30px;
  text-align: center;
}
.print-data img {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}
.icard-front img {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}
.icard-back img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
.icard-img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 5px;
  border: 1px solid #ddd;
}
.icard-data {
  /* font-family: Arial; */
  max-width: 794px;
  max-height: 1123px;
  margin-left: auto;
  margin-right: auto;
  -webkit-print-color-adjust: exact;
}
.icard-back {
  margin: 3px;
  /* float: left; */
  /* border: 1px solid #000; */
  padding: 10px;
  /* width: 55%; */
  text-align: center;
  /* height: 95%; */
  /* margin-top: 35%; */
}
.back-icard {
  margin: 3px;
  padding: 10px;
}
.icard-back h3 {
  background-color: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px 0px;
  margin: 5px;
  margin-top: 13px;
}
.icard-back h5 {
  font-size: 11px;
  color: #000;
  font-weight: bold;
  padding: 5px 0px;
}
/* .icard-back p {
  font-size: 15px;
  color: #000;
  font-weight: 500px;
  line-height: 17px;
} */
.school-address {
  /* width: 40%; */
  font-weight: 500px;
  color: #000;
}
.address {
  font-weight: 500px;
  color: #000;
  text-align: center;
}
.icard-bottom {
  padding-top: 5px;
  text-align: center;
}
.qrcode {
  float: left;
  width: 50%;
}
.qrcode img {
  width: 60px;
  height: 60px;
  margin-top: 15px;
}
.session {
  float: right;
  width: 70%;
  margin-top: 15px;
}
@media screen and (max-width: 360px) {
  .icard-front {
    width: 316px;
    height: 418px;
    float: inherit;
  }
  .icard-back {
    float: left;
  }
}
</style>