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