{"version":3,"file":"Catalog-e42a4230.js","sources":["../../../node_modules/@heroicons/vue/20/solid/esm/FunnelIcon.js","../../../node_modules/@heroicons/vue/20/solid/esm/MinusIcon.js","../../../node_modules/@heroicons/vue/20/solid/esm/PlusIcon.js","../../../resources/js/Pages/Market/Catalog.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createElementVNode(\"path\", { d: \"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" })\n  ]))\n}","<script setup>\nimport MarketLayout from '@/Layouts/MarketLayout.vue'\nimport { ref } from 'vue'\nimport {\n    Dialog,\n    DialogPanel,\n    Disclosure,\n    DisclosureButton,\n    DisclosurePanel,\n    Menu,\n    MenuButton,\n    MenuItem,\n    MenuItems,\n    TransitionChild,\n    TransitionRoot,\n} from '@headlessui/vue'\nimport { XMarkIcon } from '@heroicons/vue/24/outline'\nimport { ChevronDownIcon, FunnelIcon, MinusIcon, PlusIcon, Squares2X2Icon } from '@heroicons/vue/20/solid'\nimport { pluralize } from '@/util/pluralize'\nimport { Link, router } from '@inertiajs/vue3'\nimport Container from '@/Components/Market/Container.vue'\nimport ProductGrid from '@/Components/Market/Product/ProductGrid.vue'\nimport Pagination from '@/Components/Pagination.vue'\n\nconst props = defineProps({\n    fallbackProducts: Array,\n    products: Array,\n    category: Object,\n    pagination: Object,\n    filters: Object,\n    sort: String,\n    advBanner: Object\n})\n\nconst sortOptions = {\n    popular: 'Популярные',\n    best: 'Лучший рейтинг',\n    new: 'Новые',\n    'price-asc': 'Самые дешевые',\n    'price-desc': 'Самые дорогие',\n}\n\nconst applySort = (value) => {\n    router.reload({ data: { sort: value } })\n}\n\nconst applyFilter = (filter, value, e) => {\n    router.reload({ data: { filters: { [filter]: value ? '1' : '0' } } })\n}\n\nconst filters = [\n    {\n        id: 'in_stock',\n        name: 'Наличие',\n        opened: true,\n        options: [\n            { value: true, label: 'В наличии', checked: props.filters?.in_stock },\n        ],\n    },\n]\n\nconst mobileFiltersOpen = ref(false)\n</script>\n<template>\n    <MarketLayout :title=\"category.seo_title ?? category.name\">\n        <div>\n            <!-- Mobile filter dialog -->\n            <TransitionRoot as=\"template\" :show=\"mobileFiltersOpen\">\n                <Dialog as=\"div\" class=\"relative z-40 lg:hidden\" @close=\"mobileFiltersOpen = false\">\n                    <TransitionChild as=\"template\" enter=\"transition-opacity ease-linear duration-300\"\n                        enter-from=\"opacity-0\" enter-to=\"opacity-100\"\n                        leave=\"transition-opacity ease-linear duration-300\" leave-from=\"opacity-100\"\n                        leave-to=\"opacity-0\">\n                        <div class=\"fixed inset-0 bg-black bg-opacity-25\" />\n                    </TransitionChild>\n                    <div class=\"fixed inset-0 z-40 flex\">\n                        <TransitionChild as=\"template\" enter=\"transition ease-in-out duration-300 transform\"\n                            enter-from=\"translate-x-full\" enter-to=\"translate-x-0\"\n                            leave=\"transition ease-in-out duration-300 transform\" leave-from=\"translate-x-0\"\n                            leave-to=\"translate-x-full\">\n                            <DialogPanel\n                                class=\"relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl\">\n                                <div class=\"flex items-center justify-between px-4\">\n                                    <h2 class=\"text-lg font-bold text-gray-500\">Фильтры</h2>\n                                    <button type=\"button\"\n                                        class=\"-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400\"\n                                        @click=\"mobileFiltersOpen = false\">\n                                        <span class=\"sr-only\">Close menu</span>\n                                        <XMarkIcon class=\"h-6 w-6\" aria-hidden=\"true\" />\n                                    </button>\n                                </div>\n                                <!-- Filters -->\n                                <form class=\"mt-4 border-t border-gray-200\">\n                                    <h3 class=\"sr-only\">Categories</h3>\n                                    <ul role=\"list\" class=\"px-2 py-3 font-medium text-gray-900\">\n                                        <li v-for=\"category in category.children\" :key=\"category.name\">\n                                            <Link :href=\"route('market.category', { category: category })\"\n                                                class=\"block px-2 py-3 text-gray-500\">{{ category.name }}</Link>\n                                        </li>\n                                    </ul>\n                                    <Disclosure as=\"div\" v-for=\"section in filters\" :key=\"section.id\"\n                                        class=\"border-t border-gray-200 px-4 py-6\" v-slot=\"{ open }\"\n                                        :defaultOpen=\"section.opened\">\n                                        <h3 class=\"-mx-2 -my-3 flow-root\">\n                                            <DisclosureButton\n                                                class=\"flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500\">\n                                                <span class=\"font-medium text-gray-900\">{{ section.name }}</span>\n                                                <span class=\"ml-6 flex items-center\">\n                                                    <PlusIcon v-if=\"!open\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n                                                    <MinusIcon v-else class=\"h-5 w-5\" aria-hidden=\"true\" />\n                                                </span>\n                                            </DisclosureButton>\n                                        </h3>\n                                        <DisclosurePanel class=\"pt-6\">\n                                            <div class=\"space-y-6\">\n                                                <div v-for=\"(option, optionIdx) in section.options\" :key=\"option.value\"\n                                                    class=\"flex items-center\">\n                                                    <input :id=\"`filter-mobile-${section.id}-${optionIdx}`\"\n                                                        :name=\"`${section.id}[]`\" :value=\"option.value\" type=\"checkbox\"\n                                                        :checked=\"option.checked\"\n                                                        @change=\"(e) => applyFilter(section.id, e.target.checked)\"\n                                                        class=\"h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\" />\n                                                    <label :for=\"`filter-mobile-${section.id}-${optionIdx}`\"\n                                                        class=\"ml-3 min-w-0 flex-1 text-gray-500\">{{ option.label\n                                                        }}</label>\n                                                </div>\n                                            </div>\n                                        </DisclosurePanel>\n                                    </Disclosure>\n                                </form>\n                            </DialogPanel>\n                        </TransitionChild>\n                    </div>\n                </Dialog>\n            </TransitionRoot>\n\n            <Container>\n                <!-- Heading-->\n                <div class=\"md:flex items-center justify-between border-b border-gray-200 pb-3\">\n                    <div class=\"flex flex-wrap items-baseline gap-x-3 xpb-3\">\n                        <h1 class=\"text-2xl font-bold tracking-tight text-gray-500\">{{ category.seo_h1 ?? category.name\n                            }}</h1>\n                        <span class=\"text-xs text-gray-500\">{{ pluralize(pagination.total, 'товар', 'товара', 'товаров')\n                            }}</span>\n                    </div>\n                    <div class=\"flex justify-between items-center\">\n                        <Menu as=\"div\" class=\"relative inline-block text-left\">\n                            <div>\n                                <MenuButton\n                                    class=\"group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900\">\n                                    {{ sortOptions[sort] }}\n                                    <ChevronDownIcon\n                                        class=\"-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500\"\n                                        aria-hidden=\"true\" />\n                                </MenuButton>\n                            </div>\n                            <transition enter-active-class=\"transition ease-out duration-100\"\n                                enter-from-class=\"transform opacity-0 scale-95\"\n                                enter-to-class=\"transform opacity-100 scale-100\"\n                                leave-active-class=\"transition ease-in duration-75\"\n                                leave-from-class=\"transform opacity-100 scale-100\"\n                                leave-to-class=\"transform opacity-0 scale-95\">\n                                <MenuItems\n                                    class=\"absolute left-0 md:left-auto md:right-0 z-10 mt-2 w-40 origin-top-left md:origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\n                                    <div class=\"py-1\">\n                                        <MenuItem v-for=\"label, value in sortOptions\" :key=\"value\" v-slot=\"{ active }\">\n                                        <span @click=\"() => applySort(value)\" class=\"cursor-pointer\"\n                                            :class=\"[sort == value ? 'font-medium text-gray-900' : 'text-gray-500', active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm']\">{{\n                                            label }}</span>\n                                        </MenuItem>\n                                    </div>\n                                </MenuItems>\n                            </transition>\n                        </Menu>\n\n                        <!-- <button type=\"button\" class=\"-m-2 ml-5 p-2 text-gray-400 hover:text-gray-500 sm:ml-7\">\n                            <span class=\"sr-only\">View grid</span>\n                            <Squares2X2Icon class=\"h-5 w-5\" aria-hidden=\"true\" />\n                        </button> -->\n\n                        <button type=\"button\" class=\"-m-2 ml-4 p-2 text-gray-400 hover:text-gray-500 sm:ml-6 lg:hidden\"\n                            @click=\"mobileFiltersOpen = true\">\n                            <span class=\"sr-only\">Filters</span>\n                            <FunnelIcon class=\"h-5 w-5\" aria-hidden=\"true\" />\n                        </button>\n                    </div>\n                </div>\n\n                <!-- <section v-if=\"category.seo_text\" aria-labelledby=\"category-description\" class=\"mt-4\">\n                    <p class=\"text-xs text-gray-500\">{{ category.seo_text }}</p>\n                </section> -->\n\n                <div class=\"banner\" v-if=\"advBanner\">\n                    <a :href=\"advBanner.url\" :target=\"advBanner.target_blank ? '_blank' : '_self'\">\n                        <img :src=\"advBanner.image_url\" class=\"w-full\" />\n                    </a>\n                </div>\n\n                <!-- Layout -->\n                <section aria-labelledby=\"products-heading\" class=\"pb-24 pt-6\">\n                    <h2 id=\"products-heading\" class=\"sr-only\">Products</h2>\n                    <div class=\"grid grid-cols-1 gap-x-4 gap-y-10 md:grid-cols-6\">\n                        <!-- Filters -->\n                        <form class=\"hidden md:block\">\n                            <h3 class=\"sr-only\">Categories</h3>\n                            <ul role=\"list\"\n                                class=\"space-y-4 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900\">\n                                <li v-for=\"category in category.children\" :key=\"category.name\">\n                                    <Link :href=\"route('market.category', { category: category })\" class=\"text-gray-500\">\n                                    {{ category.name }}</Link>\n                                </li>\n                            </ul>\n                            <Disclosure as=\"div\" v-for=\"section in filters\" :key=\"section.id\"\n                                class=\"border-b border-gray-200 py-6\" v-slot=\"{ open }\" :defaultOpen=\"section.opened\">\n                                <h3 class=\"-my-3 flow-root\">\n                                    <DisclosureButton\n                                        class=\"flex w-full items-center justify-between py-3 text-sm text-gray-400 hover:text-gray-500\">\n                                        <span class=\"font-semibold text-gray-900\">{{ section.name }}</span>\n                                        <span class=\"ml-6 flex items-center\">\n                                            <PlusIcon v-if=\"!open\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n                                            <MinusIcon v-else class=\"h-5 w-5\" aria-hidden=\"true\" />\n                                        </span>\n                                    </DisclosureButton>\n                                </h3>\n                                <DisclosurePanel class=\"pt-6\">\n                                    <div class=\"space-y-4\">\n                                        <div v-for=\"(option, optionIdx) in section.options\" :key=\"option.value\"\n                                            class=\"flex items-center\">\n                                            <input :id=\"`filter-${section.id}-${optionIdx}`\" :name=\"`${section.id}[]`\"\n                                                :value=\"option.value\" type=\"checkbox\" :checked=\"option.checked\"\n                                                @change=\"(e) => applyFilter(section.id, e.target.checked)\"\n                                                class=\"h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500\" />\n                                            <label :for=\"`filter-${section.id}-${optionIdx}`\"\n                                                class=\"ml-3 text-sm text-gray-600\">{{ option.label }}</label>\n                                        </div>\n                                    </div>\n                                </DisclosurePanel>\n                            </Disclosure>\n                        </form>\n\n                        <!-- Product grid -->\n                        <div class=\"md:col-span-5\">\n                            <div v-if=\"category.seo_text\" aria-labelledby=\"category-description\" class=\"mb-4\">\n                                <p class=\"text-xs text-gray-500 p-4 bg-white rounded-lg shadow-sm\">{{ category.seo_text\n                                    }}</p>\n                            </div>\n\n\n                            <ProductGrid layout=\"catalog\" :products=\"products\" :fallbackProducts=\"fallbackProducts\" />\n\n                            <Pagination class=\"mt-5\" v-bind=\"pagination\" />\n                        </div>\n                    </div>\n                </section>\n            </Container>\n        </div>\n    </MarketLayout>\n</template>"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","sortOptions","applySort","value","router","applyFilter","filter","e","filters","_a","props","mobileFiltersOpen","ref"],"mappings":"2/CAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,+SACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,CCbe,SAASL,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,uEACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,CCbe,SAASL,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAoB,OAAQ,CAAE,EAAG,uHAAuH,CAAE,CAC9J,CAAG,CACH,o3DCuBMC,EAAc,CAChB,QAAS,aACT,KAAM,iBACN,IAAK,QACL,YAAa,gBACb,aAAc,eAClB,EAEMC,EAAaC,GAAU,CACzBC,EAAO,OAAO,CAAE,KAAM,CAAE,KAAMD,CAAK,EAAI,CAC3C,EAEME,EAAc,CAACC,EAAQH,EAAOI,IAAM,CACtCH,EAAO,OAAO,CAAE,KAAM,CAAE,QAAS,CAAE,CAACE,CAAM,EAAGH,EAAQ,IAAM,GAAG,CAAI,CAAA,CAAE,CACxE,EAEMK,EAAU,CACZ,CACI,GAAI,WACJ,KAAM,UACN,OAAQ,GACR,QAAS,CACL,CAAE,MAAO,GAAM,MAAO,YAAa,SAASC,EAAAC,EAAM,UAAN,YAAAD,EAAe,QAAU,CACxE,CACJ,CACL,EAEME,EAAoBC,EAAI,EAAK"}