{"version":3,"file":"CartModal-D6MaQv02.js","sources":["../../../resources/js/Components/Modals/CartModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onUnmounted } from 'vue'\nimport { useI18n } from 'vue-i18n'\nimport { useCartStore } from '@/Stores/cart.store'\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\nimport { XMarkIcon } from '@heroicons/vue/24/outline'\nimport { Link } from '@inertiajs/vue3'\nimport Button from '@/Components/Button.vue'\n\nconst store = useCartStore()\nconst { t, n } = useI18n()\n\nonUnmounted(() => {\n    store.show = false\n})\n</script>\n\n<template>\n    <TransitionRoot as=\"template\" :show=\"store.show\">\n        <Dialog as=\"div\" class=\"relative z-50\" aria-labelledby=\"cart-title\" role=\"dialog\" aria-modal=\"true\" @close=\"store.show = false\">\n            <TransitionChild as=\"template\" enter=\"ease-in-out duration-500\" enter-from=\"opacity-0\" enter-to=\"opacity-100\" leave=\"ease-in-out duration-500\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n                <div class=\"fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75\" />\n            </TransitionChild>\n\n            <div class=\"fixed inset-0 overflow-hidden\">\n                <div class=\"absolute inset-0 overflow-hidden\">\n                    <div class=\"fixed inset-y-0 right-0 flex max-w-full pointer-events-none sm:pl-10\">\n                        <TransitionChild as=\"template\" enter=\"transform transition ease-in-out duration-500 sm:duration-700\" enter-from=\"translate-x-full\" enter-to=\"translate-x-0\" leave=\"transform transition ease-in-out duration-500 sm:duration-700\" leave-from=\"translate-x-0\" leave-to=\"translate-x-full\">\n                            <DialogPanel class=\"w-screen max-w-md pointer-events-auto\">\n                                <div class=\"flex flex-col h-full overflow-y-scroll bg-white shadow-xl\">\n                                    <div class=\"flex flex-col flex-1 px-4 py-6 overflow-y-auto sm:px-6\">\n                                        <div class=\"flex items-start justify-between\">\n                                            <DialogTitle id=\"cart-title\" class=\"text-lg font-medium text-gray-900\">{{ t('components.cart.your-cart') }}</DialogTitle>\n\n                                            <div class=\"flex items-center ml-3 h-7\">\n                                                <button type=\"button\" class=\"inline-flex items-center justify-center p-2 -m-2 text-gray-400 rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500\" @click=\"store.show = false\">\n                                                    <span class=\"sr-only\">Close cart</span>\n                                                    <XMarkIcon class=\"w-6 h-6 stroke-2\" aria-hidden=\"true\" />\n                                                </button>\n                                            </div>\n                                        </div>\n\n                                        <div v-if=\"store.items.length === 0\" class=\"my-auto text-center\">\n                                            <p class=\"text-lg font-medium text-gray-900\">{{ t('components.cart.cart-empty') }}</p>\n                                            <button type=\"button\" class=\"mt-6 text-sm font-medium text-indigo-600 hover:text-indigo-500\" @click=\"store.show = false\">{{ t('components.cart.continue-shopping') }}<span aria-hidden=\"true\"> &rarr;</span></button>\n                                        </div>\n\n                                        <div v-if=\"store.items.length > 0\" class=\"mt-8\">\n                                            <div class=\"flow-root\">\n                                                <ul role=\"list\" class=\"-my-6\">\n                                                    <li v-for=\"(item, itemIdx) in store.items\" :key=\"item.id\" class=\"flex py-6\" :class=\"[itemIdx !== 0 ? 'border-t border-t-gray-200' : '']\">\n                                                        <div class=\"flex-shrink-0 w-24 h-24 overflow-hidden rounded-md\">\n                                                            <img :src=\"item.product.image_url\" :alt=\"item.product.title\">\n                                                        </div>\n\n                                                        <div class=\"flex flex-col flex-1 ml-4\">\n                                                            <div>\n                                                                <div class=\"flex justify-between text-sm font-medium text-gray-900\">\n                                                                    <a :href=\"item.product.product_url\">{{ item.product.title }}</a>\n                                                                    <div class=\"ml-4\">\n                                                                        <p class=\"whitespace-nowrap\" :class=\"{ 'line-through': item.product.sale_price }\">{{ n(item.product.retail_price, 'currency') }}</p>\n                                                                        <p v-if=\"item.product.sale_price\" class=\"text-red-500 whitespace-nowrap\">{{ n(item.product.sale_price, 'currency') }}</p>\n                                                                    </div>\n                                                                </div>\n\n                                                                <p v-if=\"item.product.variant\" class=\"mt-1 text-sm text-gray-500\">{{ item.product.variant }}</p>\n                                                            </div>\n\n                                                            <div class=\"flex items-center justify-between flex-1 mt-2 text-sm\">\n                                                                <select v-if=\"item.product.maximum_quantity > 0\" class=\"block max-w-full rounded-md border border-gray-300 py-1.5 text-base leading-5 font-medium text-gray-700 text-left shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" @change=\"store.updateQuantity(item.id, parseInt(($event.target as HTMLSelectElement).value) || 1)\">\n                                                                    <option v-for=\"i in item.product.maximum_quantity\" :key=\"i\" :value=\"i\" :selected=\"i === item.quantity\">{{ i }}</option>\n                                                                </select>\n\n                                                                <p v-if=\"item.product.maximum_quantity === 0\" class=\"text-gray-500\">{{ t('Out of Stock') }}</p>\n\n                                                                <div class=\"flex\">\n                                                                    <button type=\"button\" class=\"font-medium text-indigo-600 hover:text-indigo-500\" @click=\"store.deleteItem(item.id)\">{{ t('components.cart.remove') }}</button>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </li>\n                                                </ul>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div v-if=\"store.items.length > 0\" class=\"px-4 py-6 border-t border-gray-200 sm:px-6\">\n                                        <div class=\"flex justify-between text-base font-medium text-gray-900\">\n                                            <p>{{ t('components.cart.subtotal') }}</p>\n                                            <p>{{ $n(store.subtotal, 'currency') }}</p>\n                                        </div>\n\n                                        <div v-if=\"store.saveAmount > 0\" class=\"flex justify-between text-base text-red-500\">\n                                            <p>{{ t('components.cart.you-save') }}</p>\n                                            <p>{{ $n(store.saveAmount, 'currency') }}</p>\n                                        </div>\n\n                                        <!-- <p class=\"mt-0.5 text-sm text-gray-500\">Shipping and taxes calculated at checkout.</p> -->\n                                        <div class=\"mt-6\">\n                                            <Button :as=\"Link\" size=\"xl\" :href=\"route('checkout')\" class=\"w-full\">\n                                                {{ t('components.cart.continue-checkout') }}\n                                            </Button>\n                                        </div>\n\n                                        <div class=\"flex justify-center mt-4 text-xs text-center text-gray-500 sm:mt-6 sm:text-sm\">\n                                            <p>\n                                                {{ t('components.cart.or') }} <button type=\"button\" class=\"font-medium text-indigo-600 hover:text-indigo-500\" @click=\"store.show = false\">{{ t('components.cart.continue-shopping') }}<span aria-hidden=\"true\"> &rarr;</span></button>\n                                            </p>\n                                        </div>\n                                    </div>\n                                </div>\n                            </DialogPanel>\n                        </TransitionChild>\n                    </div>\n                </div>\n            </div>\n        </Dialog>\n    </TransitionRoot>\n</template>\n"],"names":["store","useCartStore","t","n","useI18n","onUnmounted"],"mappings":"4qEASA,MAAMA,EAAQC,IACR,CAAE,EAAAC,EAAG,EAAAC,CAAE,EAAIC,EAAQ,EAEzB,OAAAC,EAAY,IAAM,CACdL,EAAM,KAAO,EAAA,CAChB"}