<script setup>

  import {ref} from 'vue'
const cursus=[
  {
  "id": 12,
  "name": "Math pour l'info",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},
  {
  "id": 42,
  "name": "Operating Systems",
  "credits": 8,
  "faculty": "science",
  "teacher": 14,
  "Assistants": []},
  {
  "id": 52,
  "name": "Fonctionnement des ordinateurs",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},

  ]

  const pattern = {

  "id": 0,
  "name": null,
  "credits": null,
  "faculty": null,
  "teacher": null,
  "Assistants": []}

const profList=[42,45,62,84,59]

  const createMod = ref(false)
  const deleteMod = ref(false)

  const editElementID = ref(""); 


  let toAdd = Object.assign({}, pattern);

  function addToCourse (){
    toAdd.id=(cursus[cursus.length-1].id)-1;
    let isnull= false;
    for(const [key, value] of Object.entries(toAdd)){
      console.log(value)
      if(value === null){
        isnull=true;
      }
      console.log(isnull)
    }
     console.log(toAdd) 
      if (!isnull){
      cursus.push(toAdd);
      }
      
      toAdd= Object.assign({},pattern);
    } 

  function editItem(id){
    editElementID = id;
  }

</script>
<template>
  <div class="body">
    <div class="listTitle buttonGrid">
      <button class="create" @click="createMod = true" v-if="!deleteMod && !createMod">
        Create Course
      </button>
      <button v-if="createMod" class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button>
      <button class="delete" @click="deleteMod=true" v-if="!deleteMod && !createMod">
        Delete Course
      </button>
    </div>
    <div v-if="createMod">
      <form class="listElement">
        <div>
         Name: 
        <input v-model="toAdd.name">
        </div>
        <div>
          Teacher: 
         <select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
          <option v-for="item in profList">{{item}}</option>
        </select>
        </div>
        <div>
          Credit: 
        <input v-model="toAdd.credits">
        </div>
        <div>
          Faculty: 
        <input v-model="toAdd.faculty">
        </div>
      </form>
    </div>
    <div v-if="!createMod" v-for="item in cursus" :key="item.name">
      <div style ="padding:15px 15px 15px 15px;">
      <button  v-if="editElementID !== item.name"  @click="editElementID = item.name"> Modify</button>
      <button v-else @click="editElementID= ''"> Confirm </button>
      </div>
      <div  class="listElement" > 
      <div class="containerElement" v-if="editElementID !== item.name" >

        <div class="name"> {{item.name}} </div>
        <div class="teacher">{{item.teacher}}</div> 
        <div class="credits">Credits:{{item.credits}}</div>  
      </div>
      <div class="containerElement"v-else>
        <input style="max-width:200px;" class="name" v-model="item.name">
        <select style="max-width:200px;" class="teacher" v-model="item.teacher">
          <option v-for="item in profList">{{item}}</option>
        </select>
        <input style="max-width:100px;"class="credits" v-model="item.credits">  
      </div>
    </div>
    </div>
  </div>
</template>

<style scoped>
.body {
    width:100%;
    margin-bottom:10px;
  }
 .containerElement{ 
   justify-content:center;
    display:grid;
    grid-template-columns:350px 350px 200px;
    grid-template-areas:
    "name teacher credits"; 
    column-gap:10px;
    
  }
  
  .name {
    grid-area:name;
    align-self:center;
  }

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

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

.listElement{
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
  margin-bottom:10px;
}

.modify{
  font-size:25px;
  padding:10px 10px 10px 10px;
  background-color: rgb(239,60,168);
  cursor: pointer;
  border:none;
  border-radius:15px;
}

  input, select{
  
  font-size:25px;
  cursor: pointer;
  border:none;
  border-radius:15px;
  }
  button{
    font-size:15px;
     height:50px;
     width:100px;
    border:none;
    border-radius:20px;

  }

  .buttonGrid{
    display:grid;
    grid-template-columns: auto auto;
    column-gap:50px;
    grid-template-areas:
      "create delete";
  }

  .create{
    grid-area:create;
    
    background-color:rgb(0,200,0);

  }

  .delete{
    grid-area:delete;
    background-color:rgb(200,0,0);
  }

  .listTitle{
    display: flex;
    justify-content: center;
    align-items: center;
    width:400px;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    font-size:25px;
    color:white;
    padding:20px;
    background-color:rgb(50,50,50);
    border-radius:20px;margin-bottom:10px;

    button:hover{
      opacity:0.8;
    }
}
</style>
