<script setup>
  import i18n from "@/i18n.js"
  import {ref, vModelSelect, watch} from 'vue'
  import {validateRegister, getAllRegisters } from '@/rest/ServiceInscription.js'
  import AboutRequest from "@/Apps/Inscription/AboutRequest.vue";
  import {
    getAllChangeCurrReq,
    getAllExemptionsRequest,
    getAllScholarShipsRequest,
    getAllUnregisters
  } from "@/rest/requests.js";
  import AboutScholarship from "@/Apps/Inscription/AboutScholarship.vue";
  import AboutUnregister from "@/Apps/Inscription/AboutUnregister.vue";
  import AboutChangeCurriculum from "@/Apps/Inscription/AboutChangeCurriculum.vue";
  import AboutExemption from "@/Apps/Inscription/AboutExemption.vue";
  import {getSelf} from "@/rest/Users.js";

  const requests = ref(await getAllRegisters());
  let targetId = "";
  const user = await getSelf()
  const requestType = ref("inscription");
  const filterType = ref("None");

  //0 = liste, 1 = détails, 2 = sure?, 3 = manage scholarship, 4 manage unregister, 5 = manage curriculum change, 6 = manage exemptions
  const windowsState = ref(0);

  async function upPage(id,review){
    await validateRegister(id,review);

    requests.value = await getAllRegisters();
  }

  async function loadRequests(){
    switch (requestType.value){
      case "inscription":
        requests.value = await getAllRegisters();
        break;
      case "scholarship":
        requests.value = await getAllScholarShipsRequest();
        break;
      case "exemption":
        requests.value = await getAllExemptionsRequest();
        break;
      case "unregister":
        requests.value = await getAllUnregisters();
        break;
      case "curriculum change":
        requests.value = await getAllChangeCurrReq();
    }
  }

  //When we come back to the list we need to reload the list
  watch(windowsState, () => {
    if (windowsState.value === 0){
      loadRequests();
    }
  })
</script>



<template>
  <div v-if="windowsState === 1">
    <AboutRequest :target="targetId" v-model:window-state="windowsState"></AboutRequest>
  </div>
  <div v-if="windowsState === 0">
    <div style="margin-top: 2%;margin-left: 2%">
      <span>Request type :   </span>
      <select v-model="requestType" @change="loadRequests()">
        <option>inscription</option>
        <option v-if="user.role === 'Admin' || user.role === 'InscriptionService'">scholarship</option>
        <option v-if="user.role === 'Admin' || user.role === 'Teacher'">exemption</option>
        <option v-if="user.role === 'Admin' || user.role === 'InscriptionService'">unregister</option>
        <option>curriculum change</option>
      </select>
      <span style="margin-left: 5%">
        Filter :
        <select v-model="filterType">
          <option>None</option>
          <option>Pending</option>
          <option>Accepted</option>
          <option>Refused</option>
      </select>
      </span>
    </div>
    <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests">
      <div class="bodu" style="width: 95%" v-if="(filterType == 'None' || filterType == item.state) && requestType !== 'exemption'">
        <div class="container" style="grid-template-columns:11% 15% 20% 10% 10% 9% 9%;grid-template-areas:'date state equivalencestate surname firstname accept refuse infos';" v-if="requestType === 'inscription'">
          <div class="date" v-if="item.submissionDate !== undefined">{{item.submissionDate.slice(0, 10)}}</div>
          <div class="state" style="font-size: 80%">Approval : {{item.state}}</div>
          <div class="equivalencestate" style="font-size: 80%">Teacher approval : {{item.equivalenceState}}</div>
          <div class="surname">{{item.lastName}}</div>
          <div class="firstname">{{item.firstName}}</div>
          <div class="accept" v-if="item.state === 'Pending'"><button @click="windowsState=2;targetId=item.id;" style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
          <div class="refuse" v-if="item.state === 'Pending'"><button @click="upPage(item.id,'Refused')" style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
          <div class="infos"><button style="background-color:rgb(105,05,105);" @click="targetId=item.id;windowsState=1;">{{i18n("request.moreInfos")}}</button></div>
        </div>
        <div class="container" style="grid-template-columns:25% 15% 15% 25% 14.2%;grid-template-areas:'date reqState studentfirstname studentlastname  infos';" v-if="requestType === 'scholarship'">
          <div class="date" v-if="item.date !== undefined"> {{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.user.firstName}}</div>
          <div class="studentlastname">{{item.user.lastName}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos" @click="windowsState = 3; targetId=item.id;"><button>More infos</button></div>
        </div>
        <div class="container" v-if="requestType === 'unregister'" style="grid-template-columns:17% 15% 12% 15%;grid-template-areas:'date reqState regno studentfirstname studentlastname infos';">
          <div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.firstName}}</div>
          <div class="studentlastname">{{item.lastName}}</div>
          <div class="regno">id : {{item.regNo}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos"><button @click="windowsState=4;targetId=item.id">More infos</button></div>
        </div>
        <div class="container" v-if="requestType === 'curriculum change'" style="grid-template-columns:17% 20% 15% 5%;grid-template-areas:'date reqState teacherApproval regno studentfirstname studentlastname infos';">
          <div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.user.firstName}}</div>
          <div class="studentlastname">{{item.user.lastName}}</div>
          <div class="reqState">IS approval : {{item.state}}</div>
          <div class="teacherApproval">Teacher approval : {{item.teacherApprovalState}}</div>
          <div class="infos"><button @click="windowsState=5;targetId=item.id">More infos</button></div>
        </div>
      </div>
      <div class="bodu" v-if="(filterType == 'None' || filterType == item.state) && requestType === 'exemption' && (item.course.owner.regNo === user.regNo || user.role === 'Admin')">
        <div class="container" style="grid-template-columns:17% 15% 12% 15% 25%;grid-template-areas:'date reqState studentfirstname studentlastname course infos';">
          <div class="date" v-if="item.date != undefined">{{item.date.slice(0,10)}}</div>
          <div class="studentfirstname">{{item.user.firstName}}</div>
          <div class="studentlastname">{{item.user.lastName}}</div>
          <div class="course">{{item.course.title}}</div>
          <div class="reqState">{{item.state}}</div>
          <div class="infos"><button @click="windowsState=6;targetId=item.id">More infos</button></div>
        </div>
      </div>
    </div>
  </div>
  <div style='display:flex; justify-content:center; min-width:1140px;margin-top: 10%' v-if="windowsState === 2">
    <p>Etes vous sur de vouloir accepter cette demande ?</p>
    <button style="background-color:rgb(105,05,105);" @click="upPage(targetId,'Accepted');windowsState=0;">Valider</button>
    <button style="background-color:rgb(105,05,105);" @click="windowsState=0;">Retour</button>
  </div>
  <div v-if="windowsState === 3">
    <AboutScholarship :req-id="targetId"></AboutScholarship>
    <div>
      <button style="margin-left: 31%; margin-top: 5%" @click="windowsState=0">Back</button>
    </div>
  </div>
  <div v-if="windowsState === 4">
    <AboutUnregister :req-id="targetId"></AboutUnregister>
    <button @click="windowsState=0">Back</button>
  </div>
  <div v-if="windowsState === 5">
    <AboutChangeCurriculum :req-id="targetId" v-model:window-state="windowsState"></AboutChangeCurriculum>
  </div>
  <div v-if="windowsState === 6">
    <AboutExemption :req-id="targetId" v-model:window-state="windowsState"></AboutExemption>
  </div>
</template>

<style scoped>
  .container{
    color:white;
    height:100px;
    font-size:20px;
    display:grid;
    column-gap:10px;
  }

  .equivalencestate{
    grid-area: equivalencestate;
    align-self: center;
  }

  .teacherApproval{
    grid-area: teacherApproval;
    align-self: center;
  }
  .studentfirstname{
    grid-area: studentfirstname;
    align-self: center;
  }

  .studentlastname{
    grid-area: studentlastname;
    align-self: center;
  }

  .course{
    grid-area: course;
    align-self: center;
  }
  .reqState{
    grid-area: reqState;
    align-self: center;
  }
  .infos {
    grid-area:infos;
    align-self:center;
  }

  .accept{
    grid-area:accept;
    align-self:center;
  }

  .refuse{
    grid-area:refuse;
    align-self:center;
  }

  .date{
    grid-area:date;
    margin-left:40px;
    align-self:center;
  }

  .regno{
    grid-area: regno;
    align-self: center;
  }
  .state{
    grid-area:state;
    margin-left:40px;
    align-self:center;
  }

  .surname{
    grid-area:surname;
    align-self:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
  }

  .firstname{
    grid-area:firstname;
    align-self:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
  }

  button{
    border:none;
    background-color:rgb(239, 60, 168);
    border-radius:10px;
    height: 35px;
    margin-top:10px;
  }

  .bodu {
    margin-top:2%;
    width:66%;
    border:2px solid black;
    border-radius:9px;
    background-color:rgb(50,50,50);
  }


</style>


