<script setup>

import {addUninscReq, editScholarshipReq, getScholarshipReqById} from "@/rest/requests.js";
import i18n from "@/i18n.js";
import {getUser} from "@/rest/Users.js";
import {reactive, ref} from "vue";

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

const user = req.value.user;

const scholarshipData = reactive({
  amount : 0,
  id : req.value.id,
  state : ""
})

function getPP(){
  if(user.profilePictureUrl === null){
    return "/Clyde.png"
  }
  return user.profilePictureUrl
}

async function uploadandrefreshScholarshipRequest(){
  await editScholarshipReq(scholarshipData);
  req.value = await getScholarshipReqById(props.reqId);
}
</script>


<template>
  <div class="body">
    <div class="container">
      <div class="profilPic">
        <img class="subContainter" :src=getPP()>
      </div>
      <div class="globalInfos">
        <div class="infosContainer">
          <div>
            Firstname/Name : {{user.firstName}} {{user.lastName}}
          </div>
          <div>
            E-mail: {{user.email}}
          </div>
          <div>
            Adresse : {{user.address}}
          </div>
          <div>
            Country : {{user.country}}
          </div>
          <div>
            Birthdate : {{user.birthDate.slice(0,10)}}
          </div>
          <div>
            <button @click="">Download tax justif document</button>
            <button style="margin-left: 2%">Download residency justif document</button>
          </div>
          <div v-if="req.state == 'Pending'" style="margin-top: 2%; margin-bottom: 2%;">
            Please enter the amount to provide :
            <input type="number" v-model="scholarshipData.amount">
          </div>
          <div>
            <button v-if="req.state === 'Pending'" @click="scholarshipData.state='Accepted';uploadandrefreshScholarshipRequest()">Accept</button>
            <button v-if="req.state === 'Pending'" @click="scholarshipData.state='Refused';uploadandrefreshScholarshipRequest()" style="margin-left: 2%;">Refuse</button>
          </div>
        </div>
      </div>
    </div>
  </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:10%;
}

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

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