<template>


    <div class="container-fluid bg-white mx-auto mt-3  p-0">
        <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals</h1>
        <hr class="">

        <div class="container mx-auto mt-3  p-0">


            <div v-for="(item, index) in itemByCategory.data" class="">


                <div class="flex flex-row gap-6 pt-4 pb-4">
                    <div class="w-auto border-blue-500 mt-6 mb-6">
                        <img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
                            class=" max-h-56 space-x-4 flex items-center justify-center" />
                    </div>

                    <div class="w-96">
                        <h3 class="text-1xl font-bold  uppercase mt-3 mb-3">{{ item.name }}</h3>
                        <p class="">Description </p>

                        <p class="mt-2 mb-2 font-bold">{{item.description}}</p>
                        <p class="mt-2 mb-2">Qty - 2 /-</p>
                        <p class="mt-2 mb-2">Price - Rs. {{ item.price }} /-</p>
                        <button
                            class="bg-transparent mt-4 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
                            Add To Cart
                        </button>
                    </div>

                </div>




            </div>

        </div>





    </div>

</template>

<script>
export default {
    data() {
        return {
            post: {},
            itemByCategory: {}
        }
    },
    mounted: function () {
        this.getItemByCategory()
        // console.log(this.$route.query.cat)
        // console.log(this.fruits)
        // console.log(this.$route.query.id);
        // console.log(this.$route.params.id);

    },
    methods: {
        getItemByCategory() {
            fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
                // fetch('https://api7.siliconpin.com/items/ecom55')
                .then(response => response.json())
                .then(data => this.itemByCategory = data)
            console.log(this.itemByCategory)

        }
    }
}
</script>