<template>
  <v-app id="login">
    <v-container fluid>
      <v-card class="px-3 grey lighten-2" flat>
        <v-flex xs12>
          <v-layout wrap>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label>Academic Year :</label>
              </v-flex>
              <v-flex md10>
                <v-select
                  :items="acedemicYear"
                  v-model="promotion.year"
                  item-value="year"
                  item-text="year"
                  label="promotion.year"
                ></v-select>
              </v-flex>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label class>Class :</label>
              </v-flex>
              <v-flex md10 class="ml-2">
                <v-select
                  v-model="promotion.classId"
                  label="Select your class"
                  type="text"
                  :items="classList"
                  item-text="classNum"
                  item-value="_id"
                  required
                ></v-select>
              </v-flex>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label>Promotion Academic Year :</label>
              </v-flex>
              <v-flex md10>
                <v-select
                  :items="acedemicYear"
                  v-model="promotion.year"
                  item-text="year"
                  label="Select Promotion Academic Year"
                ></v-select>
              </v-flex>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label class>Promotion Class :</label>
              </v-flex>
              <v-flex md10 class="ml-2">
                <v-select :items="acedemicYear" label="Select Promotion Class"></v-select>
              </v-flex>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-card>
      <!-- <v-container class="pb-0">
        <v-card class="px-3 grey lighten-2" flat>
          <v-flex xs12>
            <v-layout>
              <v-flex xs12 sm12 md12>
                <v-layout>
                  <v-radio-group v-model="radios" :mandatory="false">
                    <v-layout>
                      <v-flex xs12 sm12 md6>
                        <v-layout>
                          <v-radio label="Normal" value="radio-1" class="mx-auto"></v-radio>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12 sm12 md6>
                        <v-layout>
                          <v-radio label="Advance" value="radio-2" class="mx-auto"></v-radio>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-radio-group>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-card>
      </v-container>
      <v-container fluid>
        <v-layout wrap>
          <v-flex xs12 sm12 md6>
            <v-layout>
              <v-flex xs12 sm12 md11>
                <v-card class="px-3 grey lighten-2" flat>
                  <v-layout wrap>
                    <v-flex xs12 sm12 md5 class="mt-4 body-1">
                      <label>Exam</label>
                    </v-flex>
                    <v-flex sm12 xs12 md7>
                      <v-checkbox v-model="selected" label="FIRST TERMINAL" value="John"></v-checkbox>
                      <v-checkbox
                        v-model="selected"
                        label="SECOND TERMINAL"
                        value="Jacob"
                        class="mt-0"
                      ></v-checkbox>
                      <v-checkbox v-model="selected" label="Test07" value="Jacobs" class="mt-0"></v-checkbox>
                    </v-flex>
                  </v-layout>
                </v-card>
              </v-flex>
            </v-layout>
          </v-flex>
          <v-flex xs12 sm12 md6>
            <v-layout wrap>
              <v-flex xs12 sm12 md12>
                <v-card class="px-3 grey lighten-2" flat height="160">
                  <v-layout wrap>
                    <v-flex xs12 sm12 md5 class="mt-4 body-1">
                      <label>Mark Percentage</label>
                    </v-flex>
                    <v-flex xs12 sm12 md7>
                      <v-checkbox v-model="selected" label="Exam " value="John"></v-checkbox>
                      <v-checkbox v-model="selected" label="ASSIGNMENT" value="Jacob" class="mt-0"></v-checkbox>
                    </v-flex>
                  </v-layout>
                </v-card>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
      <v-card class="px-3 grey lighten-2" flat>
        <v-flex xs12>
          <v-layout wrap>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label>HINDI Pass Mark :</label>
              </v-flex>
              <v-flex md10>
                <v-text-field v-model="passmark.hindi" placeholder="fill Hindi Pass Mark"></v-text-field>
              </v-flex>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label class>ENGLISH Pass Mark :</label>
              </v-flex>
              <v-flex md10 class="ml-2">
                <v-text-field v-model="passmark.english" placeholder="fill English Pass Mark"></v-text-field>
              </v-flex>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-flex md12 class="mt-4 body-1">
                <label>MATHEMATICS Pass Mark :</label>
              </v-flex>
              <v-flex md10>
                <v-text-field
                  v-model="passmark.mathematics"
                  placeholder="fill Mathematics Pass Mark"
                ></v-text-field>
              </v-flex>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-card>-->
      <v-layout>
        <v-flex xs10 sm10 md4 class="mx-auto mt-4">
          <v-btn class="black" dark block round>Promotion Mark Setting</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

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

export default {
  data() {
    return {
      radios: "radio-1",
      acedemicYear: [],
      classList: [],
      promotion: {
        // academicYear: ""
      },
      passmark: {
        hindi: "40",
        english: "40",
        mathematics: "40",
      },
      selected: ["John", "Jacob", "Jacobs"],
      token: "",
    };
  },
  mounted() {
    var year = new Date().getFullYear() + 1;
    // this.promotion.acedemicYear = new Date().getFullYear() + "-" + year;
    this.acedemicYear.push({ year: new Date().getFullYear() + "-" + year });
    // console.log("  this.promotion.acedemicYear ", this.acedemicYear);
    this.token = this.$store.state.token;
    this.getClass();
  },
  methods: {
    getClass() {
      http()
        .get("/getClassesList", {
          headers: { Authorization: "Bearer " + this.token },
        })
        .then((response) => {
          this.classList = 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);
            this.$store.dispatch("Role", null);
          }
        });
    },
  },
};
</script>