<?php get_header() ?>
<div class="wrapper--default">
<div class="mx-auto wrapper--inner">
    <section class="p-6 xl:container xl:mx-auto xl:pl-9 ">
        <h1 class="text-3xl font-semibold pb-6 xl:pb-0 md:max-w-md"><?php echo get_the_title() ?></h1>
    </section>

    <section id="app"
        class="p-6 md:p-0 flex flex-col items-center sm:flex-wrap sm:flex-row sm:justify-start xl:container xl:mx-auto xl:pb-10 ">
        <div v-if="isLoaded" v-for="(photo, index) in item.acf.zdjecia" :key="index" class="gallery-item  bg-blue"
            @click="() => showImg(index)" :style="`background-image:url(${photo.sizes.large})`"></div>
        <div v-else class="p-6 xl:mx-auto text-2xl">czekaj wczytuje dane...</div>
        <vue-easy-lightbox :visible="visible" :imgs="images" :index="index" @hide="handleHide">
        </vue-easy-lightbox>
    </section>
    <div class="sm:justify-start xl:container xl:mx-auto xl:pb-10 px-2">
        <?php echo get_the_content() ?>
        <?php the_field('description'); ?>
    </div>


    <section
        class="p-6 md:p-0 flex flex-col items-center sm:flex-wrap sm:flex-row sm:justify-start xl:container xl:mx-auto xl:pb-10 ">

        <?php

            $related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 3,           'post_type' => 'realizacje', 'post__not_in' => array($post->ID) ) );
            if( $related ) foreach( $related as $post ) {
            setup_postdata($post); ?>

        <a href="<?php echo the_permalink() ?>" class="recent-realizations-item"
            style="background-image: url(<?php echo get_the_post_thumbnail_url() ?>)">

            <p
                class="absolute text-xl bg-blue min-w-full min-h-full bg-opacity-90 h-full w-full flex items-center justify-center  text-white text-center">
                <?php echo get_the_title() ?></p>
        </a>

        <?php }
    
    wp_reset_postdata();
     
    ?>

    </section>

</div>
</div>



<script>
var app = Vue.createApp({
    el: '#app',
    data() {
        return {
            isLoaded: false,
            visible: false,
            index: 0,
            item: {
                id: '34',
                acf: {
                    zdjecia: [{
                        sizes: {
                            large: ''
                        }
                    }]
                }
            },
        }

    },
    beforeMount() {
        fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/realizacje/<?php echo get_the_ID()?>`)
            .then(res => res.json())
            .then(data => this.item = data)
            .then(this.isLoaded = true)

    },

    methods: {
        showImg(index) {
            this.index = index
            this.visible = true
        },
        handleHide() {
            this.visible = false
        },

    },
    computed: {
        images() {
            return this.item.acf.zdjecia.map(PhotoOBJ => PhotoOBJ.sizes.large)
        },

    }

})


app.use(VueEasyLightbox)
app.mount('#app')
</script>


<?php get_footer()?>