<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>
        </section>
        <section class="container mx-auto px-4 max-w-2xl">
            <div class="shadow-lg rounded-xl p-6">
                <p class="text-center">Add Question Identifier</p>
                <form @submit.prevent="saveIdentifier()" name="identifierForm">
                    <div class="flex flex-col">
                        <label for="identifierName" class="mt-4 ">Identifier Name:</label>
                        <input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
                        <label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
                        <input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number"  />
                        <div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
                    </div>
                </form>
            </div>
        </section>
        <section class="container mx-auto px-4 mt-6 md:mt-16">
           <div class="flex justify-center">
            <table class="border-2">
                <tr>
                    <th class="border-2">Sl No.</th>
                    <th class="border-2">Identifier</th>
                    <th class="border-2">Number</th>
                    <th class="border-2">Action</th>
                </tr>
                <tr v-for="(items, index) in idfrData" :key="index">
                    <td class="border-2">{{ index + 1 }}</td>
                    <td class="border-2">{{ items.identifier_name }}</td>
                    <td class="border-2">{{ items.identifier_number }}</td>
                    <td class="border-2 flex flex-row gap-x-2">
                        <a href="">Edit</a>
                        <a href="">Delete</a>
                    </td>
                </tr>
            </table>
           </div> 
        </section>
    </div>
  </template>
  <script>
    export default {
        data(){
            return{
                identifierName: "",
                identifierNumber: "",
                idfrData: null,
            };
        },
        methods:{
            saveIdentifier() {
                fetch('https://api8.siliconpin.com/items/question_identifier', {
                    method: 'POST',
                    headers:{
                        'Content-Type' : 'application/json'
                    },
                    body: JSON.stringify({
                        status: 'published',
                        identifier_name: this.identifierName,
                        identifier_number: this.identifierNumber,
                    })
                })
                .then(response => {
                    if(response.ok){
                        return response.json();
                        console.log(response)
                    }
                    return Promise.reject(response)
                })
                .then(json => {

                })
                .catch((response) => {
                    console.log(response.status, response.statusText);
                    response.json().then((json) => {
                        console.log(json.errors[0].message);
                    })
                })
            }

        },
        mounted(){
            fetch('https://api8.siliconpin.com/items/question_identifier')
            .then(response => response.json())
            .then(data => {
                this.idfrData = data.data;
                console.log(this.idfrData)
            })
            .catch(error => {
                console.error("Something Wrong", error)
            })
        }
    }
  </script>