<script setup>

import {
  addUninscReq, editChangeCurrReq, editChangeCurrReqTeacherState,
  editScholarshipReq,
  editUnregReq, getChangeCurrReqById,
  getScholarshipReqById,
  getUnregisterbyId
} from "@/rest/requests.js";
import i18n from "@/i18n.js";
import {getSelf, getUser} from "@/rest/Users.js";
import {reactive, ref} from "vue";
import AboutStudent from "@/Apps/Inscription/AboutStudent.vue";

const props = defineProps(["reqId"])
const req = ref(await getChangeCurrReqById(props.reqId))

const user = await getSelf()
//0 liste, 1 profil
const windowstate = ref(0);

const tag = req.value.user.regNo

async function uploadandrefreshChangeRequest(state){
    await editChangeCurrReq(req.value.id, state);
}

async function editChangeCurrReqTeacherApproval(state){
    await editChangeCurrReqTeacherState(req.value.id, state)
}
</script>


<template>
  <div class="body" v-if="windowstate === 0">
    <div class="container">
      <div class="globalInfos">
        <div class="infosContainer">
          <div>
            Firstname/Name : {{req.user.firstName}} {{req.user.lastName}}
          </div>
          <div>
            regNo : {{req.user.regNo}}
          </div>
          <div v-if="req.actualCurriculum !== null">
            From : Bac {{req.actualCurriculum.year}} {{req.actualCurriculum.option}}
            To : Bac {{req.destinationCurriculum.year}} {{req.destinationCurriculum.option}}
          </div>
          <div v-else>
            Wanted cursus : Bac {{req.destinationCurriculum.year}} {{req.destinationCurriculum.option}}
          </div>
          <div>
            <button @click="windowstate++"> See profile </button>
          </div>
          <div>
            <button v-if="req.state === 'Pending'" @click="req.state='Accepted';uploadandrefreshChangeRequest('Accepted')">Accept</button>
            <button v-if="req.state === 'Pending'" @click="req.state='Refused';uploadandrefreshChangeRequest('Refused')" style="margin-left: 2%;">Refuse</button>
          </div>
          <div v-if="user.role === 'Teacher' || user.role === 'Admin'">
            <button v-if="req.teacherApprovalState === 'Pending'" @click="req.teacherApprovalState='Accepted';editChangeCurrReqTeacherApproval('Accepted')">Accept equivalence</button>
            <button v-if="req.teacherApprovalState === 'Pending'" @click="req.teacherApprovalState='Refused';editChangeCurrReqTeacherApproval('Refused')">Refuse equivalence</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="windowstate === 1">
    <AboutStudent :target="tag"></AboutStudent>
    <button @click="windowstate--;">Return to request</button>
  </div>
</template>

<style scoped>
.container{
  min-width:675px;
  display:grid;
  grid-template-columns:10vw 50vw;
  grid-template-rows:200px auto;
  column-gap:2.7%;
  row-gap:45px;
  grid-template-areas:
  "profilPic globalInfos"
  "minfos minfos";
}

.profilPic{
  width:100%;
  grid-area:profilPic;
}

.globalInfos {
  grid-area:globalInfos;
  align-self :center;

}

.body {
  min-width:960px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:7%;
}

.subContainter{
  width:100%;
  background-color:rgb(50,50,50);
  border-radius:20px;
  border:4px solid black;
}

.infosContainer {
  min-width:350px;
  padding-bottom:50px;
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
}
</style>