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

      <!-- **** Id Card Select options **** -->

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

                <v-layout>

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

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

                      label="Select Type"

                      :items="getRoles"
                      item-text="name"

                      return-object

                      @change="getRoleInputs(getReport.role)"
                      required
                    ></v-autocomplete>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- SELECT CLASS -->

              <v-flex xs12 sm12 lg4 v-if="showClass">

                <v-layout>

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

                    <v-select
                      v-model="getReport.classId"
                      label="Select Class"
                      :items="classList"
                      item-text="classNum"
                      item-value="_id"

                      @change="getSections(getReport.classId)"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- SELECT SECTION -->

              <v-flex xs12 sm12 lg4 v-if="showSections">

                <v-layout>

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

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

              <!-- SELECT STUDENT -->

              <v-flex xs12 sm12 lg4 v-if="showStudents">

                <v-layout>

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

                    <v-select

                      :items="getSelectUserData"

                      label="Select Student"
                      v-model="getReport._id"
                      item-text="name"
                      item-value="_id"

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

              <v-flex xs12 sm12 lg4 v-if="showTeacher">

                <v-layout>

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

                    <v-select
                      v-model="getReport._id"
                      label="Select Teacher"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

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

              <v-flex xs12 sm12 lg4 v-if="showAdmin">

                <v-layout>

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

                    <v-select
                      v-model="getReport._id"
                      label="Select Admin"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

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

              <v-flex xs12 sm12 lg4 v-if="showAccountant">

                <v-layout>

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

                    <v-select
                      v-model="getReport._id"
                      label="Select Accountant"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

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

              <v-flex xs12 sm12 lg4 v-if="showLibrarian">

                <v-layout>

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

                    <v-select
                      v-model="getReport._id"
                      label="Select Librarian"

                      :items="getSelectUserData "

                      item-text="name"
                      item-value="_id"

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

              <v-flex xs12 sm12 lg4>

                <v-layout>

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

                    <v-autocomplete

                      label="Select View Type"

                      type="text"

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

                      :rules="typeRules"

                      @change="getReportType(getReport.form)"

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

              <v-flex xs12 sm12 lg4>

                <v-btn
                  @click="getCards"
                  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-layout v-show="showReport">
          <v-flex xs12>
            <v-card class="transparent elevation-0">

              <!-- print button -->

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

            <v-layout row wrap id='printMe' justify-center>

            <v-card v-for="(getCard,index) in getCard" :key="index" style="page-break-after: always;">
              <v-container grid-list-md>

                <v-layout class="col-sm-12">
                  <div
                    style="font-family: arial;

                    max-width: 794px;
                    max-height: 1123px;
                    margin-left: auto;
                    margin-right: auto;
                    -webkit-print-color-adjust: exact;"

                  >
                    <div
                      style="

                       float: left;
                       height: 520px;
                       width: 520px;
                       background: #fff;
                       border: 1px solid lightgray;
                       position:relative;"

                    >
                      <!-- bottom-right-side-image -->
                      <img
                        src="/static/icon/shape1.png"
                        alt="shape"
                        style="position:absolute;width: 90px;"
                      />
                      <!-- Front Side -->
                      <v-layout
                        style="

                       text-align: center;
                       margin-top: 50px;"

                        v-if="frontPart"
                      >
                        <v-flex xs12>
                          <!-- school Logo Url -->
                          <img
                            v-if="getCard.schoolLogoUrl"
                            :src="getCard.schoolLogoUrl"
                            alt="schoollogo"
                            style="

                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"

                          />
                          <img
                            src="/static/default_thumb.png"
                            v-if="!getCard.schoolLogoUrl"
                            alt="schoollogo"
                            style="

                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"

                          />
                          <v-layout style="margin:auto">
                            <!-- profile url -->
                            <img
                              v-if="getCard.profilePicUrl"
                              :src="getCard.profilePicUrl"
                              alt="profileImage"
                              style=";

                            width: 110px;
                            margin:10px auto;
                            width: 110px;
                            margin: 10px auto;
                            border: 3px solid #323232;
                            border-radius: 12px;"

                            />
                            <img
                              style="

                          width: 110px;
                          margin:10px auto;
                          width: 110px;
                          margin: 10px auto;"

                              alt="dummy"
                              src="/static/icon/user.png"
                              v-if="!getCard.profilePicUrl && getCard.role != '2'"
                            />
                          </v-layout>

                          <p
                            style="color: #302653;font-size:24px;

                            letter-spacing: 4px;
                            margin-bottom:14px;"

                          >
                            <b>{{ getCard.name}}</b>
                          </p>
                          <p
                            style="color: #302653;

                            font-size:14px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                          >
                            <b>{{ getCard.gender}}</b>
                          </p>
                          <p
                            v-if="getCard.classId"
                            style="color: #302653;

                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                          >{{ getCard.classId.classNum }}</p>
                          <p
                            v-if="getCard.classId"
                            style="color: #302653;

                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                          >{{ getCard.sectionId.name }}</p>
                          <p
                            v-if="getCard.rollNo"
                            style="color: #302653;

                             font-size:24px;
                            letter-spacing: 2px;
                            margin-bottom:10px;"

                          >Roll: {{ getCard.rollNo }}</p>
                          <p
                            v-if="getCard.joinDate"
                            style="color: #302653;

                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"

                          >{{ dates(getCard.joinDate) }}</p>
                          <p
                            v-if="getCard.joiningDate"
                            style="color: #302653;

                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"

                          >{{ dates(getCard.joiningDate) }}</p>
                          <p
                            v-if="getCard.phone"
                            style="color: #302653;

                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"

                          >{{ getCard.phone }}</p>
                          <p
                            style="

                          font-size: 19px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 5px;
                          margin-bottom:10px;"

                          >
                            <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
                            <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
                          </p>
                          <p
                            style="

                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                          >{{ getCard.email}}</p>
                        </v-flex>
                      </v-layout>
                      <!-- back side -->
                      <v-layout style="

                       text-align: center;" v-if="backPart">

                        <v-flex xs12>
                          <!-- school Logo Url -->
                          <img
                            v-if="getCard.schoolLogoUrl"
                            :src="getCard.schoolLogoUrl"
                            alt="schoollogo"
                            style="

                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"

                          />
                          <img
                            v-if="getCard.schoolId"
                            :src="getCard.schoolId.schoolLogoUrl"
                            alt="schoollogo"
                            style="

                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"

                          />
                          <p
                            v-if="getCard.schoolLogoUrl"
                            style="color: #302653;

                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                          >
                            <b>{{ getCard.name}}</b>
                          </p>

                          <p
                            v-if="getCard.city"
                            style="

                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                          >{{ getCard.city}}</p>
                          <p
                            style="

                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                          >
                            {{ getCard.address }}
                            {{ getCard.presentAddress }}
                            <span
                              v-if="getCard.state"
                            >({{ getCard.state }})</span>
                          </p>
                          <p
                            v-if="getCard.establishmentYear"
                            style="

                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                          >{{ getCard.establishmentYear }}</p>
                        </v-flex>
                      </v-layout>
                      <!-- bottom-right-side-image -->
                      <img
                        src="static/icon/shape2.png"
                        alt="shape2"
                        style="bottom: 0;

                        position: absolute;
                        right: 0;
                        width: 110px;"

                      />
                    </div>

                  </div>

                </v-layout>
              </v-container>
            </v-card>

            </v-layout>

          </v-flex>
        </v-layout>
      </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";

  var qs = require("qs");

  
  export default {
    data: () => ({

      showLoader: false,

      valid: true,
      report: {},
      userData: {},

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

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

      hidebackprintIdCard: false,

      showStudents: false,
      showSections: false,

      getRoles: [],
      classList: [],
      getCard: [],
      addSection: [],

      // getStudentsList:
      // teacherList: [],
      getSelectUserData: [],
      // Users: [],

      getReport: {},

      typeRules: [(v) => !!v || "Type 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: {

      dates: function (date) {

        return moment(date).format("MMMM DD, YYYY");
        return date;
      },
      getReportType() {

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

        this.showReport = false;
        this.getReport._id = "";
        this.getCard = "";

        if (role.name === "STUDENT") {

          // console.log("role", role);
          this.showClass = true;

          this.showTeacher = false;
          this.showAdmin = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getClass();
        }

        if (role.name === "TEACHER") {

          this.showTeacher = true;

          this.showClass = false;
          this.showAdmin = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getTeacherList();
        }

        if (role.name === "ADMIN") {

          this.showAdmin = true;

          this.showTeacher = false;
          this.showClass = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUsersList(role.role);

        }

        if (role.name === "ACCOUNTANT") {

          this.showAccountant = true;

          this.showAdmin = false;
          this.showTeacher = false;
          this.showClass = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUsersList(role.role);

        }

        if (role.name === "LIBRARIAN") {

          this.showLibrarian = true;

          this.showAccountant = false;
          this.showAdmin = false;
          this.showTeacher = false;
          this.showClass = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUsersList(role.role);

        }
      },
  
      prindIDCardReport() {
        // Pass the element id here

          this.$htmlToPaper("printMe");
        

      },
      getUserData() {

        this.getSelectUserData = [];

        this.showLoader = true;

        http()
          .get("/getParticularUserDetail")

          .then((response) => {

            let mergeObj = {
              name: "Select All",

              id: "Select All",

            };
            this.getSelectUserData.push(mergeObj);
            let getUserDetails = response.data.data;
            this.getSelectUserData.push(getUserDetails);

            this.showLoader = false;

            // this.adminList = response.data.data;
          })

          .catch((error) => {

            this.showLoader = false;

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

          });
      },
      getRole() {
        this.showLoader = true;
        http()
          .get("/getRolesList", {

            headers: { Authorization: "Bearer " + this.token },

          })

          .then((response) => {

            var getRoles = [];
            getRoles = response.data.data;

            for (let i = 0; i < getRoles.length; i++) {

              if (
                getRoles[i].name != "SUPERADMIN" &&
                getRoles[i].name != "PARENT"
              ) {

                this.getRoles.push(getRoles[i]);
              }

            }

            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.showSections = true;

            this.showLoader = false;
          })

          .catch((err) => {

            this.showLoader = false;
            // console.log("err====>", err);
          });
      },
      getStudents() {

        this.getSelectUserData = [];

        this.showLoader = true;
        http()
          .get("/getStudentWithClass", {
            params: {
              classId: this.getReport.classId,

              sectionId: this.getReport.sectionId,
            },

          })

          .then((response) => {

            response.data.data.unshift({
              name: "Select All",

              _id: "Select All",

            });
            this.getSelectUserData = response.data.data;

            this.showStudents = true;

            this.showLoader = false;
          })

          .catch((error) => {

            console.log("err====>", error);
            this.showLoader = false;
          });
      },
      getCards() {

        var getSelectUserId = [];
        for (let i = 0; i < this.getSelectUserData.length; i++) {

          /* if the selected user id mathches any id in the original user data then push it in 
          array, this way only one id will be pushed */

          if (this.getReport._id === this.getSelectUserData[i]._id) {

            getSelectUserId.push(this.getSelectUserData[i]._id);

          } /* else if select all option is selected then all ids will be pushed */ else if (
            this.getReport._id == "Select All"
          ) {

            getSelectUserId.push(this.getSelectUserData[i]._id);

            if (
              getSelectUserId[0] == undefined ||
              getSelectUserId[0] == "Select All"
            ) {
              getSelectUserId.shift();

            }
          }
        }

        if (this.$refs.form.validate()) {

          this.showLoader = true;

          // var strigified = JSON.stringify(getSelectUserId)

          // var profileId = [];
          // profileId = getSelectUserId;

          http()
            .get("/getIdCardDetail", {
              headers: {

                Authorization: "Bearer " + this.token,

              },

              params: {
                profileId: getSelectUserId,
                role: this.getReport.role.role,
              },

              paramsSerializer: (params) => {
                return qs.stringify(params);
              },
              // params: {
              //   profileId: strigified,
              //   role: this.getReport.role.role,
              // },

            })

            .then((response) => {

              this.getCard = "";

              var data = response.data.data;

              if (data.adminData && data.adminData.length != 0) {

                this.getCard = response.data.data.adminData;

                // console.log("this.getCard ", this.getCard);

              }

              if (data.teachersData && data.teachersData.length != 0) {

                this.getCard = response.data.data.teachersData;

              }

              if (data.studentData && data.studentData.length != 0) {

                this.getCard = response.data.data.studentData;

                // console.log("this.getCard--studentData ", this.getCard);

              }

              if (data.usersData && data.usersData.length != 0) {

                this.getCard = response.data.data.usersData;

                // console.log("this.getCard--usersData   ", this.getCard);

              }
              // console.log("this.getCard--all ", response.data.data);
              this.showLoader = false;
              this.showReport = true;
            })

            .catch((error) => {

              this.showLoader = false;

              // console.log("error", error.response.data.errors);

              // if (error.response.data.errors) {
              //   this.snackbar = true;
              //   this.text = " Field is required";
              //   this.color = "error";
              // }

            });
        }

      },
      getTeacherList() {

        this.getSelectUserData = [];

        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getTeachersList", {

            headers: { Authorization: "Bearer " + token },

          })

          .then((response) => {

            response.data.data.unshift({
              name: "Select All",

              _id: "Select All",

            });
            this.getSelectUserData = 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(role) {

        this.getSelectUserData = [];

        this.showLoader = true;
        var token = this.$store.state.token;
        http()

          .get("/getUsersList?role=" + role, {

            headers: { Authorization: "Bearer " + token },

          })

          .then((response) => {

            response.data.data.unshift({
              name: "Select All",

              _id: "Select All",

            });
            this.getSelectUserData = 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;

    padding: 10px;

    text-align: center;

    height: 520px;
    width: 520px;
    background: #fff;
    border: 1px solid lightgray;

  }
  .print-data {
    margin: 3px;
    float: left;
    /* border: 1px solid #000; */

    padding: 10px;

    /* width: 55%; */

    text-align: center;

    height: 95%;
  }

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