<template>
    <div>
                                                <!-- Hero Section -->
        <section class="container-fluid">
            <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div>
            <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                <div class="flex">
                    <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
                    <select class="select max-w-xs bg3">
                        <option>Select your Age</option>
                        <option>2-3 Year</option>
                        <option>3-4 Year</option>
                        <option>4-5 Year</option>
                        <option>5-6 Year</option> 
                    </select>
                </div> 
                <!-- <div class="flex ">
                    <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
                    <select class="select max-w-xs">
                        <option>Select your Category</option>
                        <option>3-4 Year</option>
                        <option>4-5 Year</option>
                        <option>5-6 Year</option>
                        <option>6-7 Year</option>
                    </select>
                </div>  -->
            </div>
        </section>
        <section class="container mx-auto pt-10 px-4 xl:px-24">
            <span class="h1-text text-color-1">All Worksheet</span>
            <p class="font-20px text-color-2 text-justify">Gaining smooth apprehension over mathematics becomes easier with the accurate Mathematics worksheet for playgroup. Equip children with pre-maths skills at an early stage of their life and transcend them with the correct knowledge of numbers, number names, addition, etc. through Teeny Beans’ worksheet for preschoolers. </p>
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
                <div v-for="worksheet in wsmath" :key="wsmath.id" class="grid">
                    <div  class="grid place-items-center">
                        <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
                            <img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
                        </div>
                        <h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
                        <a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
                    </div>
                </div>
                
            </div>
        </section>
        <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
            <router-link to="/premium">
                <div class="flex prime-bg p-10 relative">
                    <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
                    <div class="flex justify-center absolute inset-0 place-items-center">
                        <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
                        <div v-for="worksheet in wsfmath" :key="wsfmath.id" class="grid">
                            <div  class="grid place-items-center">
                                <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
                                    <img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
                                </div>
                                <h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
                                <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8 "><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
                            </div>
                        </div>
                    </div>
                </div>
            </router-link>
        </section>
    </div>
</template>
<style scoped>

.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
.font-20px {
    font-size: 20px;
}
@media screen and (min-width: 801px) {
  .hero-text {
    font-size: 50px;
    
    
  } 
}

@media screen and (max-width: 800px) {
  .hero-text {
    font-size: 25px;
    
  }
}
@media screen and (min-width: 801px) {
  .h1-text {
    font-size: 40px;
    
    
  } 
}

@media screen and (max-width: 800px) {
  .h1-text {
    font-size: 25px;
    
  }
}
.text-color-1 {
    color: #7C4C23;
}
.text-color-1 {
    color: #7C4C23;
}
.prime-bg {
    background-color: rgba(0, 0, 0, 0.2);
}

</style>
<script>
export default {
    setup(){
    // const route = useRoute();

},

    data() {
        return {
            page: null,
            worksheets: null,
            wsmath: null,
            wsfmath: null,
            isLoading: true,

        }
    },
    mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
            .then(resp => resp.json())
            .then(worksheets => {
                this.wsmath=worksheets.data.reverse().slice(0, 4)
                // console.log(this.wsmath)
            })
            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=mathematics')
            .then(resp => resp.json())
            .then(worksheets => {
                this.wsfmath=worksheets.data.reverse().slice(5, 12)
                // console.log(this.wsfmath)
            })
       
        }
    }
</script>

