<template>
    <div>
        <section class="container-fluid bg-green-600 mb-16">
            <div class="container mx-auto px-4 ">
                <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
            </div>
            <!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
        </section>
        <section class="container mx-auto px-4" v-for="item in qsData" :key="item.id">
      <div class="flex flex-col justify-center place-items-center">
        <div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-xl">
          <div class="flex flex-row place-content-between">
            <p class="text-xl font-bold">Question {{ item.id }}</p>
            <div class="flex flex-row place-items-center gap-x-2">
              <i id="spinclock" class="fa fa-clock-o" style="font-size:30px" />
              <p class="text-xl font-bold" id="countdown">00:00</p>
            </div>
          </div>
          <div>
            <p class="mt-4 text-2xl">{{ item.qs }}</p>
            <div class="flex flex-col gap-y-4 rounded-lg mt-4">
              <!-- Loop through the options dynamically -->
              <div v-for="(option, index) in item.options[0]" :key="index" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
                <span class="font-bold">{{ index }}.</span>
                <input v-model="selectedOptions[item.id]" type="radio" :name="'questionOption' + item.id" :id="'option' + item.id" :value="option + item.id">
                <label :for="'option' + item.id " v-html="option"></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="flex flex-row place-content-between mt-4">
        <button class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Previous</button>
        <button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Save for Later</button>
        <button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save & Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: {}, // Use an object to store selected options for each question
      qsData: null,
    };
  },
  methods: {
    getQutValue() {
      console.log(this.selectedOptions);
    },
  },
  mounted() {
    fetch('/assets/qs.json')
      .then(response => response.json())
      .then(data => {
        this.qsData = data;
        console.log(this.qsData);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
};
</script>