<template>
   <section class="container mx-auto py-20 px-4 xl:px-24">
        <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
            <div class="grid h-fit ">
                <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
                <div  v-for="faqAdministrators in faqAdministrators" :key="faqAdministrators.id" class="">
                    <details>
                        <summary> 
                            <div class="flex inline-flex cursor-pointer" v-if="faqAdministrators"> &nbsp; {{ faqAdministrators.title }}</div>
                        </summary>
                            <div  v-html="faqAdministrators.content"></div>
                    </details>
                </div>
            </div>
            <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
        </div>
    </section>
</template>
<script >
export default {
setup(){
// // const siteData = reactive({
//   title: 'Blogs - Teeny Beans Preschool Curriculum',
//   description: `My beautiful website`,
  
// })



},
    data() {
        return {
            page: null,
            faqBlog: null,
            isLoading: true,
            bname: null,
            bemail: null,
            bnumber: null,
            BlogQry: true,
            metaname: "KKKK",
            metadescription: "Description",
            items:null
        }
    },
    
    mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
          .then(response => response.json())
          .then(data => {
            this.page = data.data
            this.isLoading = false
            this.metaTitle=this.page[0].title
            const descEl = document.querySelector('head meta[name="description"]');
            const titleEl = document.querySelector('head title');
            descEl.setAttribute('content', this.page[0].title);
            titleEl.textContent = this.page[0].title;
            
        })
        fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
        .then(resp => resp.json())
        .then(data => {
            this.faqBlog=data.data
            console.log(this.faqBlog)
        })

    },
    
        
        
    methods: { 
        saveBlogQry(){
        let formData = new FormData();
        formData.append('Name', this.bname);
        formData.append('Email', this.bemail);
        formData.append('Phone', this.bnumber);
        formData.append('formName', 'tb-blog');
        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
            {
                method: 'POST',
                body: formData,
            }
        )
        .then(response => response.json())
        .then(data => {
            // console.log(data)
        });
        // formData=""
        this.BlogQry=false
    }
   


},

}

</script>

<style>
    details {
    font-weight: lighter;
    border-bottom: 1px solid #d4d4d4;
    border-color: #d4d4d4;    
    padding: .75em .75em 0;
    font-size: 18px;
	/* margin-top: 10px; */
	/* box-shadow:0 0 8px #d4d4d4; */
}

summary {	
    margin: -.75em -.75em 0;
    padding: .75em;
}

details[open] {
    padding: .75em;
	  border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}
</style>