<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">Literacy</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 font-semibold">All Audio Books</span>
            <p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
                <div v-for="audiobooks in ablitreacy" :key="ablitreacy.id" class="grid">
                    <div @click="showAbModal(audiobooks.file)">
                        <div class="grid place-items-center">
                            <div class=" ">
                                <img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
                            </div>
                            <h1 class="pt-4  w-fit font-20px">{{audiobooks.title}}</h1>   
                        </div>
                    </div>
                </div> 
            </div>
        </section>
        <section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
            <a href="/premium">
                <div class="flex prime-bg p-16 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 w-full">
                        <div v-for="audiobooks in abfliteracy" :key="abfliteracy.id" class="grid">
                            <div class="grid place-items-center">
                                    <img class="w-56" 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>
            </a>
        </section>
        <div v-if="abModal" id="abModal" class="flex justify-center abModal">
            <div class="modal-content" @click="doNothing()">
                <span  @click="hideAbModal" class="close">&times;</span>
                <audio controls>
                    <source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
    </div>
</template>
<style scoped>

.abModal {
  /* display: none;  */
  position: fixed;
  z-index: 999991;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  }
  .modal-content{
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border: 1px solid #888;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    border-radius: 16px;
  }
  .close {
    display: flex;
    place-items: center;
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
.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,
            audiobooks: null,
            ablitreacy: null,
            wsMath: null,
            wsWorld: null,
            abfliteracy: null,
            isLoading: true,
            abModal:false,
            abID:''

        }
    },
    methods: {
        showAbModal(abID){
          this.abModal=true
          this.abID=abID
          // alert(abID)
      },
      hideAbModal(){
          this.abModal=false
      //     // this.abID=abID
      },
      doNothing(){
        // alert();
      }
    }, 
    mounted: function () {
        fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
            .then(resp => resp.json())
            .then(audiobooks => {
                this.ablitreacy=audiobooks.data.reverse().slice(0, 4)
                // console.log(this.ablitreacy)
            })
            fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
            .then(resp => resp.json())
            .then(audiobooks => {
                this.abfliteracy=audiobooks.data.reverse().slice(4, 8)
                // console.log(this.abfliteracy)
            })
       
        }
    }
</script>

