{"id":2900,"date":"2025-12-25T10:03:16","date_gmt":"2025-12-25T10:03:16","guid":{"rendered":"https:\/\/wordpress2.vabilo.net\/?page_id=2900"},"modified":"2026-02-24T20:29:10","modified_gmt":"2026-02-24T20:29:10","slug":"register","status":"publish","type":"page","link":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/register\/","title":{"rendered":"\u0411\u0430\u049b\u0430\u0439\u0434\u0433\u0438\u0440\u04e3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2900\" class=\"elementor elementor-2900 elementor-712\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ac92053 e-flex e-con-boxed e-con e-parent\" data-id=\"ac92053\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13e8183 elementor-widget elementor-widget-shortcode\" data-id=\"13e8183\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"pm-register-container\">\r\n            <div class=\"pm-register-wrapper\">\r\n                <!-- Right Side - Order Summary (Fixed) -->\r\n                <div class=\"pm-order-sidebar\">\r\n                    <div class=\"pm-order-card\">\r\n                        <h2>\u0422\u0430\u0444\u0441\u0438\u043b\u043e\u0442\u0438 \u043d\u0430\u049b\u0448\u0430\u0438 \u0438\u043d\u0442\u0438\u0445\u043e\u0431\u0448\u0443\u0434\u0430<\/h2>\r\n                        <div class=\"pm-package-name\" id=\"pm-package-name\">\r\n                            <!-- Will be populated by JavaScript -->\r\n                        <\/div>\r\n                        <div class=\"pm-plan-details\" id=\"pm-plan-details\">\r\n                            <!-- Will be populated by JavaScript -->\r\n                        <\/div>\r\n\r\n                        <div class=\"pm-plan-features\">\r\n                            <ul class=\"pm-plan-features-list\" id=\"pm-plan-features-list\">\r\n                                <!-- Will be populated by JavaScript -->\r\n                            <\/ul>\r\n                        <\/div>\r\n\r\n                        <div class=\"pm-order-summary\">\r\n                            <div class=\"pm-summary-row\">\r\n                                <span>\u0428\u0443\u043c\u043e\u0440\u0430\u0438 \u043a\u043e\u0440\u0431\u0430\u0440\u043e\u043d\u0438 \u0438\u043b\u043e\u0432\u0430\u0433\u04e3<\/span>\r\n                                <span id=\"pm-extra-user-count\">0 \u041a\u043e\u0440\u0431\u0430\u0440<\/span>\r\n                            <\/div>\r\n                            <div class=\"pm-summary-row\">\r\n                                <span>\u041f\u0435\u0440\u0438\u043e\u0434 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438<\/span>\r\n                                <span id=\"pm-subscription-period\">1 \u041c\u043e\u04b3<\/span>\r\n                            <\/div>\r\n                            <div class=\"pm-summary-row\">\r\n                                <span>\u041c\u0430\u0431\u043b\u0430\u0493\u0438 \u043e\u0431\u0443\u043d\u0430<\/span>\r\n                                <span id=\"pm-subscription-amount\">0 AED<\/span>\r\n                            <\/div>\r\n                            <div class=\"pm-summary-row\">\r\n                                <span>\u041c\u0430\u0431\u043b\u0430\u0493\u0438 \u043a\u043e\u0440\u0431\u0430\u0440\u0438 \u0438\u043b\u043e\u0432\u0430\u0433\u04e3<\/span>\r\n                                <span id=\"pm-extra-user-amount\">0 AED<\/span>\r\n                            <\/div>\r\n                            <div class=\"pm-summary-total\">\r\n                                <span>\u041c\u0430\u0431\u043b\u0430\u0493\u0438 \u0443\u043c\u0443\u043c\u0438\u0438 \u043f\u0430\u0440\u0434\u043e\u0445\u0442\u0448\u0430\u0432\u0430\u043d\u0434\u0430 \u043f\u0430\u0441 \u0430\u0437 14 \u0440\u04ef\u0437:<\/span>\r\n                                <span id=\"pm-total-payable\">0 AED<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <button class=\"pm-change-plan-btn\" id=\"pm-change-plan-btn\">\u0422\u0430\u0493\u0439\u0438\u0440\u0438 \u043d\u0430\u049b\u0448\u0430<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Left Side - Registration Form -->\r\n                <div class=\"pm-register-form\">\r\n                    <div class=\"pm-form-card\">\r\n                        <h2>\u042d\u04b7\u043e\u0434\u0438 \u04b3\u0438\u0441\u043e\u0431<\/h2>\r\n\r\n                        <div class=\"pm-instructions\">\r\n                            <p>1- \u041b\u0443\u0442\u0444\u0430\u043d \u043c\u0430\u044a\u043b\u0443\u043c\u043e\u0442\u0438 \u0445\u0443\u0434\u0440\u043e \u0431\u043e \u0434\u0438\u049b\u049b\u0430\u0442 \u0432\u043e\u0440\u0438\u0434 \u043a\u0443\u043d\u0435\u0434<\/p>\r\n                            <p>2- \u0422\u0443\u0433\u043c\u0430\u0438 [\u0424\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u043d\u0438 \u0440\u0430\u043c\u0437 \u0431\u0430 \u043f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u04e3]-\u0440\u043e \u043f\u0430\u0445\u0448 \u043a\u0443\u043d\u0435\u0434<\/p>\r\n                            <p>3- \u0420\u0430\u043c\u0437\u0438 \u0444\u0430\u044a\u043e\u043b\u0441\u043e\u0437\u0438\u0440\u043e \u0430\u0437 \u043f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u04e3 \u049b\u0430\u0431\u0443\u043b \u043a\u0443\u043d\u0435\u0434, \u043e\u043d\u0440\u043e \u0431\u0430 \u043c\u0430\u0439\u0434\u043e\u043d\u0438 \u043c\u0443\u0432\u043e\u0444\u0438\u049b \u0432\u043e\u0440\u0438\u0434 \u043a\u0430\u0440\u0434\u0430, \u0442\u0443\u0433\u043c\u0430\u0438 [\u0422\u0430\u0441\u0434\u0438\u049b \u0432\u0430 \u0431\u0430\u049b\u0430\u0439\u0434\u0433\u0438\u0440\u04e3]-\u0440\u043e \u043f\u0430\u0445\u0448 \u043a\u0443\u043d\u0435\u0434.<\/p>\r\n                        <\/div>\r\n\r\n                        <form id=\"pm-registration-form\">\r\n                            <div class=\"pm-form-group\">\r\n                                <label>\u041d\u043e\u043c \u0432\u0430 \u043d\u0430\u0441\u0430\u0431<\/label>\r\n                                <input type=\"text\" id=\"pm-fullname\">\r\n                            <\/div>\r\n\r\n                            <div class=\"pm-form-group\">\r\n                                <label>\u041d\u043e\u043c\u0438 \u0448\u0438\u0440\u043a\u0430\u0442<\/label>\r\n                                <input type=\"text\" id=\"pm-company\">\r\n                            <\/div>\r\n\r\n                            <div class=\"pm-form-group\">\r\n                                <label>\u041a\u0438\u0448\u0432\u0430\u0440<\/label>\r\n                                <input type=\"text\" id=\"pm-country\">\r\n                            <\/div>\r\n\r\n                            <div class=\"pm-form-group\">\r\n                                <label>\u0422\u0435\u043b\u0435\u0444\u043e\u043d<\/label>\r\n                                <input type=\"tel\" id=\"pm-phone\">\r\n                            <\/div>\r\n\r\n                            <div class=\"pm-form-group\">\r\n                                <label>\u041f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u04e3<\/label>\r\n                                <input type=\"email\" id=\"pm-email\" required>\r\n                            <\/div>\r\n\r\n                            <div class=\"pm-form-group pm-capcha\">\r\n                                <div class=\"pm-capcha-box\">\r\n                                    <input type=\"checkbox\" id=\"pm-not-robot\">\r\n                                    <label for=\"pm-not-robot\">\u041c\u0430\u043d \u0440\u043e\u0431\u043e\u0442 \u043d\u0435\u0441\u0442\u0430\u043c<\/label>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <button type=\"button\" class=\"pm-send-code-btn\" id=\"pm-send-verification\">\u0424\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u043d\u0438 \u0440\u0430\u043c\u0437 \u0431\u0430 \u043f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u04e3<\/button>\r\n\r\n                            <div id=\"pm-verification-section\" style=\"display: none;\">\r\n                                <div class=\"pm-form-group\">\r\n                                    <label>\u041b\u0443\u0442\u0444\u0430\u043d \u0440\u0430\u043c\u0437\u0438 \u0444\u0430\u044a\u043e\u043b\u0441\u043e\u0437\u0438\u0438 \u0431\u0430 \u043f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u04e3 \u0444\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u0448\u0443\u0434\u0430\u0440\u043e \u0432\u043e\u0440\u0438\u0434 \u043a\u0443\u043d\u0435\u0434<\/label>\r\n                                    <div class=\"pm-code-input\">\r\n                                        <input type=\"text\" maxlength=\"1\" pattern=\"[0-9]\" inputmode=\"numeric\">\r\n                                        <input type=\"text\" maxlength=\"1\" pattern=\"[0-9]\" inputmode=\"numeric\">\r\n                                        <input type=\"text\" maxlength=\"1\" pattern=\"[0-9]\" inputmode=\"numeric\">\r\n                                        <input type=\"text\" maxlength=\"1\" pattern=\"[0-9]\" inputmode=\"numeric\">\r\n                                        <input type=\"text\" maxlength=\"1\" pattern=\"[0-9]\" inputmode=\"numeric\">\r\n                                    <\/div>\r\n                                <\/div>\r\n\r\n                                <button type=\"button\" class=\"pm-confirm-btn\" id=\"pm-verify-btn\">\u0422\u0430\u0441\u0434\u0438\u049b \u0432\u0430 \u0431\u0430\u049b\u0430\u0439\u0434\u0433\u0438\u0440\u04e3<\/button>\r\n\r\n                                <div class=\"pm-error-message\"><\/div>\r\n\r\n                                <div class=\"pm-resend\">\r\n                                    <button class=\"pm-resend-btn\" id=\"pm-resend-btn\" disabled>\u0410\u0437 \u043d\u0430\u0432 \u0444\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u043d (120 \u0441\u043e\u043d\u0438\u044f)<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/form>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n            .pm-register-container {\r\n                max-width: 1200px;\r\n                padding: 0 20px;\r\n                margin-top: 28px;\r\n            }[dir=\"rtl\"] .pm-register-container{\r\n                font-family:yekan !important;\r\n            }\r\n\r\n            .pm-register-wrapper {\r\n                display: flex;\r\n                gap: 30px;\r\n                min-height: 600px;\r\n            }\r\n\r\n            .pm-form-card h2 {\r\n                font-size: 24px;\r\n            }\r\n\r\n            ul#pm-plan-features-list {\r\n                background: #bbbbbb29;\r\n                height: 144px;\r\n                overflow-y: auto;\r\n                padding: 13px;\r\n                border-radius: 10px;\r\n            }\r\n\r\n            \/* Right Sidebar - Fixed *\/\r\n            .pm-order-sidebar {\r\n                flex: 0 0 350px;\r\n                position: relative;\r\n            }\r\n\r\n            .pm-order-card {\r\n                background: #fff;\r\n                border-radius: 12px;\r\n                padding: 25px;\r\n                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n                position: sticky;\r\n                top: 20px;\r\n            }\r\n\r\n            .pm-order-card h2 {\r\n                margin-top: 0;\r\n                margin-bottom: 20px;\r\n                font-size: 1.3em;\r\n                color: #333;\r\n                padding-bottom: 15px;\r\n                border-bottom: 1px solid #f0f0f0;\r\n            }\r\n\r\n            .pm-plan-details {\r\n                margin-bottom: 20px;\r\n            }\r\n\r\n            .pm-plan-price {\r\n                font-size: 16px;\r\n                font-weight: 700;\r\n                color: #7c3aed;\r\n                margin-bottom: 5px;\r\n            }\r\n\r\n            div#pm-package-name {\r\n                font-size: 18px;\r\n            }\r\n\r\n            .pm-plan-price small {\r\n                font-size: 0.6em;\r\n                font-weight: normal;\r\n                color: #999;\r\n            }\r\n\r\n            .pm-plan-per-user {\r\n                font-size: 0.9em;\r\n                color: #666;\r\n                margin-bottom: 5px;\r\n            }\r\n\r\n            .pm-plan-per-user span {\r\n                color: #7c3aed;\r\n                font-weight: 600;\r\n            }\r\n\r\n            .pm-plan-features {\r\n                margin: 20px 0;\r\n                padding: 15px 0;\r\n                border-top: 1px solid #f0f0f0;\r\n                border-bottom: 1px solid #f0f0f0;\r\n            }\r\n\r\n            .pm-plan-features h3 {\r\n                margin: 0 0 10px 0;\r\n                font-size: 1.1em;\r\n                color: #333;\r\n            }\r\n\r\n            .pm-plan-features-list {\r\n                list-style: none;\r\n                padding: 0;\r\n                margin: 0 0 10px 0;\r\n            }\r\n\r\n            .pm-plan-features-list li {\r\n                padding: 5px 0;\r\n                color: #666;\r\n                font-size: 0.9em;\r\n                display: flex;\r\n                align-items: center;\r\n            }\r\n\r\n            .pm-plan-features-list li:before {\r\n                content: \"\u2713\";\r\n                color: #4CAF50;\r\n                margin-right: 8px;margin-left: 8px;\r\n                font-weight: bold;\r\n            }\r\n\r\n            .pm-see-more {\r\n                background: none;\r\n                border: none;\r\n                color: #7c3aed;\r\n                cursor: pointer;\r\n                font-size: 0.9em;\r\n                padding: 5px 0;\r\n            }\r\n\r\n            .pm-order-summary {\r\n                margin: 20px 0;\r\n            }\r\n\r\n            .pm-summary-row {\r\n                display: flex;\r\n                justify-content: space-between;\r\n                margin-bottom: 10px;\r\n                color: #666;\r\n                font-size: 0.95em;\r\n            }\r\n\r\n            .pm-summary-total {\r\n                display: flex;\r\n                justify-content: space-between;\r\n                margin-top: 15px;\r\n                padding-top: 15px;    flex-direction: column;\r\n                border-top: 2px solid #f0f0f0;\r\n                font-weight: 600;\r\n                color: #333;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .pm-change-plan-btn {\r\n                width: 100%;\r\n                padding: 12px;\r\n                background: none;\r\n                border: 1px solid #7c3aed;\r\n                color: #7c3aed;\r\n                border-radius: 6px;\r\n                cursor: pointer;\r\n                font-size: 1em;\r\n                transition: all 0.3s ease;\r\n            }\r\n\r\n            .pm-change-plan-btn:hover {\r\n                background: #7c3aed;\r\n                color: white;\r\n            }\r\n\r\n            \/* Left Side - Form *\/\r\n            .pm-register-form {\r\n                flex: 1;\r\n            }\r\n\r\n            .pm-form-card {\r\n                background: #fff;\r\n                border-radius: 12px;\r\n                padding: 15px;\r\n                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n            }\r\n\r\n            .pm-form-card h2 {\r\n                margin-top: 0;\r\n                margin-bottom: 20px;\r\n                color: #333;\r\n            }\r\n\r\n            .pm-instructions {\r\n                background: #f8f9fa;\r\n                padding: 10px;\r\n                font-size: 13px;\r\n                border-radius: 8px;\r\n                margin-bottom: 20px;\r\n            }\r\n\r\n            .pm-instructions p {\r\n                margin: 5px 0;\r\n                color: #666;\r\n                font-size: 0.9em;\r\n            }\r\n\r\n            .pm-price-info {\r\n                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n                padding: 15px;\r\n                border-radius: 8px;\r\n                margin-bottom: 20px;\r\n                font-weight: 500;\r\n                color: #333;\r\n            }\r\n\r\n            .pm-form-group {\r\n                margin-bottom: 15px;\r\n            }\r\n\r\n            .pm-form-group label {\r\n                display: block;\r\n                margin-bottom: 5px;\r\n                font-weight: 500;\r\n                color: #555;\r\n            }\r\n\r\n            .pm-form-group input {\r\n                width: 100%;\r\n                padding: 8px;\r\n                border: 1px solid #ddd;\r\n                border-radius: 6px;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .pm-form-group input:focus {\r\n                outline: none;\r\n                border-color: #7c3aed;\r\n            }\r\n\r\n            .pm-capcha {\r\n                margin: 20px 0;\r\n            }\r\n\r\n            .pm-capcha-box {\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 10px;\r\n                padding: 10px;\r\n                border: 1px solid #ddd;\r\n                border-radius: 6px;\r\n                background: #f9f9f9;\r\n            }\r\n\r\n            .pm-capcha-box input[type=\"checkbox\"] {\r\n                width: auto;\r\n            }\r\n\r\n            .pm-send-code-btn {\r\n                width: 100%;\r\n                padding: 12px;\r\n                background: linear-gradient(180deg,#545454 0%,#111111 100%);\r\n                color: white;\r\n                border: none;\r\n                border-radius: 6px;\r\n                font-size: 1em;\r\n                cursor: pointer;\r\n                transition: transform 0.2s, box-shadow 0.2s;\r\n            }\r\n\r\n            .pm-send-code-btn:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);\r\n            }\r\n\r\n            .pm-code-input {\r\n                display: flex;\r\n                gap: 10px;\r\n                justify-content: center;\r\n                margin: 15px 0;\r\n            }\r\n\r\n            .pm-code-input input {\r\n                width: 50px;\r\n                height: 50px;\r\n                text-align: center;\r\n                font-size: 1.5em;\r\n                border: 2px solid #ddd;\r\n                border-radius: 8px;\r\n            }\r\n\r\n            .pm-code-input input:focus {\r\n                border-color: #7c3aed;\r\n            }\r\n\r\n            .pm-code-input input.pm-error {\r\n                border-color: #f44336;\r\n                animation: shake 0.5s;\r\n            }\r\n\r\n            @keyframes shake {\r\n\r\n                0%,\r\n                100% {\r\n                    transform: translateX(0);\r\n                }\r\n\r\n                10%,\r\n                30%,\r\n                50%,\r\n                70%,\r\n                90% {\r\n                    transform: translateX(-5px);\r\n                }\r\n\r\n                20%,\r\n                40%,\r\n                60%,\r\n                80% {\r\n                    transform: translateX(5px);\r\n                }\r\n            }\r\n\r\n            .pm-confirm-btn {\r\n                width: 100%;\r\n                padding: 12px;\r\n                background: #4CAF50;\r\n                color: white;\r\n                border: none;\r\n                border-radius: 6px;\r\n                font-size: 1em;\r\n                cursor: pointer;\r\n                transition: background 0.3s;\r\n            }\r\n\r\n            .pm-confirm-btn:hover {\r\n                background: #45a049;\r\n            }\r\n\r\n            .pm-resend {\r\n                text-align: center;\r\n                margin-top: 15px;\r\n            }\r\n\r\n            .pm-resend-btn {\r\n                background: none;\r\n                border: none;\r\n                color: #7c3aed;\r\n                cursor: pointer;\r\n                font-size: 0.9em;\r\n            }\r\n\r\n            .pm-resend-btn:disabled {\r\n                color: #999;\r\n                cursor: not-allowed;\r\n            }\r\n\r\n            .pm-error-message {\r\n                color: #f44336;\r\n                margin-top: 10px;\r\n                text-align: center;\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                .pm-register-wrapper {\r\n                    flex-direction: column;\r\n                }\r\n\r\n                .pm-order-sidebar {\r\n                    flex: none;\r\n                    width: 100%;\r\n                }\r\n            }\r\n        <\/style>\r\n\r\n        <script>\r\n            jQuery(document).ready(function($) {\r\n                \/\/ Get query parameters from URL\r\n                const urlParams = new URLSearchParams(window.location.search);\r\n\r\n                \/\/ Parse features from JSON\r\n                var features = [];\r\n                try {\r\n                    features = JSON.parse(urlParams.get('features') || '[]');\r\n                } catch (e) {\r\n                    console.log('Error parsing features', e);\r\n                    \/\/ Fallback features if parsing fails\r\n                    features = [\r\n\r\n                    ];\r\n                }\r\n\r\n                \/\/ Parse package data\r\n                var selectedPackage = {\r\n                    id: urlParams.get('package_id'),\r\n                    name: urlParams.get('package_name') || 'Simple Plan',\r\n                    monthlyPrice: parseFloat(urlParams.get('monthly_price')) || 0,\r\n                    annualPrice: parseFloat(urlParams.get('annual_price')) || 0,\r\n                    monthlyUserPrice: parseFloat(urlParams.get('monthly_user_price')) || 0,\r\n                    yearlyUserPrice: parseFloat(urlParams.get('yearly_user_price')) || 0,\r\n                    billingType: urlParams.get('billing_type') || 'monthly',\r\n                    months: parseInt(urlParams.get('months')) || 1,\r\n                    users: parseInt(urlParams.get('users')) || 1,\r\n                    total: parseFloat(urlParams.get('total')) || 0,\r\n                    features: features\r\n                };\r\n\r\n                \/\/ Update features list\r\n                function updateFeaturesList() {\r\n                    var featuresHtml = '';\r\n                    selectedPackage.features.forEach(function(feature) {\r\n                        featuresHtml += '<li>' + feature + '<\/li>';\r\n                    });\r\n                    $('#pm-plan-features-list').html(featuresHtml);\r\n                }\r\n\r\n                \/\/ Call this after setting selectedPackage\r\n                updateFeaturesList();\r\n\r\n                \/\/ Update order summary with real data\r\n                function updateOrderSummary() {\r\n                    var extraUsers = selectedPackage.users - 1;\r\n                    $('#pm-package-name').html('<strong>' + selectedPackage.name + '<\/strong>');\r\n                    \/\/ Get correct prices based on billing type\r\n                    var basePrice = selectedPackage.billingType === 'monthly' ?\r\n                        selectedPackage.monthlyPrice : selectedPackage.annualPrice;\r\n\r\n                    var userPrice = selectedPackage.billingType === 'monthly' ?\r\n                        selectedPackage.monthlyUserPrice : selectedPackage.yearlyUserPrice;\r\n\r\n                    var baseAmount = basePrice;\r\n                    var extraAmount = userPrice * extraUsers;\r\n                    var total = baseAmount + extraAmount;\r\n\r\n                    if (selectedPackage.billingType === 'monthly') {\r\n                        total *= selectedPackage.months;\r\n                    }\r\n\r\n                    \/\/ Plan details\r\n                    var priceText = selectedPackage.billingType === 'monthly' ?\r\n                        basePrice.toFixed(2) + ' AED\/\u043c\u043e\u04b3 \u0431\u0430\u0440\u043e\u0438 1 \u043a\u043e\u0440\u0431\u0430\u0440' :\r\n                        basePrice.toFixed(2) + ' AED\/\u0441\u043e\u043b \u0431\u0430\u0440\u043e\u0438 1 \u043a\u043e\u0440\u0431\u0430\u0440';\r\n\r\n                    var extraText = selectedPackage.billingType === 'monthly' ?\r\n                        '+ ' + userPrice.toFixed(2) + ' AED\/\u043c\u043e\u04b3 \u0431\u0430\u0440\u043e\u0438 \u04b3\u0430\u0440 \u043a\u043e\u0440\u0431\u0430\u0440\u0438 \u0438\u043b\u043e\u0432\u0430\u0433\u04e3' :\r\n                        '+ ' + userPrice.toFixed(2) + ' AED\/\u0441\u043e\u043b \u0431\u0430\u0440\u043e\u0438 \u04b3\u0430\u0440 \u043a\u043e\u0440\u0431\u0430\u0440\u0438 \u0438\u043b\u043e\u0432\u0430\u0433\u04e3';\r\n\r\n                    var planHtml = '<div class=\"pm-plan-price\">' + priceText + '<\/div>';\r\n                    planHtml += '<div class=\"pm-plan-per-user\">' + extraText + '<\/div>';\r\n                    $('#pm-plan-details').html(planHtml);\r\n\r\n                    \/\/ Order summary with real values\r\n                    $('#pm-extra-user-count').text(extraUsers + ' \u041a\u043e\u0440\u0431\u0430\u0440');\r\n                    $('#pm-subscription-period').text(selectedPackage.months + ' \u041c\u043e\u04b3');\r\n                    $('#pm-subscription-amount').text(baseAmount.toFixed(2) + ' AED');\r\n                    $('#pm-extra-user-amount').text(extraAmount.toFixed(2) + ' AED');\r\n                    $('#pm-total-payable').text(total.toFixed(2) + ' AED');\r\n                }\r\n\r\n                updateOrderSummary();\r\n\r\n                \/\/ Change plan button\r\n                $('#pm-change-plan-btn').click(function() {\r\n                    window.location.href = 'https:\/\/wordpress2.vabilo.net\/tg-cyrl\/pricing\/';\r\n                });\r\n\r\n                \/\/ Send verification code\r\n                $('#pm-send-verification').click(function() {\r\n                    var email = $('#pm-email').val();\r\n                    if (!email || !isValidEmail(email)) {\r\n                        alert('\u041b\u0443\u0442\u0444\u0430\u043d \u043f\u043e\u0447\u0442\u0430\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0438\u0438 \u0434\u0443\u0440\u0443\u0441\u0442\u0440\u043e \u0432\u043e\u0440\u0438\u0434 \u043a\u0443\u043d\u0435\u0434');\r\n                        return;\r\n                    }\r\n\r\n                    if (!$('#pm-not-robot').is(':checked')) {\r\n                        alert('\u041b\u0443\u0442\u0444\u0430\u043d \u0442\u0430\u0441\u0434\u0438\u049b \u043a\u0443\u043d\u0435\u0434, \u043a\u0438 \u0448\u0443\u043c\u043e \u0440\u043e\u0431\u043e\u0442 \u043d\u0435\u0441\u0442\u0435\u0434');\r\n                        return;\r\n                    }\r\n\r\n                    \/\/ Show verification section\r\n                    $('#pm-verification-section').show();\r\n                    $(this).hide();\r\n                    startResendTimer();\r\n\r\n                    \/\/ Here you would send verification email\r\n                    $.post(pm_front.ajax_url, {\r\n                        action: 'pm_send_verification',\r\n                        nonce: pm_front.nonce,\r\n                        email: email\r\n                    });\r\n                });\r\n\r\n                \/\/ Verify code\r\n                $('#pm-verify-btn').click(function() {\r\n                    var code = '';\r\n                    $('.pm-code-input input').each(function() {\r\n                        code += $(this).val();\r\n                    });\r\n\r\n                    if (code.length !== 5) {\r\n                        alert('\u041b\u0443\u0442\u0444\u0430\u043d \u0440\u0430\u043c\u0437\u0440\u043e \u043f\u0443\u0440\u0440\u0430 \u0432\u043e\u0440\u0438\u0434 \u043a\u0443\u043d\u0435\u0434');\r\n                        return;\r\n                    }\r\n\r\n                    \/\/ Verify code with server\r\n                    $.post(pm_front.ajax_url, {\r\n                        action: 'pm_verify_code',\r\n                        nonce: pm_front.nonce,\r\n                        code: code,\r\n                        email: $('#pm-email').val()\r\n                    }, function(response) {\r\n                        if (response.success) {\r\n                            submitOrder();\r\n                        } else {\r\n                            $('.pm-code-input input').addClass('pm-error');\r\n                            $('.pm-error-message').text('\u0420\u0430\u043c\u0437\u0438 \u0442\u0430\u0441\u0434\u0438\u049b \u043d\u043e\u0434\u0443\u0440\u0443\u0441\u0442 \u0430\u0441\u0442');\r\n                            setTimeout(function() {\r\n                                $('.pm-code-input input').removeClass('pm-error');\r\n                            }, 500);\r\n                        }\r\n                    });\r\n                });\r\n\r\n                function submitOrder() {\r\n                    var data = {\r\n                        action: 'pm_submit_order',\r\n                        nonce: pm_front.nonce,\r\n                        package_id: selectedPackage.id,\r\n                        billing_type: selectedPackage.billingType,\r\n                        months: selectedPackage.months,\r\n                        users: selectedPackage.users,\r\n                        email: $('#pm-email').val(),\r\n                        phone: $('#pm-phone').val(),\r\n                        company: $('#pm-company').val(),\r\n                        country: $('#pm-country').val(),\r\n                        fullname: $('#pm-fullname').val()\r\n                    };\r\n\r\n                    $.post(pm_front.ajax_url, data, function(response) {\r\n                        if (response.success) {\r\n                            alert('\u0424\u0430\u0440\u043c\u043e\u0438\u0448 \u0431\u043e\u043c\u0443\u0432\u0430\u0444\u0444\u0430\u049b\u0438\u044f\u0442 \u0444\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430 \u0448\u0443\u0434!');\r\n                            window.location.href = '\/thank-you';\r\n                        } else {\r\n                            alert('\u0425\u0430\u0442\u043e: ' + response.data);\r\n                        }\r\n                    });\r\n                }\r\n\r\n                \/\/ Code input handling\r\n                $('.pm-code-input input').on('input', function() {\r\n                    if ($(this).val().length === 1) {\r\n                        $(this).next().focus();\r\n                    }\r\n                }).on('keyup', function(e) {\r\n                    if (e.keyCode === 8 && !$(this).val()) {\r\n                        $(this).prev().focus();\r\n                    }\r\n                });\r\n\r\n                \/\/ Resend code\r\n                $('#pm-resend-btn').click(function() {\r\n                    if ($(this).prop('disabled')) return;\r\n\r\n                    $.post(pm_front.ajax_url, {\r\n                        action: 'pm_send_verification',\r\n                        nonce: pm_front.nonce,\r\n                        email: $('#pm-email').val()\r\n                    });\r\n\r\n                    startResendTimer();\r\n                });\r\n\r\n                function startResendTimer() {\r\n                    var timer = 120;\r\n                    var btn = $('#pm-resend-btn');\r\n                    btn.prop('disabled', true);\r\n\r\n                    var interval = setInterval(function() {\r\n                        timer--;\r\n                        btn.text('\u0410\u0437 \u043d\u0430\u0432 \u0444\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u043d (' + timer + 's)');\r\n\r\n                        if (timer <= 0) {\r\n                            clearInterval(interval);\r\n                            btn.prop('disabled', false);\r\n                            btn.text('\u0410\u0437 \u043d\u0430\u0432 \u0444\u0438\u0440\u0438\u0441\u0442\u043e\u0434\u0430\u043d');\r\n                        }\r\n                    }, 1000);\r\n                }\r\n\r\n                function isValidEmail(email) {\r\n                    var re = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n                    return re.test(email);\r\n                }\r\n            });\r\n        <\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2900","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/pages\/2900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/comments?post=2900"}],"version-history":[{"count":7,"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/pages\/2900\/revisions"}],"predecessor-version":[{"id":3764,"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/pages\/2900\/revisions\/3764"}],"wp:attachment":[{"href":"https:\/\/wordpress2.vabilo.net\/tg-cyrl\/wp-json\/wp\/v2\/media?parent=2900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}