<template>
    <div>
                                                <!-- Hero Section -->
        <section class="container-fluid shadow-2xl">
            <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">Audio Books for <span class="text-color-1">Mathematics</span></div>
            <!-- Age Filter Triger -->
            <!-- <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> -->
        </section>
        <section class="container mx-auto pt-10 px-6 xl:px-24">
            <span class="h1-text text-color-1">All Audio Books</span>
            <p class="font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
                <div v-for="audiobooks in abmath" :key="abmath.id" class="grid mt-16">
                    <div  class="grid place-items-center">
                        <div class="relative rounded-tl-xl">
                            <label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
                                <img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
                                <h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
                            </label>
                            <input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
                            <label :for="audiobooks.file" class="modal">
                                <label class="modal-box relative" for="">
                                    <audio controls >
                                    <source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                    </audio>
                                </label>
                            </label>
                        </div>
                        <!-- <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>
        </section>
        <section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
            <router-link to="/premium">
                <div class="flex prime-bg p-10 relative justify-center">
                    <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 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
                        <div v-for="audiobooks in abfmath" :key="abfmath.id" class="grid">
                            <div  class="grid place-items-center">
                                    <img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
                                <h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
                            </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;
}
.prime-bg {
    background-color: rgba(0, 0, 0, 0.2);
}

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

    data() {
        return {
            page: null,
            worksheets: null,
            ablitreacy: null,
            abmath: null,
            wsWorld: null,
            abfmath: null,
            isLoading: true,

        }
    },
    mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=5')
            .then(resp => resp.json())
            .then(worksheets => {
                this.abmath=worksheets.data
                // console.log(this.abmath)
            })
            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=10')
            .then(resp => resp.json())
            .then(worksheets => {
                this.abfmath=worksheets.data
                // console.log(this.abfmath)
            })
       
        }
    }
</script>

