{"version":3,"file":"Show-C3nMEpIl.js","sources":["../../../resources/js/Components/Elements/H3.vue","../../../resources/js/Components/Product/ProductImageSlider.vue","../../../resources/js/Pages/Public/Product/Show.vue"],"sourcesContent":["<template>\n    <h3 class=\"font-jum-bold text-2xl font-bold\">\n        <slot />\n    </h3>\n</template>\n","<script setup>\nimport {computed, ref} from 'vue';\nimport {XMarkIcon} from '@heroicons/vue/20/solid';\nimport {Swiper, SwiperSlide} from 'swiper/vue';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\n\n// import required modules\nimport {Navigation, Pagination} from 'swiper';\nimport ProductImage from '@/Components/Product/ProductImage.vue';\nimport {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/24/outline';\n\nconst props = defineProps({\n    media: Object,\n});\n\nlet shownPhoto = ref(0);\nlet carouselIndex = ref(1);\n\nlet modalMedia = ref(null);\n\nconst mediaList = computed(() => {\n    return props.media;\n});\n</script>\n\n<template>\n    <div class=\"relative\">\n        <div\n            v-for=\"(item, index) in mediaList\"\n            v-show=\"shownPhoto === index\"\n            :key=\"index\"\n            class=\"relative w-full\"\n        >\n            <ProductImage\n                :media=\"item\"\n                @click=\"modalMedia = item\"\n            />\n        </div>\n\n        <div class=\"mt-3 flex w-full gap-2\">\n            <button\n                v-if=\"mediaList.length === 4\"\n                :disabled=\"!(carouselIndex != 1)\"\n                @click=\"carouselIndex = carouselIndex - 1\"\n            >\n                <ChevronLeftIcon\n                    :class=\"!(carouselIndex != 1) ? 'text-gray-400' : 'text-dark'\"\n                    class=\"size-10\"\n                />\n            </button>\n\n            <div\n                v-for=\"(item, index) in mediaList\"\n                v-show=\"\n                    (carouselIndex === index || carouselIndex + 1 === index || carouselIndex - 1 === index) &&\n                        mediaList.length > 1\n                \"\n                :key=\"index\"\n                class=\"relative transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-110\"\n                @click=\"\n                    (shownPhoto = index), index !== mediaList.length - 1 && index !== 0 ? (carouselIndex = index) : null\n                \"\n            >\n                <img\n                    :alt=\"item?.alt_text ?? 'General shop image'\"\n                    :src=\"item.src\"\n                    :srcset=\"item?.src_set\"\n                    class=\"h-12 w-14 rounded object-cover min-[450px]:h-18 min-[450px]:w-22\"\n                >\n            </div>\n            <button\n                v-if=\"mediaList.length === 4\"\n                :disabled=\"!(carouselIndex < mediaList.length - 2)\"\n                @click=\"carouselIndex = carouselIndex + 1\"\n            >\n                <ChevronRightIcon\n                    :class=\"!(carouselIndex < mediaList.length - 2) ? 'text-gray-400' : 'text-dark'\"\n                    class=\"size-10\"\n                />\n            </button>\n        </div>\n    </div>\n\n    <div\n        v-if=\"modalMedia?.src\"\n        class=\"fixed left-0 top-0 z-50 flex size-full select-none items-center justify-center bg-gray-900 bg-opacity-75\"\n    >\n        <button\n            class=\"absolute right-0 top-0 z-50 mr-1 mt-1 inline-flex rounded-full text-white hover:text-gray-500\"\n            type=\"button\"\n            @click=\"modalMedia = null\"\n        >\n            <span class=\"sr-only\">{{ $t('Close') }}</span>\n            <XMarkIcon\n                aria-hidden=\"true\"\n                class=\"size-15\"\n            />\n        </button>\n        <swiper\n            :initial-slide=\"shownPhoto\"\n            :modules=\"[Navigation, Pagination]\"\n            :style=\"{\n                '--swiper-navigation-color': '#fff',\n                '--swiper-pagination-color': '#fff',\n            }\"\n            navigation\n            pagination\n            @click=\"modalMedia = null\"\n        >\n            <swiper-slide v-for=\"(item, index) in mediaList\">\n                <div class=\"flex size-full content-center items-center justify-center\">\n                    <img\n                        :alt=\"item?.alt_text ?? 'General shop image'\"\n                        :src=\"item.src\"\n                        :srcset=\"item?.src_set\"\n                        class=\"size-full max-h-full max-w-full object-contain\"\n                    >\n                </div>\n            </swiper-slide>\n        </swiper>\n    </div>\n</template>\n\n<style scoped>\n.swiper {\n    width: 100%;\n    height: 100%;\n}\n\n.swiper-slide {\n    overflow: hidden;\n}\n</style>\n","<script setup>\nimport Breadcrumb from \"@/Components/Breadcrumb.vue\";\nimport H3 from \"@/Components/Elements/H3.vue\";\nimport Button from \"@/Components/Inputs/Button.vue\";\nimport Price from \"@/Components/Product/Price.vue\";\nimport ProductGrid from \"@/Components/Product/ProductGrid.vue\";\nimport ProductImageSlider from \"@/Components/Product/ProductImageSlider.vue\";\nimport PublicLayout from \"@/Layouts/PublicLayout.vue\";\nimport {useCartStore} from \"@/stores/cart\";\nimport {useGtm} from \"@gtm-support/vue-gtm\";\nimport {usePage} from \"@inertiajs/vue3\";\nimport {computed, inject} from \"vue\";\n\nconst route = inject(\"route\");\n\nconst props = defineProps({\n    page: Object,\n    product: Object,\n    related_products: Object,\n    articles: Object,\n});\n\nconst shoppingCart = useCartStore();\n\nconst productType = computed(() => {\n    if (props.product.is_discount_currently_active) {\n        return \"discount\";\n    }\n    return \"default\";\n});\n\nlet productCategories = computed(() => {\n    return props.product.schema_data.map((category) => category.id);\n});\nlet productUncombinable = computed(() => {\n    return props.product.schema_data\n        .map((productCategories) => productCategories.uncombinable.map((uncombinable) => uncombinable.id))\n        .flat(2);\n});\n\nlet uncombinableProducts = computed(() => {\n    return shoppingCart.products.filter((product) => {\n        if (\n            product.schema_data\n                .map((productCategories) => productCategories.uncombinable.map((uncombinable) => uncombinable.id))\n                .flat(2)\n                .some((element) => productCategories.value.includes(element))\n        ) {\n            return true;\n        } else if (\n            product.schema_data\n                .map((category) => category.id)\n                .some((element) => productUncombinable.value.includes(element))\n        ) {\n            return true;\n        }\n\n        return false;\n    });\n});\n\nconst auth = usePage().props.auth;\n\nfunction orderNow(product) {\n    useGtm().trackEvent({event: \"addtocart\"});\n    shoppingCart.interactWithProduct(product)\n}\n</script>\n\n<template>\n    <PublicLayout\n        :description=\"product.page?.seo_description\"\n        :image=\"product.og_image\"\n        :title=\"product.page?.seo_title\"\n    >\n        <Breadcrumb\n            :pages=\"[\n                { name: $t('Products'), href: route('public.products.index'), current: false },\n                {\n                    name: product.title,\n                    href: route('public.products.show', { product: product.page.slug }),\n                    current: true,\n                },\n            ]\"\n        />\n\n        <div class=\"mx-auto max-w-7xl px-4 pb-8 pt-10 sm:px-6 sm:pt-24\">\n            <div class=\"grid grid-cols-1 gap-12 sm:grid-cols-12 sm:gap-4 md:gap-12\">\n                <div class=\"sm:col-span-5\">\n                    <ProductImageSlider :media=\"product.media\" />\n                </div>\n\n                <div class=\"flex flex-col gap-8 sm:col-span-7\">\n                    <div\n                        :class=\"[['default'].includes(productType) ? 'bg-lightGray-400' : 'bg-white']\"\n                        class=\"w-full rounded-3xl px-4 py-6 sm:rounded-xl\"\n                    >\n                        <div class=\"flex flex-col gap-12\">\n                            <span class=\"px-1 text-base font-bold\">{{ product.title }}</span>\n\n                            <div class=\"flex flex-col\">\n                                <span\n                                    v-if=\"!product.min_order\"\n                                    class=\"text-sm\"\n                                >{{\n                                    $t(Object.keys(product.properties)[0])\n                                }}</span>\n                                <span\n                                    v-else\n                                    class=\"text-sm\"\n                                >Vanaf: {{ product.min_order }}</span>\n                                <Price\n                                    :discount_price=\" product.discounted_price_including_vat < product.price_including_vat ? product.discounted_price_including_vat : null\"\n                                    :price=\"(product.min_order ?? 1) * product.price_including_vat\"\n                                />\n                            </div>\n                            <div class=\"\">\n                                <Button\n                                    :disabled=\"!!uncombinableProducts.length\"\n                                    full-width\n                                    @click=\"orderNow(product)\"\n                                >\n                                    {{ $t('Order now') }}\n                                </Button>\n\n                                <div\n                                    v-if=\"uncombinableProducts.length\"\n                                    class=\"mt-3\"\n                                >\n                                    <p class=\"text-sm\">\n                                        {{ $t(\"Not available with product(s):\") }}\n                                    </p>\n\n                                    <div class=\"my-3 flex flex-wrap gap-2\">\n                                        <span\n                                            v-for=\"product in uncombinableProducts\"\n                                            :key=\"product.id\"\n                                            class=\"inline-flex items-center rounded-full bg-gray-100 py-0.5 pl-2.5 pr-1 text-sm font-medium text-gray-700\"\n                                        >\n                                            {{ product.title }}\n                                            <Button\n                                                class=\"ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:bg-gray-500 focus:text-white focus:outline-none\"\n                                                disable-style\n                                                type=\"button\"\n                                                @click=\"shoppingCart.deleteProduct(product.id)\"\n                                            >\n                                                <svg\n                                                    class=\"size-2\"\n                                                    fill=\"none\"\n                                                    stroke=\"currentColor\"\n                                                    viewBox=\"0 0 8 8\"\n                                                >\n                                                    <path\n                                                        d=\"M1 1l6 6m0-6L1 7\"\n                                                        stroke-linecap=\"round\"\n                                                        stroke-width=\"1.5\"\n                                                    />\n                                                </svg>\n                                            </Button>\n                                        </span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"flex w-full flex-wrap gap-3\">\n                        <div\n                            v-for=\"allergen in product.allergens\"\n                            class=\"flex flex-col content-center items-center\"\n                        >\n                            <img\n                                :alt=\"allergen\"\n                                :src=\"'/allergens/' + allergen + '.svg'\"\n                                class=\"size-12\"\n                            >\n\n                            <span class=\"w-12 text-center text-sm\">{{ $t(allergen) }}</span>\n                        </div>\n                    </div>\n\n                    <div class=\"flex w-full flex-col gap-8\">\n                        <div\n                            v-if=\"product.description\"\n                            class=\"flex flex-col gap-4\"\n                        >\n                            <H3>{{ $t(\"Description\") }}</H3>\n\n                            <div\n                                class=\"prose text-dark\"\n                                v-html=\"product.description\"\n                            />\n                        </div>\n\n                        <div\n                            v-if=\"product.preparation\"\n                            class=\"flex flex-col gap-4\"\n                        >\n                            <H3>{{ $t(\"Preparation\") }}</H3>\n\n                            <div\n                                class=\"prose text-dark\"\n                                v-html=\"product.preparation\"\n                            />\n                        </div>\n                    </div>\n\n                    <div class=\"flex w-full flex-wrap gap-8\">\n                        <div class=\"flex flex-col gap-4\">\n                            <H3>{{ $t(\"Questions?\") }}</H3>\n\n                            <p class=\"prose text-dark\">\n                                {{ $t(\"Do you have any questions or can't find what you're looking for?\") }}\n                            </p>\n\n                            <Button\n                                :href=\"route('public.contact')\"\n                                class=\"mt-2\"\n                            >\n                                {{ $t(\"Contact\") }}\n                            </Button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"mx-auto mt-30 max-w-4xl\">\n                <ProductGrid\n                    :button-title=\"$t('All related products')\"\n                    :products=\"related_products\"\n                    :title=\"$t('Related products')\"\n                    type=\"related\"\n                />\n            </div>\n        </div>\n\n        <div\n            v-if=\"auth?.administrator\"\n            class=\"fixed bottom-15 left-15\"\n        >\n            <Button\n                :href=\"'/admin/products/' + product.id + '/edit'\"\n                class=\"mt-2\"\n                no-inertia\n            >\n                Bewerk product\n            </Button>\n        </div>\n    </PublicLayout>\n</template>\n"],"names":["_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1","props","__props","shownPhoto","ref","carouselIndex","modalMedia","mediaList","computed","route","inject","shoppingCart","useCartStore","productType","productCategories","category","productUncombinable","uncombinable","uncombinableProducts","product","element","auth","usePage","orderNow","useGtm"],"mappings":"2kEACI,SAAAA,GAAAC,EAAAC,EAAA,QACYC,EAAA,EAAAC,EAAA,KAAAC,GAAA,0eCahB,MAAMC,EAAQC,EAId,IAAIC,EAAaC,EAAI,CAAC,EAClBC,EAAgBD,EAAI,CAAC,EAErBE,EAAaF,EAAI,IAAI,EAEzB,MAAMG,EAAYC,EAAS,IAChBP,EAAM,KAChB,8kGCbD,MAAMQ,EAAQC,EAAO,OAAO,EAEtBT,EAAQC,EAORS,EAAeC,EAAc,EAE7BC,EAAcL,EAAS,IACrBP,EAAM,QAAQ,6BACP,WAEJ,SACV,EAED,IAAIa,EAAoBN,EAAS,IACtBP,EAAM,QAAQ,YAAY,IAAKc,GAAaA,EAAS,EAAE,CACjE,EACGC,EAAsBR,EAAS,IACxBP,EAAM,QAAQ,YAChB,IAAKa,GAAsBA,EAAkB,aAAa,IAAKG,GAAiBA,EAAa,EAAE,CAAC,EAChG,KAAK,CAAC,CACd,EAEGC,EAAuBV,EAAS,IACzBG,EAAa,SAAS,OAAQQ,GAE7BA,EAAQ,YACH,IAAKL,GAAsBA,EAAkB,aAAa,IAAKG,GAAiBA,EAAa,EAAE,CAAC,EAChG,KAAK,CAAC,EACN,KAAMG,GAAYN,EAAkB,MAAM,SAASM,CAAO,CAAC,EAEzD,GAEP,EAAAD,EAAQ,YACH,IAAKJ,GAAaA,EAAS,EAAE,EAC7B,KAAMK,GAAYJ,EAAoB,MAAM,SAASI,CAAO,CAAC,CAMzE,CACJ,EAED,MAAMC,EAAOC,IAAU,MAAM,KAE7B,SAASC,EAASJ,EAAS,CACvBK,EAAQ,EAAC,WAAW,CAAC,MAAO,WAAW,CAAC,EACxCb,EAAa,oBAAoBQ,CAAO,CAC5C"}