<template>
    <section class="container mx-auto pt-10 px-4 xl:px-24">
        <span class="h1-text text-blue-700 font-semibold">Audio Books</span>
        <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].audio_books_text}}</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-12 gap-10 place-items-center px-4">
            <div v-for="audiobooks in audiobooks" :key="audiobooks.id" class="grid">
                <div @click="showAbModal(audiobooks.file)">
                    <div class="grid place-items-center cursor-pointer">
                        <div class=" ">
                            <img class="w-56" v-if="audiobooks.audio_icon" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.audio_icon" :alt="audiobooks.alt_text"/>
                        </div>
                        <h1 class="pt-4  w-fit font-20px text-center">{{audiobooks.title}}</h1>   
                    </div>
                </div>
            </div>
        </div>
    </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://management.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
</template>
<script>
  
export default {

  data() {
      return {
          page:null,
          abModal:false,
          audiobooks:null,
          abworld:null,
          abmath:null,
          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://management.beanstalkedu.com/items/themes?filter[status][_eq]=published')
            .then(response => response.json())
            .then(data => {
                this.page = data.data
                this.isLoading = false
                // console.log(this.page[0].id)
                return this.page[0].id
            })
            .then((themesID) => {
                fetch('https://management.beanstalkedu.com/items/theme_audio_book?filter[theme_key][_in]='+ themesID)
                .then(resp => resp.json())
                    .then(audiobooks => {
                        this.audiobooks=audiobooks.data.reverse().slice(0, 4)
                        // console.log(this.videos)
                    })
                    return themesID
            })
            
      
            
    }  
}
</script>

<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;
}

.text-color-2 {
    color: #333333;
}
/* DROPDOWN MENU */
.services {
 position: relative; 
}
.dropdown {
 z-index: 999;
 background-color: rgb(247, 235, 173);
 padding: 1em 0;
 position: absolute; /*WITH RESPECT TO PARENT*/
 display: none;
 border-radius: 8px;
 top: 35px;
 margin-left: -30px;
}
.dropdown li + li {
 margin-top: 10px;
}
.dropdown li {
 padding: 0.5em 1em;
 width: 8em;
 text-align: center;
}
.dropdown li:hover {
  background-color: rgb(250, 230, 133);
 color: #ff0000;
}
.services:hover .dropdown {
 display: block;
}



input[type=checkbox]{
 display: none;
}
</style>
