{"id":553,"date":"2026-01-26T19:08:23","date_gmt":"2026-01-26T16:08:23","guid":{"rendered":"https:\/\/triplecarcare.com\/?page_id=553"},"modified":"2026-01-27T00:18:01","modified_gmt":"2026-01-26T21:18:01","slug":"cost","status":"publish","type":"page","link":"https:\/\/triplecarcare.com\/en\/cost\/","title":{"rendered":"cost"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"553\" class=\"elementor elementor-553\">\n\t\t\t\t<div class=\"elementor-element elementor-element-654005a5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"654005a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8df38c elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"f8df38c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"ppf-app\" class=\"ppf-container\" dir=\"rtl\">\n        <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n        <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n        <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Arabic:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n        \n        <style>.ppf-container { font-family: 'Noto Sans Arabic', sans-serif; text-align: right; }<\/style>\n\n        <div class=\"max-w-6xl mx-auto py-6 px-4\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n                <div class=\"lg:col-span-2 space-y-6\">\n                    <!-- \u0628\u0627\u0642\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0633\u0631\u064a\u0639 -->\n                                        <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-gray-100 animate-in fade-in duration-500\">\n                        <h2 class=\"font-black text-gray-800 mb-4 flex items-center gap-2\"><i data-lucide=\"zap\" class=\"text-orange-500\"><\/i> \u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a \u0633\u0631\u064a\u0639\u0629<\/h2>\n                        <div class=\"flex flex-wrap gap-2\">\n                                                        <button onclick=\"ppfApp.applyPackage([&quot;fBumper&quot;,&quot;mirrors&quot;,&quot;c-1769462341163&quot;,&quot;c-1769462357795&quot;,&quot;c-1769462390706&quot;,&quot;c-1769462434850&quot;,&quot;c-1769462466306&quot;,&quot;c-1769462493049&quot;,&quot;c-1769462522794&quot;])\" \n                                    class=\"px-5 py-2 rounded-full border border-orange-200 bg-orange-50 text-orange-700 font-bold text-sm hover:bg-orange-600 hover:text-white transition-all duration-300\">\n                                \u062d\u0645\u0627\u064a\u0629 \u0645\u0642\u062f\u0645\u0629                            <\/button>\n                                                        <button onclick=\"ppfApp.applyPackage([&quot;fBumper&quot;,&quot;c-1769462563194&quot;,&quot;c-1769462368954&quot;,&quot;c-1769462390706&quot;,&quot;c-1769462357795&quot;,&quot;c-1769462341163&quot;,&quot;c-1769459698892&quot;,&quot;mirrors&quot;,&quot;c-1769462493049&quot;])\" \n                                    class=\"px-5 py-2 rounded-full border border-orange-200 bg-orange-50 text-orange-700 font-bold text-sm hover:bg-orange-600 hover:text-white transition-all duration-300\">\n                                \u0643\u0627\u0645\u0644 \u0627\u0644\u0633\u064a\u0627\u0631\u0629                            <\/button>\n                                                        <button onclick=\"ppfApp.state.parts = []; ppfApp.render()\" class=\"px-5 py-2 rounded-full border border-gray-200 bg-gray-50 text-gray-400 font-bold text-sm hover:bg-gray-100\">\u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062a\u062d\u062f\u064a\u062f<\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u0627\u0644\u0641\u0626\u0629 \u0648\u0627\u0644\u0641\u064a\u0644\u0645 -->\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                        <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-gray-100\">\n                            <h2 class=\"font-black text-gray-800 mb-4 flex items-center gap-2\"><i data-lucide=\"car\" class=\"text-blue-600\"><\/i> \u0641\u0626\u0629 \u0627\u0644\u0633\u064a\u0627\u0631\u0629<\/h2>\n                            <div id=\"car-grid\" class=\"grid grid-cols-2 gap-2\"><\/div>\n                        <\/div>\n                        <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-gray-100\">\n                            <h2 class=\"font-black text-gray-800 mb-4 flex items-center gap-2\"><i data-lucide=\"palette\" class=\"text-blue-600\"><\/i> \u0646\u0648\u0639 \u0627\u0644\u0641\u0644\u0645<\/h2>\n                            <div id=\"film-grid\" class=\"grid grid-cols-1 gap-2\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 -->\n                    <div class=\"bg-white p-6 rounded-3xl shadow-sm border border-gray-100\">\n                        <h2 class=\"font-black text-gray-800 mb-4 flex items-center gap-2\"><i data-lucide=\"layers\" class=\"text-blue-600\"><\/i> \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0628\u0627\u0644\u062a\u0641\u0635\u064a\u0644<\/h2>\n                        <div id=\"parts-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-2\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u0634\u0631\u064a\u0637 \u0627\u0644\u0633\u0639\u0631 -->\n                <div class=\"lg:col-span-1\">\n                    <div class=\"bg-white p-8 rounded-3xl shadow-2xl border-t-8 border-t-blue-600 sticky top-8\">\n                        <h2 class=\"text-xl font-black mb-6 border-b pb-4\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062d\u0633\u0627\u0628<\/h2>\n                        <div id=\"summary\" class=\"space-y-4 text-sm text-gray-600 mb-8\"><\/div>\n                        <div class=\"bg-gray-50 p-6 rounded-2xl text-center mb-6\">\n                            <div id=\"price\" class=\"text-5xl font-black text-blue-600 leading-none\">0<\/div>\n                            <span class=\"text-sm font-bold text-blue-600 mt-2 block tracking-widest uppercase\">\u0631\u064a\u0627\u0644 \u0633\u0639\u0648\u062f\u064a<\/span>\n                        <\/div>\n                        <button onclick=\"sendWA()\" class=\"w-full py-5 bg-green-600 text-white font-black rounded-2xl shadow-xl shadow-green-100 hover:bg-green-700 hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2\">\n                            <i data-lucide=\"message-circle\"><\/i> \u062d\u062c\u0632 \u0627\u0644\u0645\u0648\u0639\u062f \u0627\u0644\u0645\u0628\u062f\u0626\u064a\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <script>\n            const ppfApp = {\n                data: {\"parts\":[{\"id\":\"fBumper\",\"name\":\"\\u0627\\u0644\\u0635\\u062f\\u0627\\u0645 \\u0627\\u0644\\u0623\\u0645\\u0627\\u0645\\u064a\",\"area\":2,\"active\":true},{\"id\":\"mirrors\",\"name\":\"\\u0627\\u0644\\u0645\\u0631\\u0627\\u064a\\u0627 \\u0627\\u0644\\u062c\\u0627\\u0646\\u0628\\u064a\\u0629\",\"area\":0.3,\"active\":true},{\"id\":\"c-1769459698892\",\"name\":\"\\u0627\\u0644\\u0635\\u062f\\u0627\\u0645 \\u0627\\u0644\\u062e\\u0644\\u0641\\u064a\",\"area\":1,\"active\":true},{\"id\":\"c-1769462341163\",\"name\":\"\\u063a\\u0637\\u0627\\u0621 \\u0627\\u0644\\u0645\\u062d\\u0631\\u0643\",\"area\":1,\"active\":true},{\"id\":\"c-1769462357795\",\"name\":\"\\u0627\\u0644\\u0631\\u0641\\u0631 \\u0627\\u0644\\u0627\\u0645\\u0627\\u0645\\u064a\",\"area\":1,\"active\":true},{\"id\":\"c-1769462368954\",\"name\":\"\\u0627\\u0644\\u0631\\u0641\\u0631\\u0641 \\u0627\\u0644\\u062e\\u0644\\u0641\\u064a\",\"area\":1,\"active\":true},{\"id\":\"c-1769462390706\",\"name\":\"\\u0627\\u0628\\u0648\\u0627\\u0628 4\",\"area\":1,\"active\":true},{\"id\":\"c-1769462401955\",\"name\":\"\\u0627\\u0628\\u0648\\u0627\\u0628 2\",\"area\":1,\"active\":true},{\"id\":\"c-1769462434850\",\"name\":\"10% \\u0645\\u0646 \\u0633\\u0642\\u0641 \\u0627\\u0644\\u0633\\u064a\\u0627\\u0631\\u0629\",\"area\":1,\"active\":true},{\"id\":\"c-1769462466306\",\"name\":\"\\u0645\\u0642\\u0627\\u0628\\u0636 \\u0627\\u0644\\u0627\\u0628\\u0648\\u0627\\u0628\",\"area\":1,\"active\":true},{\"id\":\"c-1769462493049\",\"name\":\"\\u0642\\u0648\\u0627\\u0626\\u0645 \\u0627\\u0644\\u0632\\u062c\\u0627\\u062c \\u0627\\u0644\\u0627\\u0645\\u0627\\u0645\\u064a\",\"area\":1,\"active\":true},{\"id\":\"c-1769462522794\",\"name\":\"\\u0627\\u0637\\u0631\\u0627\\u0641 \\u0627\\u0644\\u0627\\u0628\\u0648\\u0627\\u0628\",\"area\":1,\"active\":true},{\"id\":\"c-1769462563194\",\"name\":\"\\u0627\\u0644\\u0633\\u0642\\u0641\",\"area\":1,\"active\":true}],\"carTypes\":[{\"id\":\"sedan\",\"name\":\"\\u0633\\u064a\\u062f\\u0627\\u0646\",\"multiplier\":1},{\"id\":\"suv\",\"name\":\"SUV \\\/ \\u062f\\u0641\\u0639 \\u0631\\u0628\\u0627\\u0639\\u064a\",\"multiplier\":1.3},{\"id\":\"pickup\",\"name\":\"\\u0628\\u064a\\u0643 \\u0623\\u0628\",\"multiplier\":1.5}],\"filmTypes\":[{\"id\":\"g-clear\",\"name\":\"\\u0634\\u0641\\u0627\\u0641 \\u0644\\u0645\\u0639\\u0629\",\"price\":450,\"desc\":\"\\u062d\\u0645\\u0627\\u064a\\u0629 \\u0634\\u0641\\u0627\\u0641\\u0629 \\u0643\\u0644\\u0627\\u0633\\u064a\\u0643\\u064a\\u0629\"},{\"id\":\"m-clear\",\"name\":\"\\u0634\\u0641\\u0627\\u0641 \\u0645\\u0637\\u0641\\u064a\",\"price\":550,\"desc\":\"\\u0645\\u0638\\u0647\\u0631 \\u0645\\u0637\\u0641\\u064a \\u0641\\u0627\\u062e\\u0631\"},{\"id\":\"g-black\",\"name\":\"\\u0623\\u0633\\u0648\\u062f \\u0644\\u0645\\u0639\\u0629\",\"price\":600,\"desc\":\"\\u062a\\u063a\\u064a\\u064a\\u0631 \\u0644\\u0648\\u0646 \\u0628\\u0644\\u0645\\u0639\\u0629 \\u0645\\u0631\\u0622\\u0629\"},{\"id\":\"m-black\",\"name\":\"\\u0623\\u0633\\u0648\\u062f \\u0645\\u0637\\u0641\\u064a\",\"price\":650,\"desc\":\"\\u0645\\u0638\\u0647\\u0631 \\u0631\\u064a\\u0627\\u0636\\u064a \\u062c\\u0630\\u0627\\u0628\"}],\"packages\":[{\"id\":\"p1\",\"name\":\"\\u062d\\u0645\\u0627\\u064a\\u0629 \\u0645\\u0642\\u062f\\u0645\\u0629\",\"partIds\":[\"fBumper\",\"mirrors\",\"c-1769462341163\",\"c-1769462357795\",\"c-1769462390706\",\"c-1769462434850\",\"c-1769462466306\",\"c-1769462493049\",\"c-1769462522794\"]},{\"id\":\"p-1769459685172\",\"name\":\"\\u0643\\u0627\\u0645\\u0644 \\u0627\\u0644\\u0633\\u064a\\u0627\\u0631\\u0629\",\"partIds\":[\"fBumper\",\"c-1769462563194\",\"c-1769462368954\",\"c-1769462390706\",\"c-1769462357795\",\"c-1769462341163\",\"c-1769459698892\",\"mirrors\",\"c-1769462493049\"]}]},\n                state: { car: 'sedan', film: 'g-clear', parts: [] },\n                \n                applyPackage(partIds) {\n                    \/\/ \u0646\u062e\u062a\u0627\u0631 \u0641\u0642\u0637 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u062d\u0627\u0644\u064a\u0627\u064b \u0648\u0627\u0644\u0645\u0641\u0639\u0644\u0629\n                    const validIds = partIds.filter(pid => this.data.parts.some(p => p.id === pid && p.active));\n                    this.state.parts = [...validIds];\n                    this.render();\n                },\n\n                togglePart(id) {\n                    if(this.state.parts.includes(id)) this.state.parts = this.state.parts.filter(i => i !== id);\n                    else this.state.parts.push(id);\n                    this.render();\n                },\n\n                render() {\n                    document.getElementById('car-grid').innerHTML = this.data.carTypes.map(t => `\n                        <button onclick=\"ppfApp.state.car='${t.id}'; ppfApp.render()\" class=\"p-4 rounded-xl border-2 font-bold transition-all text-sm ${this.state.car === t.id ? 'border-blue-600 bg-blue-50 text-blue-600 shadow-sm' : 'border-gray-100 hover:border-gray-200'}\">${t.name}<\/button>\n                    `).join('');\n\n                    document.getElementById('film-grid').innerHTML = this.data.filmTypes.map(f => `\n                        <button onclick=\"ppfApp.state.film='${f.id}'; ppfApp.render()\" class=\"p-3 rounded-xl border-2 text-right transition-all ${this.state.film === f.id ? 'border-blue-600 bg-blue-50 text-blue-600 font-bold shadow-sm' : 'border-gray-100 hover:border-gray-200'}\">\n                            <div class=\"text-sm\">${f.name}<\/div>\n                        <\/button>\n                    `).join('');\n\n                    document.getElementById('parts-grid').innerHTML = this.data.parts.filter(p => p.active).map(p => `\n                        <label class=\"flex items-center justify-between p-4 rounded-xl border cursor-pointer transition-all duration-300 ${this.state.parts.includes(p.id) ? 'bg-blue-600 border-blue-600 text-white shadow-lg shadow-blue-50' : 'bg-white border-gray-100 hover:border-blue-200'}\">\n                            <span class=\"text-sm font-bold\">${p.name}<\/span>\n                            <input type=\"checkbox\" class=\"hidden\" ${this.state.parts.includes(p.id) ? 'checked' : ''} onchange=\"ppfApp.togglePart('${p.id}')\">\n                            <span class=\"text-[10px] ${this.state.parts.includes(p.id) ? 'text-blue-100' : 'text-gray-400'} font-bold\">${p.area} \u0645\u00b2<\/span>\n                        <\/label>\n                    `).join('');\n\n                    const car = this.data.carTypes.find(t => t.id === this.state.car);\n                    const film = this.data.filmTypes.find(f => f.id === this.state.film);\n                    const area = this.data.parts.filter(p => this.state.parts.includes(p.id)).reduce((s, p) => s + p.area, 0);\n                    const total = Math.round(area * film.price * car.multiplier);\n\n                    document.getElementById('price').innerText = total.toLocaleString();\n                    document.getElementById('summary').innerHTML = `\n                        <div class=\"flex justify-between items-center bg-gray-50 p-2 rounded-lg\"><span>\u0627\u0644\u0633\u064a\u0627\u0631\u0629:<\/span><span class=\"font-bold text-gray-800\">${car.name}<\/span><\/div>\n                        <div class=\"flex justify-between items-center bg-gray-50 p-2 rounded-lg\"><span>\u0646\u0648\u0639 \u0627\u0644\u0641\u064a\u0644\u0645:<\/span><span class=\"font-bold text-gray-800\">${film.name}<\/span><\/div>\n                        <div class=\"flex justify-between items-center bg-gray-50 p-2 rounded-lg\"><span>\u0627\u0644\u0623\u062c\u0632\u0627\u0621:<\/span><span class=\"font-bold text-gray-800\">${this.state.parts.length} \u0623\u062c\u0632\u0627\u0621 \u0645\u062e\u062a\u0627\u0631\u0629<\/span><\/div>\n                    `;\n                    if(window.lucide) lucide.createIcons();\n                }\n            };\n\n            function sendWA() {\n                const car = ppfApp.data.carTypes.find(t => t.id === ppfApp.state.car);\n                const film = ppfApp.data.filmTypes.find(f => f.id === ppfApp.state.film);\n                const partNames = ppfApp.data.parts.filter(p => ppfApp.state.parts.includes(p.id)).map(p => p.name).join('\u060c ');\n                const total = document.getElementById('price').innerText;\n                \n                if(ppfApp.state.parts.length === 0) {\n                    alert('\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u062c\u0632\u0621 \u0648\u0627\u062d\u062f \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0644 \u0642\u0628\u0644 \u0627\u0644\u062d\u062c\u0632.');\n                    return;\n                }\n\n                const msg = encodeURIComponent(\n                    `*\u0637\u0644\u0628 \u062d\u062c\u0632 \u062c\u062f\u064a\u062f PPF*%0A` +\n                    `\ud83d\ude97 \u0627\u0644\u0641\u0626\u0629: ${car.name}%0A` +\n                    `\ud83d\udee1\ufe0f \u0646\u0648\u0639 \u0627\u0644\u0641\u064a\u0644\u0645: ${film.name}%0A` +\n                    `\ud83d\udce6 \u0627\u0644\u0623\u062c\u0632\u0627\u0621: ${partNames}%0A` +\n                    `\ud83d\udcb0 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a: ${total} \u0631.\u0633`\n                );\n                window.open(`https:\/\/wa.me\/966547071883?text=${msg}`, '_blank');\n            }\n\n            setTimeout(() => ppfApp.render(), 300);\n        <\/script>\n    <\/div>\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":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-553","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/pages\/553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/comments?post=553"}],"version-history":[{"count":14,"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/pages\/553\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/pages\/553\/revisions\/575"}],"wp:attachment":[{"href":"https:\/\/triplecarcare.com\/en\/wp-json\/wp\/v2\/media?parent=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}