<template>
    <div>
        <section class="container mx-auto px-4 xl:px-24">
            <span class="h1-text text-color-1">Mathematics</span>
            <p class="font-20px text-color-2 text-justify">Learning becomes easy with videos for preschoolers by Teeny Beans Preschool Curriculum that assists in a stronger foundation in Mathematics to instill the accurate skills and knowledge among children and practice time saving learning. </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 px-4">
                <div v-for="audiobooks in abliteracy" :key="abliteracy.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://management.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
                            </div>
                            <h1 class="pt-4  w-fit font-20px">{{audiobooks.title}}</h1>   
                        </div>
                    </div>
                </div>
                <div class="flex justify-center">
                    <div class="grid place-items-center">
                        <img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
                        <a href="/audio-books/literacy"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
                    </div>
                </div>
            </div>
        </section>
                    <!-- Modal -->
        <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>
    </div>
        
  </template>
  
  <script>
  
  export default {
  
    data() {
        return {
            abModal:false,
            abliteracy:null,
            abID:''
  
        }
    },
    methods: {
        showAbModal(abID){
            this.abModal=true
            this.abID=abID
            // alert(abID)
        },
        hideAbModal(){
            this.abModal=false
        //     // this.abID=abID
        },
        doNothing(){
          // alert();
        }
   
    },
        mounted: function () {
          //   this.getVideos()
          fetch('https://management.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
            .then(resp => resp.json())
            .then(audiobooks => {
                this.abliteracy=audiobooks.data
                console.log(this.abliteracy)
            })
        }   
  }
  </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;
  }
  </style>