{"id":9,"date":"2026-04-27T15:58:57","date_gmt":"2026-04-27T12:58:57","guid":{"rendered":"http:\/\/82.148.18.120\/?page_id=9"},"modified":"2026-04-27T15:58:57","modified_gmt":"2026-04-27T12:58:57","slug":"%d0%b7%d0%b0%d0%bf%d0%b8%d1%81%d1%8c","status":"publish","type":"page","link":"https:\/\/test.yogarazuma.ru\/%d0%b7%d0%b0%d0%bf%d0%b8%d1%81%d1%8c\/","title":{"rendered":"\u0417\u0430\u043f\u0438\u0441\u044c"},"content":{"rendered":"<div x-data=\"yrBooking()\" x-cloak class=\"yr-booking-form\">\n\n    <!-- Step 0: Service selection -->\n    <div x-show=\"(step === 0) \" class=\"yr-step\">\n        <h2 class=\"yr-step-title\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0443\u0441\u043b\u0443\u0433\u0443<\/h2>\n        <div class=\"yr-services-grid\">\n            <template x-for=\"service in services \" :key=\"(service.slug) \">\n                <button @click=\"selectService(service.slug)\" class=\"yr-service-card\"\n                        :class=\"({'yr-active': selectedService === service.slug}) \">\n                    <span x-text=\"(service.name) \" class=\"yr-service-name\"><\/span>\n                    <span class=\"yr-service-meta\">\n                        <span x-text=\"(service.price + ' ' + yrConfig.str.rub) \" class=\"yr-service-price\"><\/span>\n                        <span x-text=\"(service.duration + ' ' + yrConfig.str.min) \" class=\"yr-service-duration\"><\/span>\n                    <\/span>\n                <\/button>\n            <\/template>\n        <\/div>\n        <template x-if=\"(services.length === 0 && !loading) \">\n            <p class=\"yr-empty\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0443\u0441\u043b\u0443\u0433...<\/p>\n        <\/template>\n    <\/div>\n\n    <!-- Step 1: Date and slot -->\n    <div x-show=\"(step === 1) \" class=\"yr-step\">\n        <div class=\"yr-step-header\">\n            <button @click=\"prevStep()\" class=\"yr-back\"\n                    aria-label=\"\u041d\u0430\u0437\u0430\u0434\">\n                &larr; \u041d\u0430\u0437\u0430\u0434            <\/button>\n            <h2 class=\"yr-step-title\">\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f<\/h2>\n        <\/div>\n\n        <!-- Calendar -->\n        <div class=\"yr-calendar\" role=\"group\" aria-label=\"\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0430\u0442\u0443\">\n            <template x-for=\"day in availableDays \" :key=\"(day.date) \">\n                <button @click=\"!day.hasSlots || selectDate(day.date)\"\n                        class=\"yr-day\"\n                        :class=\"({'yr-active': selectedDate === day.date, 'yr-disabled': !day.hasSlots}) \"\n                        :disabled=\"(!day.hasSlots) \"\n                        :aria-pressed=\"(selectedDate === day.date) \">\n                    <span x-text=\"(day.weekday) \" class=\"yr-weekday\"><\/span>\n                    <span x-text=\"(day.day) \"     class=\"yr-day-num\"><\/span>\n                    <span x-text=\"(day.month) \"   class=\"yr-month\"><\/span>\n                <\/button>\n            <\/template>\n        <\/div>\n\n        <!-- Slots grouped: morning \/ afternoon \/ evening -->\n        <div x-show=\"(selectedDate) \" class=\"yr-slots\">\n            <template x-if=\"(loadingSlots) \">\n                <div class=\"yr-loading\" role=\"status\">\n                    \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043b\u043e\u0442\u043e\u0432...                <\/div>\n            <\/template>\n            <template x-if=\"(!loadingSlots && slots.length === 0 && selectedDate) \">\n                <div class=\"yr-empty\">\n                    \u041d\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432 \u043d\u0430 \u044d\u0442\u0443 \u0434\u0430\u0442\u0443                <\/div>\n            <\/template>\n            <template x-for=\"group in groupedSlots \" :key=\"(group.label) \">\n                <div class=\"yr-slot-group\">\n                    <div class=\"yr-slot-group-label\" x-text=\"(group.label) \"><\/div>\n                    <div class=\"yr-slots-grid\">\n                        <template x-for=\"slot in group.slots \" :key=\"(slot.start_at) \">\n                            <button @click=\"selectSlot(slot)\" class=\"yr-slot\"\n                                    :class=\"({'yr-active': selectedSlot?.start_at === slot.start_at}) \"\n                                    :aria-pressed=\"(selectedSlot?.start_at === slot.start_at) \">\n                                <span x-text=\"(formatTime(slot.start_at)) \"><\/span>\n                                <template x-if=\"(slot.available &lt; 5 &amp;&amp; currentService?.mode === 'group') \">\n                                    <span class=\"yr-spots-left\"\n                                          x-text=\"(yrConfig.str.remaining + ' ' + slot.available) \"><\/span>\n                                <\/template>\n                            <\/button>\n                        <\/template>\n                    <\/div>\n                <\/div>\n            <\/template>\n        <\/div>\n\n        <button x-show=\"(selectedSlot) \"\n                @click=\"lockSlotAndNext()\"\n                class=\"yr-next-btn\"\n                :disabled=\"(locking) \">\n            <span x-text=\"(locking ? yrConfig.str.loading : yrConfig.str.next) \"><\/span>\n        <\/button>\n    <\/div>\n\n    <!-- Step 2: Auth + client data -->\n    <div x-show=\"(step === 2) \" class=\"yr-step\">\n        <div class=\"yr-step-header\">\n            <button @click=\"prevStep()\" class=\"yr-back\">\n                &larr; \u041d\u0430\u0437\u0430\u0434            <\/button>\n            <h2 class=\"yr-step-title\">\u0412\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435<\/h2>\n        <\/div>\n\n        <template x-if=\"(!authToken) \">\n            <div class=\"yr-tg-auth\">\n                <p class=\"yr-tg-prompt\">\n                    \u0414\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 Telegram                <\/p>\n                <div id=\"yr-tg-login\"><\/div>\n            <\/div>\n        <\/template>\n\n        <template x-if=\"(authToken) \">\n            <div class=\"yr-client-form\">\n                <div class=\"yr-avatar\" x-show=\"(client.photo) \">\n                    <img :src=\"(client.photo) \" :alt=\"(client.name) \" width=\"48\" height=\"48\">\n                <\/div>\n\n                <div class=\"yr-field\">\n                    <label for=\"yr-name\">\u0418\u043c\u044f<\/label>\n                    <input id=\"yr-name\" type=\"text\" x-model=\"client.name \"\n                           :readonly=\"(client.nameLocked) \"\n                           autocomplete=\"given-name\">\n                <\/div>\n\n                <div class=\"yr-field\" x-show=\"(!client.genderLocked) \">\n                    <span class=\"yr-field-label\">\u041f\u043e\u043b<\/span>\n                    <div class=\"yr-radio-group\" role=\"radiogroup\">\n                        <label>\n                            <input type=\"radio\" value=\"female\" x-model=\"client.gender \">\n                            \u0416\u0435\u043d\u0449\u0438\u043d\u0430                        <\/label>\n                        <label>\n                            <input type=\"radio\" value=\"male\" x-model=\"client.gender \">\n                            \u041c\u0443\u0436\u0447\u0438\u043d\u0430                        <\/label>\n                        <label>\n                            <input type=\"radio\" value=\"unspecified\" x-model=\"client.gender \">\n                            \u041d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <div class=\"yr-field\">\n                    <label for=\"yr-phone\">\u0422\u0435\u043b\u0435\u0444\u043e\u043d<\/label>\n                    <input id=\"yr-phone\" type=\"tel\" x-model=\"client.phone \"\n                           placeholder=\"+7 (___) ___-__-__\"\n                           autocomplete=\"tel\" required>\n                <\/div>\n\n                <div class=\"yr-field\" x-show=\"(currentService?.ask_contraindications) \">\n                    <label for=\"yr-contra\">\u041f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0438\u044f<\/label>\n                    <textarea id=\"yr-contra\" x-model=\"client.contraindications \" rows=\"2\"><\/textarea>\n                <\/div>\n\n                <button @click=\"saveClientAndNext()\"\n                        class=\"yr-next-btn\"\n                        :disabled=\"(!client.phone) \">\n                    \u0414\u0430\u043b\u0435\u0435 \u2192                <\/button>\n            <\/div>\n        <\/template>\n    <\/div>\n\n    <!-- Step 3: Discount -->\n    <div x-show=\"(step === 3) \" class=\"yr-step\">\n        <div class=\"yr-step-header\">\n            <button @click=\"prevStep()\" class=\"yr-back\">\n                &larr; \u041d\u0430\u0437\u0430\u0434            <\/button>\n            <h2 class=\"yr-step-title\">\u0421\u043a\u0438\u0434\u043a\u0430<\/h2>\n        <\/div>\n\n        <div class=\"yr-discount-options\" role=\"radiogroup\">\n            <label class=\"yr-radio-card\">\n                <input type=\"radio\" value=\"none\" x-model=\"discountType \"\n                       @change=\"calculatePrice()\">\n                <span>\u0411\u0435\u0437 \u0441\u043a\u0438\u0434\u043a\u0438<\/span>\n            <\/label>\n\n            <label class=\"yr-radio-card\">\n                <input type=\"radio\" value=\"promo\" x-model=\"discountType \"\n                       @change=\"calculatePrice()\">\n                <span>\u041f\u0440\u043e\u043c\u043e\u043a\u043e\u0434 \/ \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442<\/span>\n                <div x-show=\"(discountType === 'promo') \" class=\"yr-promo-row\">\n                    <input type=\"text\" x-model=\"promoCode \"\n                           @blur=\"validatePromo()\"\n                           @keydown.enter.prevent=\"validatePromo()\"\n                           placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u0434\"\n                           class=\"yr-promo-input\"\n                           autocomplete=\"off\"\n                           autocapitalize=\"characters\">\n                    <span x-show=\"(promoStatus === 'valid') \" class=\"yr-promo-ok\">\n                        &#10003; <span x-text=\"(promoMessage) \"><\/span>\n                    <\/span>\n                    <span x-show=\"(promoStatus === 'invalid') \" class=\"yr-promo-err\"\n                          x-text=\"(promoMessage) \"><\/span>\n                <\/div>\n            <\/label>\n\n            <template x-if=\"(availableCredit) \">\n                <label class=\"yr-radio-card\">\n                    <input type=\"radio\" value=\"credit\" x-model=\"discountType \"\n                           @change=\"calculatePrice()\">\n                    <span x-text=\"(yrConfig.str.creditPfx + ' ' + availableCredit.amount + ' ' + yrConfig.str.rub + ' ' + yrConfig.str.until + ' ' + availableCredit.expires) \"><\/span>\n                <\/label>\n            <\/template>\n\n            <template x-if=\"(subscriptionDiscount) \">\n                <label class=\"yr-radio-card\">\n                    <input type=\"radio\" value=\"subscription\" x-model=\"discountType \"\n                           @change=\"calculatePrice()\">\n                    <span x-text=\"(yrConfig.str.subDisc + ' ' + subscriptionDiscount + '%') \"><\/span>\n                <\/label>\n            <\/template>\n        <\/div>\n\n        <div class=\"yr-total\">\n            <span class=\"yr-total-label\">\u0418\u0442\u043e\u0433\u043e:<\/span>\n            <span class=\"yr-total-price\" x-text=\"(finalPrice + ' ' + yrConfig.str.rub) \"><\/span>\n        <\/div>\n\n        <button @click=\"proceedToPayment()\" class=\"yr-next-btn\">\n            <span x-text=\"(finalPrice &gt; 0 ? yrConfig.str.toPay : yrConfig.str.confirm) \"><\/span>\n        <\/button>\n    <\/div>\n\n    <!-- Step 4: Payment \/ Success -->\n    <div x-show=\"(step === 4) \" class=\"yr-step\">\n        <h2 class=\"yr-step-title\">\u041e\u043f\u043b\u0430\u0442\u0430<\/h2>\n\n        <template x-if=\"(paymentStatus === 'pending') \">\n            <div class=\"yr-payment-widget\">\n                <div id=\"yr-selfwork-widget\" role=\"region\"\n                     aria-label=\"\u0412\u0438\u0434\u0436\u0435\u0442 \u043e\u043f\u043b\u0430\u0442\u044b\">\n                <\/div>\n                <p class=\"yr-payment-note\">\n                    \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u043b\u0430\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438                <\/p>\n            <\/div>\n        <\/template>\n\n        <template x-if=\"(paymentStatus === 'paid') \">\n            <div class=\"yr-success\" role=\"alert\">\n                <div class=\"yr-success-icon\" aria-hidden=\"true\">&#9989;<\/div>\n                <h3>\u0417\u0430\u043f\u0438\u0441\u044c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0430!<\/h3>\n                <p x-text=\"((currentService?.name || '') + ', ' + formatDate(selectedSlot?.start_at) + ' ' + formatTime(selectedSlot?.start_at)) \"><\/p>\n                <p class=\"yr-success-note\">\n                    \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0432 Telegram                <\/p>\n                <a href=\"\/cabinet\/\" class=\"yr-cabinet-link\">\n                    \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u2192                <\/a>\n            <\/div>\n        <\/template>\n\n        <template x-if=\"(paymentStatus === 'free') \">\n            <div class=\"yr-success\" role=\"alert\">\n                <div class=\"yr-success-icon\" aria-hidden=\"true\">&#9989;<\/div>\n                <h3>\u0417\u0430\u043f\u0438\u0441\u044c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0430!<\/h3>\n                <p class=\"yr-success-note\">\n                    \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0432 Telegram                <\/p>\n                <a href=\"\/cabinet\/\" class=\"yr-cabinet-link\">\n                    \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u2192                <\/a>\n            <\/div>\n        <\/template>\n    <\/div>\n\n    <!-- Error toast -->\n    <div x-show=\"(error) \" class=\"yr-error-toast\" x-text=\"(error) \"\n         @click=\"error = null\" role=\"alert\"><\/div>\n\n    <!-- Slot lock timer -->\n    <div x-show=\"(lockTimer &gt; 0 &amp;&amp; step &gt; 1) \" class=\"yr-lock-timer\" aria-live=\"polite\">\n        \u0421\u043b\u043e\u0442 \u0437\u0430\u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430        <span x-text=\"(Math.floor(lockTimer \/ 60) + ':' + String(lockTimer % 60).padStart(2, '0')) \"><\/span>\n    <\/div>\n\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/pages\/9\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/test.yogarazuma.ru\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}