<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 " >
            <div class="flex flex-col md:flex-row justify-center  gap-4">
                <div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl">
                <div class="flex flex-row place-content-between">
                    <p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
                    <div class="flex flex-row place-items-center gap-x-2">
                    <!-- <p class="text-xl font-bold">00:00</p> -->
                    <!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
                    </div>
                </div>
                <div>
                    <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">     
                        <span>Question ID: {{ qsActive.id }}</span>
                    <p v-html="qsData[qPoint].qs"></p>
                    <div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
                        <div v-for="(item, index) in qsActive.options" :key="index + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
                            <span class="font-bold">{{ index + 1  }} </span>&nbsp;
                            <input  type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />&nbsp;
                            <!-- <p v-else>Select kor age</p> -->
                            <!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" />&nbsp; -->
                            <label :for="item" v-html="item"></label>
                        </div>
                    </div>
                    <div class="flex flex-row place-content-between mt-4 text-sm md:text-base">
                        <button v-on:click="getPrevQs" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75" :disabled="qPoint <= 0">Previous Question</button>
                        <div class="flex flex-col md:flex-row gap-2 md:gap-4">
                            <!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
                            <button :disabled="this.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 0 }"  @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
                            <!-- :class="{ 'button-visibility': this.saveAnswer <= 0 }" -->
                            <button :disabled="this.saveAnswer >= 1" :class="{ 'button-visibility': this.saveAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
                            <!-- :class="{ 'button-visibility': this.saveAnswer >= 1 }" -->
                        </div>
                        <button :disabled="qPoint >= noOfQs + 2" @click="getNextQs(); selectOption(index);" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
                    </div>
                    <!-- v-if="qPoint == noOfQs-1" -->
                    <div v-if="qPoint == noOfQs-1" class="flex flex-col place-items-center">
                        <p>Now you can submit your answer</p>
                        <button @click="submitAnswer" class="bg-[#FF0000] p-2.5 text-white font-bold rounded-lg">Final Submit</button>
                    </div>
                    </div>
                    <div v-else>No Data Found</div>
                </div>
                </div>
                <div class="flex flex-col border-t-2 border-yellow-500 shadow-lg rounded-lg p-2">
                    <p class="text-center py-4 text-xl font-bold">Your Response</p>
                    <div class="grid grid-cols-3 gap-2">
                        <p class="bg-green-600 response-indicator shadow-md font-bold text-white text-xl" v-for="(response, index) in totalAnswer" :key="index " :class="{'response' : response.answer <= 0}"> {{ index + 1}}</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            saveAnswer: 0,
            totalAnswer: [],
            qsData: "",
            noOfQs: 0,
            qPoint: 0,
            qsStatus: 0,
            countdown: 10,
            counting: false,
            qsActive:[],
            ansNo:0,
            selectedOptionIndex: null, // Add this property
        };
    },
    methods: {
        resetRadioInputs() {
            // this.selectedOptions = {};
            this.saveAnswer = null;
        },
        saveAns() {
            // if (this.saveAnswer !== null) {
                const selectedAnswer = {
                    questionId: this.qsData[this.qPoint].id,
                    answer: this.saveAnswer,
                    view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
                };
                this.totalAnswer.push(selectedAnswer);
                console.log('array', this.totalAnswer);
            // } else {
            //     // Show an alert or set a message indicating that no option is selected
            //     alert("Select an answer before saving.");
            // }
            this.resetRadioInputs();
            if (this.totalAnswer.length <= 24) {
                this.getNextQs();
            }
        },
        submitAnswer(){
            fetch(`https://api8.siliconpin.com/items/users_answers`, {
                method: 'POST',
                headers: {
                    'Content-Type' : 'application/json',
                },
                body: JSON.stringify({ answers: this.totalAnswer })
            })
            .then(response => {
                if(response.ok){
                    console.log('Data Saved Succesfully')
                } else{
                    console.log('Something Wrong')
                }
            })
            .catch(error => {
                    console.error('an error occoured', error)
                })
        },
        getNextQs() {            
            this.qPoint++;
            this.qsActive=this.qsData[this.qPoint];
            this.resetRadioInputs();
            // this.resetRadioInputs();
            // console.log(this.qsActive);            
        },
        getPrevQs() {
            this.qPoint--;
            this.qsActive=this.qsData[this.qPoint];
            this.selectOption();
        },
        reviewLater(){
            this.getNextQs();
            const selectedAnswer = {
                answer: 0,
                questionId: this.qsData[this.qPoint].id,
                view: this.viewStatus = 1// Set status to 1 for "Save Answer"
            };
                this.totalAnswer.push(selectedAnswer);
                console.log('array later', this.totalAnswer);

        },
        selectOption(index) {
            this.selectedOptionIndex = index;
        },
        // submitExam(){
        //     if (this.qPoint == this.noOfQs) {
        //         aler
        //     }
        // },
    },
    mounted() {
        fetch('/assets/qs.json')
        .then(response => response.json())
        .then(data => {
            this.qsData=data;
            this.noOfQs = this.qsData.length;
            this.qsActive=this.qsData[0];
            // console.log(this.qsActive);
            // console.log(this.noOfQs);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
        // this.remainingTime();
    },
};
</script>
<style>
.response-indicator{
    width: 45px;
    height: 45px;
    align-items: center;
    text-align: center;
    padding-top: 10px;
    border-radius: 50%;
}
.response{
    background-color: red;
}
.button-visibility{
    /* display: none; */
    opacity: 0.5;
    cursor: not-allowed;
}
    .selected-option {
        background-color: #05b3a4;
    }

</style>