{"version":3,"file":"InStockAlertRequest.9c05f3af.js","sources":["../../../resources/js/Pages/InStockAlertRequest.vue"],"sourcesContent":["<script setup>\nimport { ref, watch } from \"vue\";\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from \"@headlessui/vue\";\nimport { Link, useForm, usePage } from \"@inertiajs/inertia-vue3\";\n\nconst page = usePage();\nlet showInStockAlertSuccessPopup = ref(page.props.value.inStockAlertSuccess ?? false);\nlet isStockAlertOpen = ref(false);\nconst form = useForm({\n    product_id: props.product.id,\n    email: null,\n});\n\nconst closeInStockForm = () => {\n    showInStockAlertSuccessPopup.value = false;\n    page.props.value.inStockAlertSuccess = false;\n};\n\nconst closeStockAlertModal = () => {\n    isStockAlertOpen.value = false;\n};\n\nconst clearInStockFormError = () => {\n    page.props.value.errors.inStockAlert = null;\n};\n\nconst openStockAlertModal = () => {\n    isStockAlertOpen.value = true;\n};\n\nconst submitForm = () => {\n    form.post(route(\"inStockAlert\"), {\n        preserveScroll: true,\n        onSuccess: () => {\n            showInStockAlertSuccessPopup.value = true;\n            isStockAlertOpen.value = false;\n            form.reset();\n        },\n        only: [\"errors\", \"inStockAlertSuccess\"],\n    });\n};\n\nconst props = defineProps({\n    inStockAlertSuccess: {\n        type: Boolean,\n        default: false,\n    },\n    auth: {\n        type: Object,\n        default: null,\n    },\n    selectedVariandId: {\n        type: Number,\n        default: null,\n    },\n    product: {\n        type: Object,\n        default: null,\n    },\n});\n\nwatch(\n    () => page.props.value.inStockAlertSuccess,\n    function (value) {\n        showInStockAlertSuccessPopup.value = value;\n    }\n);\n\nwatch(\n    () => page.props.value.selectedVariandId,\n    function (value) {\n        showInStockAlertSuccessPopup.value = value;\n    }\n);\n</script>\n\n<template>\n    <div class=\"mt-5\">\n        <!-- Çalışır hale geldikten sonra div dışına alınabilir. -->\n        <Link\n            v-if=\"auth.isUserLoggedIn\"\n            :href=\"route('inStockAlert')\"\n            :data=\"{\n                product_id: product.id,\n                email: auth.user.email,\n                user_id: auth.user.id,\n            }\"\n            :only=\"['errors', 'inStockAlertSuccess']\"\n            method=\"post\"\n            as=\"button\"\n            class=\"w-full block text-white rounded-full py-3 px-4 self-center font-semibold text-lg leading-none text-center bg-minigreen opacity-90 hover:opacity-100\"\n        >\n            Stoğa Gelince Haber Ver\n        </Link>\n\n        <div v-if=\"!auth.isUserLoggedIn\" @click=\"openStockAlertModal\" class=\"w-full block text-white rounded-full py-3 px-4 self-center font-semibold text-lg leading-none text-center bg-minigreen opacity-90 hover:opacity-100 cursor-pointer\">Stoğa Gelince Haber Ver</div>\n    </div>\n\n    <TransitionRoot appear :show=\"isStockAlertOpen\" as=\"template\">\n        <Dialog as=\"div\" @close=\"closeStockAlertModal\" class=\"relative z-10\">\n            <div class=\"fixed inset-0 overflow-y-auto bg-black/20\">\n                <div class=\"flex min-h-full items-center justify-center p-4 text-center\">\n                    <TransitionChild as=\"template\" enter=\"duration-300 ease-out\" enter-from=\"opacity-0 scale-95\" enter-to=\"opacity-100 scale-100\" leave=\"duration-200 ease-in\" leave-from=\"opacity-100 scale-100\" leave-to=\"opacity-0 scale-95\">\n                        <DialogPanel class=\"w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white px-5 py-5 z-70 text-left align-middle shadow-xl transition-all flex flex-col justify-center items-center\">\n                            <div class=\"flex flex-col w-full\">\n                                <div class=\"text-black text-base md:text-2xl lg:text-2xl text-center mt-4 mx-auto\">Stoğa Gelince Haber Ver.</div>\n                                <form @submit.prevent=\"submitForm\">\n                                    <div class=\"text-center mb-6 mt-6 flex flex-col mts:flex-row justify-center w-full\">\n                                        <input\n                                            v-model=\"form.email\"\n                                            @input=\"clearInStockFormError\"\n                                            name=\"email\"\n                                            type=\"email\"\n                                            class=\"rounded-2lg mts:rounded-none mts:rounded-l-2lg mts:w-8/12 leading-[70px] h-10 placeholder:text-sm md:placeholder:text-lg placeholder:text-placeholdergray py-6 md:px-6 text-base focus:outline-none\"\n                                            placeholder=\"E-Posta Adresin\"\n                                            required=\"required\"\n                                        />\n                                        <input type=\"hidden\" name=\"product_id\" v-model=\"form.product_id\" />\n                                        <button type=\"submit\" :disabled=\"form.processing\" class=\"bg-kbgreen disabled:bg-kbgreen/20 disabled:cursor-wait text-base font-santralextrabold text-white px-8 py-3 mt-4 mts:mt-0 rounded-2lg mts:rounded-none mts:rounded-r-2lg border-0 focus:outline-none whitespace-nowrap\">Tamamla</button>\n                                    </div>\n                                    <div class=\"text-center mb-6 mt-6 flex flex-col mts:flex-row justify-center w-full\" v-if=\"page.props?.value.errors?.inStockAlert\">\n                                        <div class=\"text-red-500 text-sm mts:text-base\">{{ Object.values(page.props.value.errors.inStockAlert)[0] }}</div>\n                                    </div>\n                                </form>\n                            </div>\n                            <div class=\"absolute top-2 right-5 cursor-pointer p-2\" @click=\"closeStockAlertModal\">x</div>\n                        </DialogPanel>\n                    </TransitionChild>\n                </div>\n            </div>\n        </Dialog>\n    </TransitionRoot>\n\n    <!-- Start of the result popup -->\n    <TransitionRoot appear :show=\"showInStockAlertSuccessPopup\" as=\"template\">\n        <Dialog as=\"div\" @close=\"closeInStockForm\" class=\"relative z-50\">\n            <TransitionChild as=\"template\" enter=\"duration-300 ease-out\" enter-from=\"opacity-0\" enter-to=\"opacity-100\" leave=\"duration-200 ease-in\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n                <div class=\"fixed inset-0 bg-black bg-opacity-25\" />\n            </TransitionChild>\n\n            <div class=\"fixed inset-0 overflow-y-auto\">\n                <div class=\"flex min-h-full items-center justify-center p-4 text-center\">\n                    <TransitionChild as=\"template\" enter=\"duration-300 ease-out\" enter-from=\"opacity-0 scale-95\" enter-to=\"opacity-100 scale-100\" leave=\"duration-200 ease-in\" leave-from=\"opacity-100 scale-100\" leave-to=\"opacity-0 scale-95\">\n                        <DialogPanel class=\"w-full max-w-md transform overflow-hidden rounded-2xl bg-white px-5 py-5 z-70 text-left align-middle shadow-xl transition-all flex flex-col justify-center items-center\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 62.051 62.051\">\n                                <g id=\"Group_4884\" data-name=\"Group 4884\" transform=\"translate(-73.036 -250.295)\">\n                                    <circle id=\"Ellipse_199\" data-name=\"Ellipse 199\" cx=\"31.025\" cy=\"31.025\" r=\"31.025\" transform=\"translate(73.036 250.295)\" fill=\"#ff6c37\" />\n                                    <path id=\"Path_3299\" data-name=\"Path 3299\" d=\"M351.649,476.232a3.45,3.45,0,0,1-2.761-1.381l-8.464-11.286a3.451,3.451,0,0,1,5.522-4.141l5.538,7.383,14.223-21.334a3.451,3.451,0,1,1,5.743,3.829l-16.928,25.393a3.453,3.453,0,0,1-2.776,1.536Z\" transform=\"translate(-251.82 -178.764)\" fill=\"#fff\" />\n                                </g>\n                            </svg>\n\n                            <DialogTitle>\n                                <h2 class=\"text-base font-semibold text-center mb-2 mt-2\">Kayıt Başarılı</h2>\n                            </DialogTitle>\n                            <p class=\"text-xs font-kiralabunuthin ts:text-sm text-center\">Ürünü stoklarımıza eklendiğinde email ile haber verilecektir</p>\n\n                            <div class=\"absolute top-2 right-5 cursor-pointer p-2\" @click=\"closeInStockForm\">x</div>\n                        </DialogPanel>\n                    </TransitionChild>\n                </div>\n            </div>\n        </Dialog>\n    </TransitionRoot>\n    <!-- End of the result popup -->\n</template>\n"],"names":["page","usePage","showInStockAlertSuccessPopup","ref","_a","isStockAlertOpen","form","useForm","props","closeInStockForm","closeStockAlertModal","clearInStockFormError","openStockAlertModal","submitForm","watch","value"],"mappings":"usEAKMA,EAAOC,EAAO,EACpB,IAAIC,EAA+BC,EAAG,QAAA,KAACC,EAAAJ,EAAK,MAAM,MAAM,sBAAjB,KAAAI,EAAwC,EAAK,EAChFC,EAAmBF,EAAAA,QAAAA,IAAI,EAAK,EAChC,MAAMG,EAAOC,EAAQ,CACjB,WAAYC,EAAM,QAAQ,GAC1B,MAAO,IACX,CAAC,EAEKC,EAAmB,IAAM,CAC3BP,EAA6B,MAAQ,GACrCF,EAAK,MAAM,MAAM,oBAAsB,EAC3C,EAEMU,EAAuB,IAAM,CAC/BL,EAAiB,MAAQ,EAC7B,EAEMM,EAAwB,IAAM,CAChCX,EAAK,MAAM,MAAM,OAAO,aAAe,IAC3C,EAEMY,EAAsB,IAAM,CAC9BP,EAAiB,MAAQ,EAC7B,EAEMQ,EAAa,IAAM,CACrBP,EAAK,KAAK,MAAM,cAAc,EAAG,CAC7B,eAAgB,GAChB,UAAW,IAAM,CACbJ,EAA6B,MAAQ,GACrCG,EAAiB,MAAQ,GACzBC,EAAK,MAAK,CACb,EACD,KAAM,CAAC,SAAU,qBAAqB,CAC9C,CAAK,CACL,EAqBAQ,OAAAA,EAAK,QAAA,MACD,IAAMd,EAAK,MAAM,MAAM,oBACvB,SAAUe,EAAO,CACbb,EAA6B,MAAQa,CACxC,CACL,EAEAD,EAAK,QAAA,MACD,IAAMd,EAAK,MAAM,MAAM,kBACvB,SAAUe,EAAO,CACbb,EAA6B,MAAQa,CACxC,CACL"}