<template>
    <div>
        <section class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                <div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
                    <div class="flex flex-col">
                        <div>
                            <a class="flex flex-col" :href="`/hi/${item.slug}`">
                            <img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
                            <h2 class="text-lg text-justify">{{ item.title }}</h2>
                            </a>
                        </div>
                        <div>
                            <!-- Overlay -->
                            <div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
                            <dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
                                <form method="dialog">
                                    <div class="flex flex-col md:flex-col">
                                        <a :href="`/hi/${item.slug}`" class="flex flex-col md:flex-col">
                                            <img class="rounded-t-xl" :src="item.img" :alt="item.title" />
                                            <h1 class="text-lg font-bold">{{ item.heading }}</h1>
                                            <h2 class="text-justify">{{ item.in_brief }}</h2>
                                        </a>
                                        <div class="flex flex-row place-content-between place-items-center">
                                            <div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/hi/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/hi/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/hi/${item.slug}&text=%20${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/hi/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
                                                <!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.slug}`" data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.facebook.com/share.php?u=https://barta-india.in/hi/${item.slug}`" target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`http://www.twitter.com/share?url=https://barta-india.in/${item.slug}&text=${item.title}`" target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
                                                <a class="hover:-translate-y-2 duration-[1s]" :href="`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.title}`" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a> -->
                                            </div>
                                            <div class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
                                                <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" @click="closeDialog(item)">&#10008;</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </dialog>
                        </div>
                    </div>
                    <div class="flex flex-row place-content-between">
                    <button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
                    <a :href="`/hi/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        items: [],
      };
    },
    methods: {
      openDialog(item) {
        item.dialogOpen = true;
    
        window.addEventListener('keydown', this.handleKeyDown);
      },
      closeDialog(item) {
        item.dialogOpen = false;
    
        window.removeEventListener('keydown', this.handleKeyDown);
      },
      handleKeyDown(event) {
        if (event.key === 'Escape') {
        
          this.items.forEach(item => {
            item.dialogOpen = false;
          });
        
          window.removeEventListener('keydown', this.handleKeyDown);
        }
      },
      getData() {
        let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
        // console.log(fullURL);
        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-hi/?cat=${fullURL}`)
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {
            // console.log(data);
            this.items = data;

            this.items.forEach(item => {
              item.dialogOpen = false;
            });
          })
          .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
          });
      },
    },
    mounted() {
      this.getData();
    }
  };
  </script>
<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white; /* Adjust as needed */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Additional styles for the overlay (optional) */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 999; /* Ensure the overlay is above other content */
}
</style>

  