{"id":55756,"date":"2026-01-19T15:40:08","date_gmt":"2026-01-19T13:40:08","guid":{"rendered":"https:\/\/engeg.com\/b\/?p=55756"},"modified":"2026-01-20T01:30:28","modified_gmt":"2026-01-19T23:30:28","slug":"seramek","status":"publish","type":"post","link":"https:\/\/engeg.com\/b\/2026\/01\/19\/seramek\/","title":{"rendered":"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \r\n \u0645\u0646\u0635\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643 (v18.2 - \u0646\u0638\u0627\u0645 \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u062a\u062d\u0643\u0645 \u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f \u0648\u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629)<\/title>\r\n <meta name=\"description\" content=\"\u0645\u0646\u0635\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062d\u0633\u0627\u0628 \u0643\u0645\u064a\u0627\u062a \u0648\u062a\u0643\u0627\u0644\u064a\u0641 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0645\u0639 \u0645\u0639\u0631\u0636 \u0645\u0641\u0627\u0636\u0644\u0629 \u0630\u0643\u064a \u064a\u062f\u0639\u0645 \u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u0629 \u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629\">\r\n <meta name=\"keywords\" content=\"\u062d\u0633\u0627\u0628 \u0633\u064a\u0631\u0627\u0645\u064a\u0643, \u062a\u0643\u0644\u0641\u0629 \u062a\u0631\u0643\u064a\u0628 \u0628\u0648\u0631\u0633\u0644\u064a\u0646, \u0645\u0639\u0631\u0636 \u0628\u0644\u0627\u0637, \u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u0628\u0644\u0627\u0637, \u062d\u0633\u0627\u0628 \u062d\u0648\u0627\u0626\u0637 \u0627\u0644\u062d\u0645\u0627\u0645\">\r\n <meta name=\"author\" content=\"\u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646\">\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n:root{\r\n --primary:#005a8d; --secondary:#0095d9; --gray:#e9ecef; --card:#fff;\r\n --shadow:0 6px 18px rgba(0,0,0,.12); --success:#28a745; --danger:#c0392b; --warning: #FFD700; \/* \u0623\u0635\u0641\u0631 \u0641\u0627\u0642\u0639 \u0644\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0637\u064a *\/\r\n --luxury: #9b59b6; --balanced: #3498db; --economic: #2ecc71;\r\n --warning-yellow: #FFD700; \/* \u0623\u0635\u0641\u0631 \u0641\u0627\u0642\u0639 \u0644\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0637\u064a *\/\r\n --shadow-hover: 0 10px 25px rgba(0,0,0,.15);\r\n}\r\nhtml { scroll-behavior: smooth; }\r\nbody{font-family:'Cairo',sans-serif; background-color: #f8f9fa; margin: 0;}\r\n.container{max-width:1200px;margin:20px auto;padding:15px;}\r\nheader h1{text-align:center;color:var(--primary);margin-bottom:10px; font-size: 28px;}\r\n.card{border:1px solid var(--gray);padding:20px;margin-bottom:25px;border-radius:12px; background-color: var(--card); box-shadow: var(--shadow); transition: all 0.3s ease;}\r\n.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }\r\n.area-group { border: 2px solid var(--gray); border-radius: 15px; margin-bottom: 25px; padding: 20px; background-color: #fdfdfd; }\r\n.area-group h4 { margin-top: 0; color: var(--primary); border-bottom: 2px solid var(--gray); padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }\r\n.inline{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:10px;align-items:flex-end;}\r\n.form-group {display:flex; flex-direction:column; flex:1; min-width:120px;}\r\n.form-group label {font-size:13px; color:#555; margin-bottom:4px; text-align:center;}\r\n.form-group input,.form-group select{width:100%;padding:10px;text-align:center;font-size:14px;border-radius:6px;border:1px solid #ccc; box-sizing:border-box; transition: all 0.3s ease;}\r\n.form-group input:focus, .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 90, 141, 0.2); outline: none; }\r\n.form-group input.invalid { border-color: var(--danger); background: #fff5f5; animation: shake 0.5s ease-in-out; }\r\n@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }\r\n.checkbox-group { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background-color: #f7f7f7; border-radius: 6px; margin-top: 10px; }\r\n.checkbox-group label { margin-bottom: 0; font-weight: bold; color: var(--primary); }\r\n.checkbox-group input[type=\"checkbox\"] { width: 18px; height: 18px; }\r\nbutton.add{background:var(--primary);color:#fff;border:none;padding:10px 15px;border-radius:6px;cursor:pointer;font-weight:600; margin-bottom:10px; transition: all 0.3s ease;}\r\nbutton.add:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }\r\nbutton.add-large{background:var(--success); color:#fff; border:none; padding:15px; border-radius:8px; cursor:pointer; font-weight:bold; font-size:18px; width:100%; margin-top:10px; transition: all 0.3s ease;}\r\nbutton.add-large:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); background: #218838; }\r\nbutton.del-area, button.del-opening, button.del-item, button.del-payment, button.del-skirting-deduction, button.del-tile {background:var(--danger);color:#fff;border:none;padding:8px 12px;border-radius:5px;cursor:pointer;font-weight:600; height:40px; transition: all 0.3s ease;}\r\nbutton.del-area:hover, button.del-opening:hover, button.del-item:hover, button.del-payment:hover, button.del-skirting-deduction:hover, button.del-tile:hover { background: #a52a1d; transform: scale(1.05); }\r\n.phone-group { display: flex; align-items: center; gap: 5px; }\r\n.phone-group input { flex: 1; }\r\n.call-btn { background: var(--success); color: white; border: none; border-radius: 6px; padding: 10px; cursor: pointer; font-size: 16px; height: 40px; text-decoration: none; display:flex; align-items:center; justify-content:center; }\r\n.summary{display:none;border-top:2px dashed var(--gray);padding-top:20px;margin-top:20px;}\r\n.table-container { \r\n overflow-x: auto; \r\n -webkit-overflow-scrolling: touch;\r\n margin: 15px 0;\r\n position: relative;\r\n}\r\n.table-container::-webkit-scrollbar { height: 8px; }\r\n.table-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }\r\n.table-container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }\r\n.table-container::-webkit-scrollbar-thumb:hover { background: #004a7a; }\r\ntable{width:100%;border-collapse:collapse;margin-top:15px;min-width:800px;}\r\ntable th, table td{border:1px solid #ddd;padding:8px;text-align:center;font-size:14px}\r\ntable th{background:var(--primary);color:#fff;font-weight:600}\r\ntable tfoot { background-color:#f2f2f2; font-weight: bold; }\r\n.workmanship-item-card { border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 15px; background-color: #f9f9f9; position: relative; transition: all 0.3s ease; }\r\n.workmanship-item-card:hover { box-shadow: var(--shadow); }\r\n.workmanship-item-card .del-item { position: absolute; top: 10px; left: 10px; }\r\n.workmanship-total { text-align: center; font-size: 20px; font-weight: bold; color: var(--primary); background-color: #eaf5ff; padding: 15px; border-radius: 8px; margin-top: 20px; }\r\n.item-total-summary { font-weight: bold; color: var(--primary); margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ccc; text-align: center; }\r\n.accordion { background-color: #f1f1f1; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: right; outline: none; font-size: 18px; transition: 0.4s; font-family: 'Cairo', sans-serif; font-weight: bold; color: #444; border-radius: 8px; margin-bottom: 5px; }\r\n.accordion:after { content: '\\\\002B'; color: #777; font-weight: bold; float: left; margin-left: 5px; }\r\n.accordion.active:after { content: \"\\\\2212\"; }\r\n.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; margin-bottom: 20px;}\r\n.project-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; background-color: var(--gray); border-radius: 8px 8px 0 0; margin-bottom: 20px; }\r\n.project-tab { padding: 10px 15px; background-color: #ccc; border-radius: 6px; cursor: pointer; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; transition: background-color 0.3s; }\r\n.project-tab.active { background-color: var(--primary); color: white; }\r\n.project-tab .tab-name { outline: none; }\r\n.project-tab .edit-name-btn { cursor: pointer; font-size: 12px; margin-right: 5px; }\r\n.project-tab .delete-tab { font-size: 14px; color: #fff; background-color: rgba(0,0,0,0.2); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; }\r\n.add-project-tab { background-color: var(--success); color: white; font-weight: bold; }\r\n.area-summary { margin-top: 15px; padding: 15px; background-color: #f0f8ff; border: 1px solid var(--secondary); border-radius: 8px; font-size: 14px; }\r\n.area-summary div { display: flex; justify-content: space-between; padding: 5px 0; }\r\n.area-summary span { font-weight: bold; }\r\n.area-summary .total { font-size: 18px; color: var(--primary); border-top: 2px solid var(--secondary); margin-top: 8px; padding-top: 8px; }\r\n.ai-summary { margin-top: 25px; padding: 20px; border: 2px dashed var(--secondary); border-radius: 10px; background-color: #f0f8ff; }\r\n.ai-summary h4 { margin-top: 0; color: var(--primary); }\r\n.ai-summary p { line-height: 1.8; color: #333; }\r\n#explanation-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }\r\n.explanation-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: var(--shadow); border-top: 4px solid var(--secondary); transition: all 0.3s ease; }\r\n.explanation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }\r\n.explanation-card.total-card { border-top-color: var(--success); background-color: #f7fff9; }\r\n.explanation-card h5 { margin: 0 0 15px 0; color: var(--primary); font-size: 18px; display: flex; align-items: center; }\r\n.explanation-card h5 span { margin-left: 10px; }\r\n.explanation-card p { margin: 8px 0; font-size: 15px; line-height: 1.7; color: #444; }\r\n.explanation-card .cost { font-size: 22px; font-weight: bold; color: var(--primary); text-align: left; margin-top: 10px; }\r\n.explanation-card .cost.final-cost { color: var(--success); }\r\n.share-button{display:block;width:100%;padding:12px;margin-top:15px;background:#25D366;color:#fff;font-weight:700;border:none;border-radius:8px;cursor:pointer;font-size:16px; transition: all 0.3s ease;}\r\n.share-button:hover{background:#1EBE56; transform: translateY(-2px); box-shadow: var(--shadow-hover); }\r\n.delete-all-btn { background-color: var(--danger); }\r\n.delete-all-btn:hover { background-color: #a52a1d; }\r\n#purchase-order-card { background-color: #fffbe6; border: 2px dashed var(--warning); }\r\n#purchase-order-card h4 { color: #856404; }\r\n#purchase-order-card ul { list-style-type: none; padding-right: 0; margin-top: 10px; }\r\n#purchase-order-card ul li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 15px; }\r\n#purchase-order-card ul li span:first-child { font-weight: bold; }\r\n.details-section { border-top: 1px dashed #ccc; margin-top: 15px; padding-top: 15px; }\r\n\/* Modal Styles *\/\r\n.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }\r\n.modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 600px; border-radius: 10px; text-align: center; }\r\n.modal-content h3 { color: var(--primary); }\r\n.modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }\r\n.modal-option { padding: 20px; border: 2px solid var(--gray); border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 18px; font-weight: bold; }\r\n.modal-option:hover { border-color: var(--primary); background-color: #f0f8ff; transform: scale(1.05); }\r\n.close-modal { color: #aaa; float: left; font-size: 28px; font-weight: bold; }\r\n.close-modal:hover, .close-modal:focus { color: black; text-decoration: none; cursor: pointer; }\r\n\/* Education Section *\/\r\n#education-section .panel p { line-height: 1.8; margin-bottom: 15px; }\r\n#education-section .panel code { background-color: #eee; padding: 2px 6px; border-radius: 4px; font-family: monospace; direction: ltr; display: inline-block; }\r\n.skirting-control { background-color: #f0f8ff; padding: 15px; border-radius: 8px; border: 1px solid var(--secondary); margin-top: 10px; }\r\n.payment-card { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; transition: all 0.3s ease; }\r\n.payment-card:hover { background-color: #e9ecef; }\r\n.payment-card input { flex: 1; padding: 8px; border: 1px solid #ced4da; border-radius: 4px; }\r\n.payment-card .payment-amount-input { max-width: 150px; }\r\n.payment-card .payment-date { max-width: 150px; }\r\n.payment-card .payment-notes { flex: 2; }\r\n.negative { color: var(--danger); }\r\n.positive { color: var(--success); }\r\n.final-controls { margin-top: 30px; padding: 20px; border-top: 2px solid var(--gray); display: flex; flex-direction: column; gap: 15px; }\r\n.save-load-controls { display: flex; gap: 10px; margin-top: 15px; }\r\n.save-load-controls button { flex: 1; padding: 10px; }\r\n.start-project-controls { background-color: #fffbe6; padding: 20px; border-radius: 10px; border: 2px dashed var(--warning); margin-top: 20px; }\r\n.start-project-controls h4 { color: #856404; margin-top: 0; }\r\n\r\n\/* \u062f\u0641\u062a\u0631 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639 *\/\r\n.project-notes {\r\n background: #fffbe6;\r\n border: 2px solid var(--warning);\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n overflow: hidden;\r\n}\r\n\r\n.project-notes .accordion {\r\n background: #fffbe6;\r\n color: #856404;\r\n border: none;\r\n}\r\n\r\n.project-notes textarea {\r\n width: 100%;\r\n height: 120px;\r\n padding: 15px;\r\n border: 1px solid #ffd166;\r\n border-radius: 8px;\r\n font-family: 'Cairo', sans-serif;\r\n font-size: 16px;\r\n resize: vertical;\r\n background: #fffdf6;\r\n}\r\n\r\n\/* \u0645\u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629 *\/\r\n.tile-showroom-section {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n border: 2px solid var(--primary);\r\n border-radius: 10px;\r\n margin-top: 20px;\r\n padding: 20px;\r\n}\r\n\r\n.tile-showroom-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n}\r\n\r\n.tile-showroom-stats {\r\n display: flex;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.stat-card {\r\n background: white;\r\n border-radius: 8px;\r\n padding: 15px;\r\n min-width: 150px;\r\n text-align: center;\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n.stat-card h5 {\r\n margin: 0 0 10px 0;\r\n color: #555;\r\n font-size: 14px;\r\n}\r\n\r\n.stat-card .amount {\r\n font-size: 22px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n}\r\n\r\n.tile-showroom-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 20px;\r\n margin-top: 20px;\r\n}\r\n\r\n.tile-card {\r\n background: white;\r\n border-radius: 10px;\r\n padding: 20px;\r\n box-shadow: var(--shadow);\r\n border: 2px solid #eee;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n}\r\n\r\n.tile-card:hover {\r\n border-color: var(--primary);\r\n transform: translateY(-5px);\r\n box-shadow: var(--shadow-hover);\r\n}\r\n\r\n.tile-card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n padding-bottom: 10px;\r\n border-bottom: 1px solid #eee;\r\n}\r\n\r\n.tile-card-header h5 {\r\n margin: 0;\r\n color: var(--primary);\r\n font-size: 16px;\r\n}\r\n\r\n.tile-badge {\r\n background: var(--primary);\r\n color: white;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n font-weight: bold;\r\n}\r\n\r\n.tile-card-body {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.tile-details {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n}\r\n\r\n.tile-detail-item {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.tile-detail-label {\r\n font-size: 12px;\r\n color: #666;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.tile-detail-value {\r\n font-weight: bold;\r\n color: #333;\r\n}\r\n\r\n.tile-total {\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n padding: 10px;\r\n background: #f8f9fa;\r\n border-radius: 6px;\r\n margin-top: 10px;\r\n}\r\n\r\n.tile-card-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 10px;\r\n}\r\n\r\n\/* \u0646\u0627\u0641\u0630\u0629 \u0625\u0636\u0627\u0641\u0629 \u0628\u0644\u0627\u0637 \u062c\u062f\u064a\u062f\u0629 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629 *\/\r\n.tile-selection-modal .modal-content {\r\n max-width: 700px;\r\n}\r\n\r\n.tile-selection-form {\r\n text-align: right;\r\n}\r\n\r\n.tile-selection-form .form-group {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.area-info-box {\r\n background: #eaf5ff;\r\n padding: 15px;\r\n border-radius: 8px;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n}\r\n\r\n.area-info-box h4 {\r\n margin: 0 0 10px 0;\r\n color: var(--primary);\r\n}\r\n\r\n.area-info-box p {\r\n margin: 5px 0;\r\n font-size: 16px;\r\n}\r\n\r\n\/* \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0644\u0644\u0628\u0644\u0627\u0637 *\/\r\n.shopping-list-section {\r\n background: #e8f5e9;\r\n border: 2px solid var(--success);\r\n border-radius: 10px;\r\n margin-top: 20px;\r\n padding: 20px;\r\n}\r\n\r\n.shopping-list-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 15px;\r\n background: white;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n.shopping-list-table th {\r\n background: var(--success);\r\n color: white;\r\n padding: 12px;\r\n text-align: center;\r\n}\r\n\r\n.shopping-list-table td {\r\n padding: 10px;\r\n border: 1px solid #eee;\r\n text-align: center;\r\n}\r\n\r\n\/* \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u062c\u062f\u064a\u062f: \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 *\/\r\n.spreadsheet-btn {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n padding: 15px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n font-size: 16px;\r\n width: 100%;\r\n margin: 15px 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.spreadsheet-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n#spreadsheet-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0,0,0,0.9);\r\n z-index: 9997;\r\n overflow: auto;\r\n display: none;\r\n backdrop-filter: blur(5px);\r\n}\r\n\r\n.spreadsheet-container {\r\n background: white;\r\n min-height: 100vh;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.spreadsheet-header {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n padding: 25px;\r\n border-radius: 12px;\r\n margin-bottom: 25px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n}\r\n\r\n.spreadsheet-controls {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.spreadsheet-controls button {\r\n background: rgba(255,255,255,0.2);\r\n border: 2px solid rgba(255,255,255,0.3);\r\n color: white;\r\n padding: 10px 18px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.spreadsheet-controls button:hover {\r\n background: rgba(255,255,255,0.3);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.fullscreen-btn {\r\n background: rgba(255,255,255,0.2) !important;\r\n border: 2px solid rgba(255,255,255,0.3) !important;\r\n color: white !important;\r\n}\r\n\r\n#excel-like-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: white;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n}\r\n\r\n#excel-like-table th {\r\n background: #2c3e50;\r\n color: white;\r\n padding: 15px;\r\n border: 1px solid #34495e;\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n font-weight: 700;\r\n text-align: center;\r\n}\r\n\r\n#excel-like-table td {\r\n padding: 10px;\r\n border: 1px solid #ddd;\r\n text-align: center;\r\n transition: background 0.2s ease;\r\n}\r\n\r\n#excel-like-table td:hover {\r\n background: #f8f9fa;\r\n}\r\n\r\n.cell-editable {\r\n width: 100%;\r\n border: none;\r\n padding: 8px;\r\n background: transparent;\r\n text-align: center;\r\n font-size: 14px;\r\n font-family: 'Cairo', sans-serif;\r\n}\r\n\r\n.cell-editable:focus {\r\n outline: 2px solid var(--primary);\r\n background: #f0f8ff;\r\n border-radius: 4px;\r\n}\r\n\r\n.cell-calculated {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n font-weight: bold;\r\n min-width: 120px;\r\n color: var(--primary);\r\n}\r\n\r\n.spreadsheet-action-btn {\r\n background: white;\r\n border: 2px solid #ddd;\r\n padding: 6px 10px;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n margin: 0 3px;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.spreadsheet-action-btn:hover {\r\n background: #f8f9fa;\r\n transform: scale(1.1);\r\n}\r\n\r\n\/* \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a *\/\r\n.financial-dashboard {\r\n background: white;\r\n border-radius: 10px;\r\n padding: 20px;\r\n box-shadow: var(--shadow);\r\n margin-top: 20px;\r\n}\r\n\r\n.financial-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 15px;\r\n}\r\n\r\n.financial-table th {\r\n background: var(--primary);\r\n color: white;\r\n padding: 12px;\r\n text-align: center;\r\n}\r\n\r\n.financial-table td {\r\n padding: 10px;\r\n border: 1px solid #eee;\r\n text-align: center;\r\n}\r\n\r\n.financial-summary {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 15px;\r\n margin-top: 20px;\r\n}\r\n\r\n.financial-card {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n border-radius: 8px;\r\n padding: 15px;\r\n text-align: center;\r\n border-left: 4px solid var(--primary);\r\n}\r\n\r\n.financial-card.total { border-left-color: var(--primary); }\r\n.financial-card.paid { border-left-color: var(--success); }\r\n.financial-card.balance { border-left-color: var(--warning); }\r\n\r\n.financial-card h5 {\r\n margin: 0 0 10px 0;\r\n color: #555;\r\n font-size: 14px;\r\n}\r\n\r\n.financial-card .amount {\r\n font-size: 22px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n}\r\n\r\n.financial-card .amount.positive { color: var(--success); }\r\n.financial-card .amount.negative { color: var(--danger); }\r\n\r\n\/* ========== \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0637\u064a \u0628\u0627\u0644\u0623\u0635\u0641\u0631 \u0627\u0644\u0641\u0627\u0642\u0639 ========== *\/\r\n.collapsible-section {\r\n margin-bottom: 20px;\r\n}\r\n\r\n.section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: var(--primary);\r\n color: white;\r\n padding: 15px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n margin-bottom: 0;\r\n border: 2px solid rgba(255, 215, 0, 0.3);\r\n}\r\n\r\n.section-header h3 {\r\n margin: 0;\r\n font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n color: var(--warning-yellow); \/* \u0623\u0635\u0641\u0631 \u0641\u0627\u0642\u0639 *\/\r\n font-weight: bold;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.2);\r\n}\r\n\r\n.section-header .collapse-icon {\r\n color: var(--warning-yellow); \/* \u0623\u0635\u0641\u0631 \u0641\u0627\u0642\u0639 *\/\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.section-header.collapsed .collapse-icon {\r\n transform: rotate(-90deg);\r\n}\r\n\r\n.section-content {\r\n padding: 20px;\r\n background: white;\r\n border: 1px solid #ddd;\r\n border-top: none;\r\n border-radius: 0 0 8px 8px;\r\n display: block;\r\n}\r\n\r\n.section-content.collapsed {\r\n display: none;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u062c\u062f\u064a\u062f \u0644\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u062e\u0635\u0635\u0629 *\/\r\n.area-type-badge {\r\n background: var(--secondary);\r\n color: white;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n font-weight: bold;\r\n margin-right: 10px;\r\n}\r\n\r\n.tile-selection-status {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 10px;\r\n}\r\n\r\n.tile-selection-status .selected {\r\n color: var(--success);\r\n font-weight: bold;\r\n}\r\n\r\n.tile-selection-status .not-selected {\r\n color: var(--danger);\r\n font-weight: bold;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062e\u062a\u0627\u0631 \u0641\u064a \u0627\u0644\u0645\u0639\u0631\u0636 *\/\r\n.tile-card.confirmed {\r\n border-color: var(--success);\r\n background: linear-gradient(135deg, #f8fff9 0%, #e9f7eb 100%);\r\n}\r\n\r\n.tile-card.confirmed .tile-badge {\r\n background: var(--success);\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0644\u0644\u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n@media (max-width: 768px) {\r\n .container { padding: 10px; }\r\n .inline { flex-direction: column; gap: 10px; }\r\n .form-group { min-width: 100%; }\r\n table { \r\n min-width: 800px;\r\n font-size: 12px;\r\n }\r\n table th, table td { padding: 6px; font-size: 12px; }\r\n .payment-card { flex-direction: column; }\r\n .payment-card input { width: 100%; max-width: 100%; }\r\n .tile-showroom-header { flex-direction: column; text-align: center; }\r\n .tile-showroom-stats { justify-content: center; }\r\n .tile-showroom-grid { grid-template-columns: 1fr; }\r\n .tile-details { grid-template-columns: 1fr; }\r\n .spreadsheet-header { flex-direction: column; text-align: center; }\r\n .spreadsheet-controls { justify-content: center; }\r\n .spreadsheet-controls button { padding: 8px 12px; font-size: 14px; }\r\n #excel-like-table { font-size: 12px; }\r\n .cell-editable { padding: 5px; font-size: 12px; }\r\n .financial-summary { grid-template-columns: 1fr; }\r\n .tile-selection-modal .modal-content { width: 95%; margin: 10% auto; }\r\n .section-header { padding: 12px; }\r\n .section-header h3 { font-size: 16px; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n header h1 { font-size: 22px; }\r\n .card { padding: 15px; }\r\n .area-group { padding: 15px; }\r\n .modal-content { width: 95%; margin: 10% auto; }\r\n .modal-options { grid-template-columns: 1fr; }\r\n .stat-card { min-width: 120px; }\r\n .tile-card { padding: 15px; }\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u0645\u064a\u0632\u0629 *\/\r\n.highlighted-area {\r\n background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\r\n border-color: var(--primary);\r\n}\r\n\r\n.area-selection-controls {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.area-selection-controls button {\r\n flex: 1;\r\n min-width: 150px;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n.smooth-scroll {\r\n scroll-behavior: smooth;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629 *\/\r\n.settings-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-top: 20px;\r\n}\r\n\r\n.setting-card {\r\n background: white;\r\n border-radius: 8px;\r\n padding: 20px;\r\n box-shadow: var(--shadow);\r\n border: 1px solid #e0e0e0;\r\n}\r\n\r\n.setting-card h5 {\r\n margin: 0 0 15px 0;\r\n color: var(--primary);\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 10px;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 *\/\r\n.enhanced-explanation {\r\n line-height: 1.8;\r\n font-size: 15px;\r\n color: #444;\r\n margin: 10px 0;\r\n}\r\n\r\n.enhanced-explanation strong {\r\n color: var(--primary);\r\n}\r\n\r\n.enhanced-explanation .formula {\r\n background: #f5f5f5;\r\n padding: 10px;\r\n border-radius: 6px;\r\n border-right: 3px solid var(--primary);\r\n margin: 10px 0;\r\n font-family: 'Cairo', monospace;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0637 \u0641\u064a \u0627\u0644\u0643\u0627\u0631\u062a *\/\r\n.tile-card .tile-details-small {\r\n font-size: 11px;\r\n color: #666;\r\n line-height: 1.4;\r\n margin-top: 5px;\r\n padding: 5px;\r\n background: #f8f9fa;\r\n border-radius: 4px;\r\n border: 1px solid #e9ecef;\r\n}\r\n\r\n.tile-card .tile-details-small div {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 2px 0;\r\n}\r\n\r\n.tile-card .tile-details-small .detail-label {\r\n font-weight: bold;\r\n color: #555;\r\n}\r\n\r\n.tile-card .tile-details-small .detail-value {\r\n color: #333;\r\n}\r\n\r\n.tile-card .edit-tile-btn {\r\n background: var(--secondary);\r\n color: white;\r\n border: none;\r\n padding: 6px 10px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 11px;\r\n margin-top: 5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.tile-card .edit-tile-btn:hover {\r\n background: #0077b3;\r\n transform: translateY(-1px);\r\n}\r\n\r\n.skirting-auto-note {\r\n font-size: 11px;\r\n color: var(--warning);\r\n font-style: italic;\r\n margin-top: 3px;\r\n padding: 3px 6px;\r\n background: #fff8e1;\r\n border-radius: 3px;\r\n border: 1px dashed #ffd166;\r\n}\r\n\r\n.tile-details-popup {\r\n position: absolute;\r\n bottom: 100%;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n border: 1px solid #ddd;\r\n border-radius: 6px;\r\n padding: 8px;\r\n font-size: 11px;\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n z-index: 100;\r\n display: none;\r\n}\r\n\r\n.tile-details-popup.show {\r\n display: block;\r\n}\r\n\r\n.summary-table-enhanced td:hover .tile-details-popup {\r\n display: block;\r\n}\r\n\r\n.tile-type-special {\r\n position: relative;\r\n padding-right: 20px;\r\n}\r\n\r\n.tile-type-special::after {\r\n content: \"\u2728\";\r\n position: absolute;\r\n right: 5px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 12px;\r\n}\r\n\r\n.tile-type-marble {\r\n background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);\r\n border-color: #9b59b6;\r\n}\r\n\r\n.tile-type-decor {\r\n background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);\r\n border-color: #e74c3c;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u0644\u062e\u0635 \u0627\u0644\u0645\u062d\u0633\u0646 *\/\r\n.summary-table-enhanced {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n background: white;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n.summary-table-enhanced th {\r\n background: var(--primary);\r\n color: white;\r\n padding: 12px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 14px;\r\n}\r\n\r\n.summary-table-enhanced td {\r\n padding: 10px;\r\n border: 1px solid #eee;\r\n text-align: center;\r\n font-size: 14px;\r\n}\r\n\r\n.summary-table-enhanced tfoot {\r\n background-color: #f2f2f2;\r\n font-weight: bold;\r\n}\r\n\r\n.summary-table-enhanced tfoot td {\r\n border-top: 2px solid var(--primary);\r\n font-size: 15px;\r\n}\r\n\r\n.summary-table-enhanced .manufacturer-cell {\r\n font-weight: bold;\r\n color: var(--primary);\r\n}\r\n\r\n.summary-table-enhanced .confirmed-price {\r\n background-color: #d4edda;\r\n font-weight: bold;\r\n color: #155724;\r\n}\r\n\r\n.summary-table-enhanced .workmanship-cell {\r\n background-color: #fff3cd;\r\n color: #856404;\r\n font-weight: bold;\r\n}\r\n\r\n.summary-table-enhanced .total-cell {\r\n background-color: #cce5ff;\r\n font-weight: bold;\r\n color: #004085;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0639\u0631\u0636 \u0627\u0644\u0628\u0644\u0627\u0637 \u0641\u064a \u0627\u0644\u0645\u0639\u0631\u0636 *\/\r\n.tile-comparison-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 15px;\r\n margin-top: 15px;\r\n}\r\n\r\n.tile-comparison-item {\r\n background: white;\r\n border: 2px solid #eee;\r\n border-radius: 8px;\r\n padding: 15px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n}\r\n\r\n.tile-comparison-item.confirmed {\r\n border-color: var(--success);\r\n background: linear-gradient(135deg, #f8fff9 0%, #e9f7eb 100%);\r\n}\r\n\r\n.tile-comparison-item .confirm-btn {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: var(--success);\r\n color: white;\r\n border: none;\r\n padding: 5px 10px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.tile-comparison-item .confirm-btn:hover {\r\n background: #218838;\r\n transform: translateY(-1px);\r\n}\r\n\r\n.tile-comparison-item .unconfirm-btn {\r\n background: var(--warning);\r\n}\r\n\r\n.tile-comparison-item .unconfirm-btn:hover {\r\n background: #e0a800;\r\n}\r\n\r\n.tile-comparison-item h6 {\r\n margin: 0 0 10px 0;\r\n color: var(--primary);\r\n font-size: 14px;\r\n padding-right: 60px;\r\n}\r\n\r\n.tile-comparison-details {\r\n font-size: 12px;\r\n color: #666;\r\n line-height: 1.5;\r\n}\r\n\r\n.tile-comparison-details div {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 3px 0;\r\n}\r\n\r\n.tile-comparison-details .detail-label {\r\n font-weight: bold;\r\n color: #555;\r\n}\r\n\r\n.tile-comparison-details .detail-value {\r\n color: #333;\r\n}\r\n\r\n.tile-comparison-actions {\r\n display: flex;\r\n gap: 5px;\r\n margin-top: 10px;\r\n justify-content: flex-end;\r\n}\r\n\r\n.tile-comparison-actions button {\r\n padding: 3px 8px;\r\n font-size: 11px;\r\n border-radius: 3px;\r\n}\r\n\r\n\/* ========== \u062a\u0635\u0645\u064a\u0645 \u0646\u0627\u0641\u0630\u0629 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062d\u0633\u0646\u0629 ========== *\/\r\n.tile-form-simplified .form-group {\r\n margin-bottom: 10px;\r\n}\r\n\r\n.tile-form-simplified .form-group label {\r\n font-size: 12px;\r\n color: #555;\r\n margin-bottom: 3px;\r\n}\r\n\r\n.tile-form-simplified .form-group input,\r\n.tile-form-simplified .form-group select {\r\n padding: 8px;\r\n font-size: 13px;\r\n}\r\n\r\n.tile-form-simplified .optional-field {\r\n opacity: 0.8;\r\n}\r\n\r\n.tile-form-simplified .optional-field label {\r\n color: #888;\r\n}\r\n\r\n.tile-form-simplified . label::after {\r\n content: \" *\";\r\n color: var(--danger);\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0639\u0631\u0636 \u0627\u0644\u0645\u0635\u0646\u0639 *\/\r\n.manufacturer-highlight {\r\n background: #e3f2fd;\r\n padding: 5px 10px;\r\n border-radius: 4px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n border: 1px solid #bbdefb;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0623\u0643\u064a\u062f *\/\r\n.confirmation-badge {\r\n display: inline-block;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n font-weight: bold;\r\n margin-right: 5px;\r\n}\r\n\r\n.confirmation-badge.confirmed {\r\n background: var(--success);\r\n color: white;\r\n}\r\n\r\n.confirmation-badge.pending {\r\n background: var(--warning);\r\n color: #333;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0639\u0631\u0636 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 *\/\r\n.cost-display {\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: var(--primary);\r\n text-align: center;\r\n padding: 10px;\r\n background: #f8f9fa;\r\n border-radius: 6px;\r\n margin-top: 10px;\r\n border: 1px solid #e9ecef;\r\n}\r\n\r\n.cost-display.confirmed {\r\n background: #d4edda;\r\n color: #155724;\r\n border-color: #c3e6cb;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0644\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062a\u064a \u0644\u062f\u064a\u0647\u0627 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a *\/\r\n.area-with-multiple-tiles {\r\n border-left: 4px solid var(--primary);\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n}\r\n\r\n.area-tile-count-badge {\r\n background: var(--primary);\r\n color: white;\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n margin-right: 10px;\r\n}\r\n\r\n\/* ========== \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062d\u0633\u0651\u0646 \u0644\u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 ========== *\/\r\n.tile-options-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 15px;\r\n margin: 15px 0;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .tile-options-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n.tile-option-card {\r\n border: 2px solid #ddd;\r\n border-radius: 8px;\r\n padding: 15px;\r\n background: #f9f9f9;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.tile-option-card.wall-option {\r\n border-color: #FFD700; \/* \u0623\u0635\u0641\u0631 *\/\r\n background: linear-gradient(135deg, #fff8e6 0%, #ffeaa7 100%);\r\n}\r\n\r\n.tile-option-card.floor-option {\r\n border-color: var(--success); \/* \u0623\u062e\u0636\u0631 *\/\r\n background: linear-gradient(135deg, #e8f8f5 0%, #d1f2eb 100%);\r\n}\r\n\r\n.tile-option-card h5 {\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid rgba(0,0,0,0.1);\r\n text-align: center;\r\n}\r\n\r\n.installation-options {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n margin: 10px 0;\r\n}\r\n\r\n.installation-option {\r\n flex: 1;\r\n min-width: 120px;\r\n text-align: center;\r\n padding: 10px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n background: white;\r\n}\r\n\r\n.installation-option.selected {\r\n border-color: var(--primary);\r\n background: #e3f2fd;\r\n color: var(--primary);\r\n font-weight: bold;\r\n}\r\n\r\n.installation-option:hover {\r\n border-color: var(--secondary);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.installation-option i {\r\n display: block;\r\n font-size: 20px;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.accessories-section {\r\n background: #fff8e1;\r\n border: 1px solid #ffd166;\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin: 15px 0;\r\n}\r\n\r\n.accessories-section h5 {\r\n color: var(--warning);\r\n margin-bottom: 10px;\r\n}\r\n\r\n.notes-field {\r\n width: 100%;\r\n padding: 10px;\r\n border: 1px solid #ced4da;\r\n border-radius: 6px;\r\n font-family: 'Cairo', sans-serif;\r\n resize: vertical;\r\n background: #fdfdfd;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629 *\/\r\n.workmanship-price-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin: 10px 0;\r\n padding: 10px;\r\n background: #f8f9fa;\r\n border-radius: 6px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.workmanship-price-control label {\r\n font-weight: bold;\r\n color: var(--primary);\r\n min-width: 150px;\r\n}\r\n\r\n.workmanship-price-control input {\r\n flex: 1;\r\n max-width: 200px;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 *\/\r\n#main-content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0644\u0644\u062a\u0628\u0627\u064a\u0646 *\/\r\n.skirting-option {\r\n background: linear-gradient(135deg, #e8f4ff 0%, #d1e7ff 100%);\r\n border-color: var(--secondary);\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628 *\/\r\n.installation-method-control {\r\n background: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 8px;\r\n margin: 15px 0;\r\n border: 1px solid #dee2e6;\r\n}\r\n\r\n.installation-method-control h5 {\r\n margin-top: 0;\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0639\u0631\u0636 \u0627\u0644\u0633\u0639\u0631 \u0644\u0643\u0644 \u0645\u062a\u0631 \u0641\u064a \u0627\u0644\u0639\u0645\u0627\u0644\u0629 *\/\r\n.workmanship-price-display {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: #e9ecef;\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n margin: 5px 0;\r\n}\r\n\r\n.workmanship-price-display label {\r\n font-weight: bold;\r\n color: #495057;\r\n}\r\n\r\n.workmanship-price-display .price-value {\r\n font-weight: bold;\r\n color: var(--primary);\r\n font-size: 16px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<main class=\"container\">\r\n <header><h1>\u0645\u0646\u0635\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643 (v18.2 - \u0646\u0638\u0627\u0645 \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u062a\u062d\u0643\u0645 \u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f \u0648\u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629)<\/h1><\/header>\r\n\r\n <!-- 1\ufe0f\u20e3 \u062f\u0644\u064a\u0644 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0633\u0631\u064a\u0639 -->\r\n <div class=\"collapsible-section\" id=\"guide-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('guide')\">\r\n <h3><i class=\"fas fa-book\"><\/i> \ud83d\udcd6 \u062f\u0644\u064a\u0644 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0633\u0631\u064a\u0639<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"guide-content\">\r\n <section class=\"card\">\r\n <div class=\"enhanced-explanation\">\r\n <p><strong>\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643 \u0641\u064a \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0651\u0646\u0629 \u0645\u0646 \u0645\u0646\u0635\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643!<\/strong><\/p>\r\n \r\n <p><strong>\ud83d\ude80 \u062e\u0637\u0648\u0627\u062a \u0627\u0644\u0639\u0645\u0644:<\/strong><\/p>\r\n <ol>\r\n <li><strong>\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a:<\/strong> \u0627\u0628\u062f\u0623 \u0628\u0625\u0636\u0627\u0641\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u0631\u0627\u062f \u062a\u0628\u0644\u064a\u0637\u0647\u0627 \u0645\u0646 \u0642\u0633\u0645 \"\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a\"<\/li>\r\n <li><strong>\u0625\u0636\u0627\u0641\u0629 \u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0637:<\/strong> \u0627\u0646\u062a\u0642\u0644 \u0644\u0642\u0633\u0645 \"\u0645\u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629\" \u0648\u0623\u0636\u0641 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a \u0644\u0644\u0628\u0644\u0627\u0637 \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/li>\r\n <li><strong>\u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0648\u0627\u0644\u062a\u0623\u0643\u064a\u062f:<\/strong> \u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0648\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0632\u0631 \"\u062a\u0623\u0643\u064a\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630\" \u0644\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/li>\r\n <li><strong>\u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f:<\/strong> \u0645\u0646 \u0642\u0633\u0645 \"\u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629\" \u064a\u0645\u0643\u0646\u0643 \u062a\u0641\u0639\u064a\u0644\/\u0625\u0644\u063a\u0627\u0621 \u062d\u0633\u0627\u0628 \u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628<\/li>\r\n <li><strong>\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629:<\/strong> \u0623\u0636\u0641 \u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u064a\u062f\u0648\u064a\u0627\u064b \u0645\u0646 \u0642\u0633\u0645 \"\u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629\"<\/li>\r\n <li><strong>\u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a:<\/strong> \u062a\u0627\u0628\u0639 \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0627\u062a \u0648\u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0645\u0646 \u0642\u0633\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a<\/li>\r\n <\/ol>\r\n \r\n <p><strong>\ud83d\udca1 \u0645\u064a\u0632\u0627\u062a \u062c\u062f\u064a\u062f\u0629:<\/strong><\/p>\r\n <ul>\r\n <li><strong>\u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f:<\/strong> \u064a\u0645\u0643\u0646\u0643 \u062a\u0641\u0639\u064a\u0644\/\u0625\u0644\u063a\u0627\u0621 \u062d\u0633\u0627\u0628 \u0623\u064a \u0645\u0627\u062f\u0629 \u062a\u0631\u0643\u064a\u0628<\/li>\r\n <li><strong>\u0644\u0627 \u0645\u0635\u0646\u0639\u064a\u0629 \u062a\u0644\u0642\u0627\u0626\u064a\u0629:<\/strong> \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0627\u062a \u062a\u0636\u0627\u0641 \u064a\u062f\u0648\u064a\u0627\u064b \u062d\u0633\u0628 \u0627\u0644\u062d\u0627\u062c\u0629<\/li>\r\n <li><strong>\u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a<\/strong> \u0644\u0644\u0628\u0644\u0627\u0637 \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/li>\r\n <li><strong>\u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a<\/strong> \u0648\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/li>\r\n <li><strong>\u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u0644\u062e\u0635<\/strong> \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/li>\r\n <li><strong>\u062e\u064a\u0627\u0631\u0627\u062a \u0645\u0646\u0641\u0635\u0644\u0629<\/strong> \u0644\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631 \u0648\u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/li>\r\n <li><strong>\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629<\/strong> \u0645\u0639 \u062e\u0635\u0645 \u0645\u0633\u0627\u062d\u062a\u0647\u0627 \u0645\u0646 \u0627\u0644\u062a\u0643\u0639\u064a\u0628<\/li>\r\n <\/ul>\r\n \r\n <p><strong>\ud83d\udcde \u0644\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a:<\/strong> \u0644\u0627 \u062a\u062a\u0631\u062f\u062f \u0641\u064a \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0646\u0627 \u0639\u0644\u0649 <strong>+201550507700<\/strong> \u0644\u0623\u064a \u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a \u0647\u0646\u062f\u0633\u064a\u0629<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2\ufe0f\u20e3 \u0628\u062f\u0621 \u0645\u0634\u0631\u0648\u0639 \u062c\u062f\u064a\u062f -->\r\n <section class=\"start-project-controls\">\r\n <h4><i class=\"fas fa-rocket\"><\/i> \ud83d\ude80 \u0628\u062f\u0621 \u0645\u0634\u0631\u0648\u0639 \u062c\u062f\u064a\u062f<\/h4>\r\n <p>\u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0630\u064a \u062a\u0631\u064a\u062f \u0627\u0644\u0628\u062f\u0621 \u0628\u0647:<\/p>\r\n <div class=\"inline\">\r\n <button class=\"share-button\" onclick=\"calculator.startEmptyProject()\">\r\n <i class=\"fas fa-file\"><\/i> \u0645\u0634\u0631\u0648\u0639 \u0641\u0627\u0631\u063a\r\n <\/button>\r\n <button class=\"share-button\" onclick=\"calculator.startSampleProject()\">\r\n <i class=\"fas fa-home\"><\/i> \u0645\u0634\u0631\u0648\u0639 \u0646\u0645\u0648\u0630\u062c\u064a\r\n <\/button>\r\n <button class=\"share-button\" onclick=\"calculator.importProject()\">\r\n <i class=\"fas fa-file-import\"><\/i> \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0645\u0634\u0631\u0648\u0639\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 3\ufe0f\u20e3 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644 \u0644\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062d\u0627\u0644\u064a -->\r\n <section class=\"card\" style=\"background-color: #eaf5ff;\">\r\n <h3><i class=\"fas fa-user-hard-hat\"><\/i> \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644 \u0644\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062d\u0627\u0644\u064a<\/h3>\r\n <div class=\"inline\">\r\n <div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0642\u0627\u0648\u0644<\/label><input type=\"text\" id=\"contractorName\" placeholder=\"\u0627\u0633\u0645 \u0645\u0642\u0627\u0648\u0644 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\" class=\"validate-input\" data-validate=\"text\"><\/div>\r\n <div class=\"form-group\"><label>\u0631\u0642\u0645 \u0647\u0627\u062a\u0641 \u0627\u0644\u0645\u0642\u0627\u0648\u0644<\/label>\r\n <div class=\"phone-group\">\r\n <input type=\"tel\" id=\"contractorPhone\" placeholder=\"01xxxxxxxxx\" class=\"validate-input\" data-validate=\"phone\">\r\n <a id=\"callLink\" href=\"#\" class=\"call-btn\">\ud83d\udcde<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 4\ufe0f\u20e3 \u062f\u0641\u062a\u0631 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639 -->\r\n <section class=\"card project-notes\">\r\n <button class=\"accordion\">\ud83d\udcdd \u062f\u0641\u062a\u0631 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/button>\r\n <div class=\"panel\">\r\n <textarea id=\"project-notes\" placeholder=\"\u0627\u0643\u062a\u0628 \u0647\u0646\u0627 \u0645\u0644\u0627\u062d\u0638\u0627\u062a\u0643 \u062d\u0648\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\u060c \u0623\u0641\u0643\u0627\u0631\u0643\u060c \u0645\u062a\u0637\u0644\u0628\u0627\u062a \u062e\u0627\u0635\u0629\u060c \u0623\u0648 \u0623\u064a \u0634\u064a\u0621 \u062a\u0631\u064a\u062f \u062a\u0630\u0643\u0631\u0647...\"><\/textarea>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 5\ufe0f\u20e3 \u062a\u0627\u0628\u0627\u062a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 -->\r\n <div id=\"project-tabs-container\" class=\"project-tabs\"><\/div>\r\n\r\n <!-- 6\ufe0f\u20e3 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629 -->\r\n <div class=\"collapsible-section\" id=\"settings-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('settings')\">\r\n <h3><i class=\"fas fa-cogs\"><\/i> \u2699\ufe0f \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"settings-content\">\r\n <section class=\"card\">\r\n <div class=\"settings-grid\">\r\n <div class=\"setting-card\">\r\n <h5><i class=\"fas fa-ruler\"><\/i> \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0642\u064a\u0627\u0633\u0627\u062a<\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0648\u0632\u0631 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a (\u0633\u0645)<\/label>\r\n <input type=\"number\" id=\"skirtingHeight\" value=\"10\" min=\"5\" max=\"30\" step=\"0.5\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0645\u0643 \u0627\u0644\u0645\u0648\u0646\u0629 (\u0633\u0645)<\/label>\r\n <input type=\"number\" id=\"mortarThickness\" value=\"3\" min=\"1\" max=\"5\" step=\"0.5\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-card\">\r\n <h5><i class=\"fas fa-percentage\"><\/i> \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0646\u0633\u0628<\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0633\u0628\u0629 \u0627\u0644\u0647\u0627\u0644\u0643 \u0641\u064a \u0627\u0644\u0628\u0644\u0627\u0637 %<\/label>\r\n <input type=\"number\" id=\"wastePercentage\" value=\"10\" min=\"0\" max=\"30\" step=\"0.5\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"percentage\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0645\u0635\u0627\u0631\u064a\u0641 \u062c\u0627\u0646\u0628\u064a\u0629 %<\/label>\r\n <input type=\"number\" id=\"addOnsPercentage\" value=\"10\" min=\"0\" max=\"50\" step=\"0.5\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"percentage\">\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u0642\u0633\u0645 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u062c\u062f\u064a\u062f -->\r\n <div class=\"setting-card\">\r\n <h5><i class=\"fas fa-boxes\"><\/i> \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628<\/h5>\r\n \r\n <!-- \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629 -->\r\n <div class=\"checkbox-group\" style=\"margin-bottom: 10px; padding: 10px; background: #f8f9fa; border-radius: 6px;\">\r\n <input type=\"checkbox\" id=\"enableGlue\" checked>\r\n <label for=\"enableGlue\" style=\"font-weight: bold; color: var(--primary);\">\r\n \u062a\u0641\u0639\u064a\u0644 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"form-group\" id=\"glue-control\" style=\"margin-bottom: 15px;\">\r\n <label>\u0633\u0639\u0631 \u0634\u0643\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629 (\u062c)<\/label>\r\n <input type=\"number\" id=\"gluePrice\" value=\"120\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <small style=\"color: #666; font-size: 11px;\">\u062a\u0643\u0641\u064a \u0644\u0640 5 \u0645\u00b2 \u062a\u0642\u0631\u064a\u0628\u0627\u064b<\/small>\r\n <\/div>\r\n \r\n <!-- \u0645\u0627\u062f\u0629 \u0627\u0644\u0633\u0642\u064a\u0629 -->\r\n <div class=\"checkbox-group\" style=\"margin-bottom: 10px; padding: 10px; background: #f8f9fa; border-radius: 6px;\">\r\n <input type=\"checkbox\" id=\"enableGrout\" checked>\r\n <label for=\"enableGrout\" style=\"font-weight: bold; color: var(--primary);\">\r\n \u062a\u0641\u0639\u064a\u0644 \u062d\u0633\u0627\u0628 \u0645\u0627\u062f\u0629 \u0627\u0644\u0633\u0642\u064a\u0629\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"form-group\" id=\"grout-control\" style=\"margin-bottom: 15px;\">\r\n <label>\u0633\u0639\u0631 \u0634\u0643\u0627\u0631\u0629 \u0645\u0627\u062f\u0629 \u0627\u0644\u0633\u0642\u064a\u0629 (\u062c)<\/label>\r\n <input type=\"number\" id=\"groutPrice\" value=\"80\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <small style=\"color: #666; font-size: 11px;\">\u062a\u0643\u0641\u064a \u0644\u0640 18 \u0645\u00b2 \u062a\u0642\u0631\u064a\u0628\u0627\u064b<\/small>\r\n <\/div>\r\n \r\n <!-- \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 -->\r\n <div class=\"form-group\">\r\n <label>\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629<\/label>\r\n <select id=\"defaultInstallMethod\">\r\n <option value=\"none\">\u0644\u0627 \u0623\u0631\u064a\u062f \u062d\u0633\u0627\u0628 \u0645\u0648\u0627\u062f \u062a\u0631\u0643\u064a\u0628<\/option>\r\n <option value=\"mortar\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0648\u0646\u0629 \u0627\u0644\u0623\u0633\u0645\u0646\u062a\u064a\u0629<\/option>\r\n <option value=\"glue\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629<\/option>\r\n <\/select>\r\n <small style=\"color: #666; font-size: 11px;\">\u064a\u0645\u0643\u0646 \u062a\u063a\u064a\u064a\u0631\u0647\u0627 \u0644\u0643\u0644 \u0645\u0633\u0627\u062d\u0629<\/small>\r\n <\/div>\r\n \r\n <p style=\"font-size: 12px; color: #666; margin-top: 15px; padding: 10px; background: #e8f4ff; border-radius: 6px;\">\r\n <i class=\"fas fa-info-circle\"><\/i> \u064a\u0645\u0643\u0646\u0643 \u0625\u0644\u063a\u0627\u0621 \u062a\u0641\u0639\u064a\u0644 \u0623\u064a \u0645\u0627\u062f\u0629 \u0644\u0627 \u062a\u0631\u064a\u062f \u062d\u0633\u0627\u0628 \u062a\u0643\u0644\u0641\u062a\u0647\u0627\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 7\ufe0f\u20e3 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a -->\r\n <div class=\"collapsible-section\" id=\"areas-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('areas')\">\r\n <h3><i class=\"fas fa-layer-group\"><\/i> 1\ufe0f\u20e3 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"areas-content\">\r\n <div class=\"card\">\r\n <p style=\"color: #666; margin-bottom: 20px; text-align: center;\">\r\n <i class=\"fas fa-info-circle\"><\/i> \u0647\u0646\u0627 \u062a\u0642\u0648\u0645 \u0628\u0625\u0636\u0627\u0641\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u0631\u0627\u062f \u062a\u0628\u0644\u064a\u0637\u0647\u0627. \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a \u0644\u0644\u0628\u0644\u0627\u0637 \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646\u0647\u0645\r\n <\/p>\r\n \r\n <div id=\"areas-container\"><\/div>\r\n \r\n <div class=\"area-selection-controls\">\r\n <button class=\"add-large\" onclick=\"calculator.openSmartAreaModal()\">\r\n <i class=\"fas fa-plus-circle\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u0627\u062d\u0629 \u0630\u0643\u064a\u0629\r\n <\/button>\r\n <button class=\"add-large\" style=\"background-color: var(--secondary);\" onclick=\"calculator.expandAllSections()\">\r\n <i class=\"fas fa-expand\"><\/i> \u0641\u062a\u062d \u0643\u0644 \u0627\u0644\u0623\u0642\u0633\u0627\u0645\r\n <\/button>\r\n <button class=\"add-large\" style=\"background-color: var(--warning);\" onclick=\"calculator.collapseAllSections()\">\r\n <i class=\"fas fa-compress\"><\/i> \u0637\u064a \u0643\u0644 \u0627\u0644\u0623\u0642\u0633\u0627\u0645\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 8\ufe0f\u20e3 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 -->\r\n <div class=\"collapsible-section\" id=\"order-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('order')\">\r\n <h3><i class=\"fas fa-shopping-cart\"><\/i> \ud83d\udccb \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"order-content\">\r\n <section class=\"card\">\r\n <h4>\ud83d\udccb \u0642\u0627\u0626\u0645\u0629 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062e\u062a\u0627\u0631<\/h4>\r\n <div id=\"tile-order-container\" style=\"min-height: 100px; padding: 20px; background: #f8f9fa; border-radius: 8px; text-align: center;\">\r\n <p style=\"color: #666;\">\u0633\u064a\u062a\u0645 \u0639\u0631\u0636 \u0642\u0627\u0626\u0645\u0629 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0647\u0646\u0627 \u0628\u0639\u062f \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 9\ufe0f\u20e3 \u0645\u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 -->\r\n <div class=\"collapsible-section\" id=\"tiles-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('tiles')\">\r\n <h3><i class=\"fas fa-store\"><\/i> \ud83d\udecd\ufe0f \u0645\u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u0628\u0644\u0627\u0637<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"tiles-content\">\r\n <section class=\"card tile-showroom-section\">\r\n <div class=\"tile-showroom-header\">\r\n <div>\r\n <p>\u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a \u0644\u0644\u0628\u0644\u0627\u0637 \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646\u0647\u0645. \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f \u0639\u0644\u064a\u0647 \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u062a\u0645 \u0627\u0644\u062d\u0633\u0627\u0628 \u0639\u0644\u064a\u0647 \u0641\u064a \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629.<\/p>\r\n <\/div>\r\n <div class=\"tile-showroom-stats\">\r\n <div class=\"stat-card\">\r\n <h5>\u0639\u062f\u062f \u0627\u0644\u0628\u0644\u0627\u0637<\/h5>\r\n <div class=\"amount\" id=\"selected-tiles-count\">0<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h5>\u0627\u0644\u0645\u0624\u0643\u062f \u0639\u0644\u064a\u0647<\/h5>\r\n <div class=\"amount\" id=\"confirmed-tiles-count\">0<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h5>\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0624\u0643\u062f\u0629<\/h5>\r\n <div class=\"amount\" id=\"selected-tiles-total\">0 \u062c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin: 20px 0; text-align: center;\">\r\n <p style=\"color: #666; margin-bottom: 15px;\">\r\n <i class=\"fas fa-lightbulb\"><\/i> \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u0629 \u062e\u064a\u0627\u0631\u0627\u062a \u0644\u0644\u0628\u0644\u0627\u0637 \u0644\u0646\u0641\u0633 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646\u0647\u0645\r\n <\/p>\r\n <button class=\"add-large\" onclick=\"calculator.openTileSelectionModal()\">\r\n <i class=\"fas fa-plus-circle\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0628\u0644\u0627\u0637 \u062c\u062f\u064a\u062f \u0644\u0644\u0645\u0639\u0631\u0636\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"tile-showroom-container\">\r\n <!-- \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062e\u062a\u0627\u0631 \u0633\u064a\u0638\u0647\u0631 \u0647\u0646\u0627 -->\r\n <div style=\"text-align:center; padding:40px; color:#666;\">\r\n <i class=\"fas fa-tile\" style=\"font-size:48px; margin-bottom:20px; opacity:0.3;\"><\/i>\r\n <h3>\u0627\u0644\u0645\u0639\u0631\u0636 \u0641\u0627\u0631\u063a<\/h3>\r\n <p>\u0642\u0645 \u0628\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0623\u0648\u0644\u0627\u064b \u062b\u0645 \u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0643\u0644 \u0645\u0633\u0627\u062d\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"tile-summary-section\" style=\"display:none; margin-top:30px;\">\r\n <h4>\ud83d\udccb \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0644\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062e\u062a\u0627\u0631<\/h4>\r\n <div class=\"table-container\">\r\n <table class=\"shopping-list-table\">\r\n <thead>\r\n <tr>\r\n <th>\u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/th>\r\n <th>\u0627\u0644\u0645\u0635\u0646\u0639<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u062c\/\u0645\u00b2)<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a (\u062c\/\u0645\u00b2)<\/th>\r\n <th>\u0627\u0644\u062a\u0643\u0644\u0641\u0629<\/th>\r\n <th>\u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0623\u0643\u064a\u062f<\/th>\r\n <th>\u0627\u0644\u0625\u062c\u0631\u0627\u0621<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tile-summary-body\"><\/tbody>\r\n <tfoot>\r\n <tr style=\"background-color: #d4edda; font-weight: bold;\">\r\n <td colspan=\"6\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629 \u0644\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f \u0639\u0644\u064a\u0647<\/td>\r\n <td id=\"tile-summary-total\">0.00<\/td>\r\n <td colspan=\"2\"><\/td>\r\n <\/tr>\r\n <\/tfoot>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ud83d\udd1f \u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a -->\r\n <div class=\"collapsible-section\" id=\"workmanship-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('workmanship')\">\r\n <h3><i class=\"fas fa-tools\"><\/i> 2\ufe0f\u20e3 \u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"workmanship-content\">\r\n <section class=\"card\">\r\n <p style=\"color: #666; margin-bottom: 20px; text-align: center;\">\r\n <i class=\"fas fa-info-circle\"><\/i> \u0623\u0636\u0641 \u0647\u0646\u0627 \u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0627\u0644\u0645\u0642\u0637\u0648\u0639\u0629 \u0644\u0644\u0645\u0634\u0631\u0648\u0639 (\u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629\u060c \u0627\u0644\u062e\u062f\u0645\u0627\u062a\u060c \u0625\u0644\u062e)\r\n <\/p>\r\n \r\n <div id=\"workmanship-items-container\"><\/div>\r\n \r\n <!-- \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0644\u0643\u0644 \u0645\u062a\u0631 \u0645\u0631\u0628\u0639 -->\r\n <div class=\"installation-method-control\">\r\n <h5><i class=\"fas fa-money-bill-wave\"><\/i> \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639)<\/h5>\r\n \r\n <div class=\"workmanship-price-control\">\r\n <label>\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u062c\/\u0645\u00b2):<\/label>\r\n <input type=\"number\" id=\"wall-workmanship-price\" value=\"60\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n \r\n <div class=\"workmanship-price-control\">\r\n <label>\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a (\u062c\/\u0645\u00b2):<\/label>\r\n <input type=\"number\" id=\"floor-workmanship-price\" value=\"50\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n \r\n <div class=\"workmanship-price-control\">\r\n <label>\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u0648\u0632\u0631 (\u062c\/\u0645.\u0637):<\/label>\r\n <input type=\"number\" id=\"skirting-workmanship-price\" value=\"25\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n \r\n <p style=\"font-size: 12px; color: #666; margin-top: 10px;\">\r\n <i class=\"fas fa-info-circle\"><\/i> \u0647\u0630\u0647 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0644\u0644\u0627\u0633\u062a\u0631\u0634\u0627\u062f \u0641\u0642\u0637\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0628\u0646\u0648\u062f \u0639\u0645\u0627\u0644\u0629 \u0645\u062d\u062f\u062f\u0629 \u0623\u062f\u0646\u0627\u0647\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"area-selection-controls\">\r\n <button class=\"add-large\" style=\"background-color: var(--primary); margin-top: 15px;\" onclick=\"calculator.addWorkmanshipItem()\">\r\n <i class=\"fas fa-plus-circle\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0628\u0646\u062f \u0639\u0645\u0627\u0644\u0629\/\u0645\u0635\u0631\u0648\u0641\u0627\u062a\r\n <\/button>\r\n <\/div>\r\n \r\n <div id=\"workmanship-total-container\" style=\"display:none; margin-top: 20px;\">\r\n <div class=\"workmanship-total\">\r\n <i class=\"fas fa-calculator\"><\/i> \u0625\u062c\u0645\u0627\u0644\u064a \u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644 (\u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641): \r\n <span id=\"workmanshipTotal\">0<\/span> \u062c\u0646\u064a\u0647\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- 1\ufe0f\u20e31\ufe0f\u20e3 \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a -->\r\n <div class=\"collapsible-section\" id=\"financial-section\">\r\n <div class=\"section-header\" onclick=\"calculator.toggleSection('financial')\">\r\n <h3><i class=\"fas fa-file-invoice-dollar\"><\/i> 3\ufe0f\u20e3 \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a \u0644\u0644\u0645\u0642\u0627\u0648\u0644<\/h3>\r\n <span class=\"collapse-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\r\n <\/div>\r\n <div class=\"section-content\" id=\"financial-content\">\r\n <section class=\"card\">\r\n <div id=\"financial-dashboard-container\"><\/div>\r\n \r\n <div class=\"area-selection-controls\" style=\"margin-top: 20px;\">\r\n <button class=\"add-large\" style=\"font-size: 16px; padding: 12px;\" onclick=\"calculator.addTransaction()\">\r\n <i class=\"fas fa-plus-circle\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0645\u0644\u0629 \u0645\u0627\u0644\u064a\u0629\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 -->\r\n <button id=\"open-spreadsheet-btn\" class=\"spreadsheet-btn\">\r\n <i class=\"fas fa-table\"><\/i> \u0641\u062a\u062d \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 (\u062a\u062d\u0631\u064a\u0631 \u0645\u0628\u0627\u0634\u0631 \u0645\u062b\u0644 Excel)\r\n <\/button>\r\n\r\n <!-- \u0627\u0644\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0627\u0644\u0645\u062d\u0633\u0646 -->\r\n <section class=\"summary\" id=\"summary\" style=\"display:none;\">\r\n <h3><i class=\"fas fa-chart-bar\"><\/i> \ud83d\udcca \u0627\u0644\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0644\u0644\u062d\u0633\u0627\u0628 \u0645\u0639 \u0627\u0644\u062a\u0643\u0644\u0641\u0629<\/h3>\r\n <div class=\"table-container\">\r\n <table class=\"summary-table-enhanced\">\r\n <thead>\r\n <tr>\r\n <th>\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/th>\r\n <th>\u0627\u0644\u0645\u0635\u0646\u0639<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u062c\/\u0645\u00b2)<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a (\u062c\/\u0645\u00b2)<\/th>\r\n <th>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u0645\u00b2)<\/th>\r\n <th>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a (\u0645\u00b2)<\/th>\r\n <th>\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637<\/th>\r\n <th>\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/th>\r\n <th>\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a<\/th>\r\n <th>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0644\u0644\u0645\u0633\u0627\u062d\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"summaryBody\"><\/tbody>\r\n <tfoot id=\"summaryFoot\"><\/tfoot>\r\n <\/table>\r\n <\/div>\r\n\r\n <div id=\"purchase-order-card\" class=\"card\" style=\"display:none;\">\r\n <h4><i class=\"fas fa-shopping-cart\"><\/i> \ud83d\udccb \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 (\u062a\u0641\u0635\u064a\u0644\u064a)<\/h4>\r\n <ul id=\"purchase-order-list\"><\/ul>\r\n <\/div>\r\n \r\n <button class=\"share-button\" onclick=\"calculator.shareSummary()\">\r\n <i class=\"fab fa-whatsapp\"><\/i> \u0645\u0634\u0627\u0631\u0643\u0629 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u0627\u0644\u0643\u0627\u0645\u0644 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628\r\n <\/button>\r\n\r\n <div class=\"ai-summary\" id=\"aiSummaryContainer\" style=\"display:none;\">\r\n <h4><i class=\"fas fa-lightbulb\"><\/i> \ud83d\udca1 \u0646\u0635\u064a\u062d\u0629 \u0645\u0647\u0646\u062f\u0633 (\u062a\u062d\u0644\u064a\u0644 \u0630\u0643\u064a \u0644\u0644\u0646\u062a\u0627\u0626\u062c)<\/h4>\r\n <p id=\"aiSummaryText\"><\/p>\r\n <\/div>\r\n\r\n <!-- \u0634\u0631\u062d \u0627\u0644\u0623\u0631\u0642\u0627\u0645 - \u062a\u0645 \u062a\u062d\u0633\u064a\u0646\u0647 -->\r\n <div id=\"education-section\" class=\"card\" style=\"display:none;\">\r\n <button class=\"accordion\"><i class=\"fas fa-graduation-cap\"><\/i> \ud83d\udcda \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0647\u0646\u062f\u0633\u064a (\u0643\u064a\u0641 \u0646\u062d\u0633\u0628 \u0627\u0644\u0643\u0645\u064a\u0627\u062a\u061f)<\/button>\r\n <div class=\"panel\">\r\n <div class=\"enhanced-explanation\">\r\n <p><strong>1. \u0643\u064a\u0641 \u064a\u062a\u0645 \u062d\u0633\u0627\u0628 \u0643\u0645\u064a\u0629 \u0628\u0644\u0627\u0637 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\u061f<\/strong><\/p>\r\n <p>\u0646\u0633\u062a\u062e\u062f\u0645 \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0633\u064a\u0637\u0629: \u0623\u0648\u0644\u0627\u064b\u060c \u0646\u062d\u0633\u0628 \"\u0645\u062d\u064a\u0637 \u0627\u0644\u063a\u0631\u0641\u0629\" (\u0645\u062c\u0645\u0648\u0639 \u0623\u0637\u0648\u0627\u0644 \u0627\u0644\u062c\u062f\u0631\u0627\u0646). \u062b\u0645 \u0646\u0636\u0631\u0628 \u0627\u0644\u0645\u062d\u064a\u0637 \u0641\u064a \"\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u062d\u0627\u0626\u0637\" \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u062a\u0628\u0644\u064a\u0637\u0647. \u0623\u062e\u064a\u0631\u0627\u064b\u060c \u0646\u0642\u0648\u0645 \u0628\u062e\u0635\u0645 \u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0623\u0628\u0648\u0627\u0628 \u0648\u0627\u0644\u0646\u0648\u0627\u0641\u0630 \u0627\u0644\u062a\u064a \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0644\u0628\u0644\u0627\u0637.<\/p>\r\n <div class=\"formula\">\r\n \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 = (\u0645\u062d\u064a\u0637 \u0627\u0644\u063a\u0631\u0641\u0629 \u00d7 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639) - \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0641\u062a\u062d\u0627\u062a\r\n <\/div>\r\n \r\n <p><strong>2. \u0643\u064a\u0641 \u064a\u062a\u0645 \u062d\u0633\u0627\u0628 \u0643\u0645\u064a\u0629 \u0628\u0644\u0627\u0637 \u0627\u0644\u0648\u0632\u0631\u061f<\/strong><\/p>\r\n <p>\u0627\u0644\u0648\u0632\u0631 \u0647\u0648 \u0627\u0644\u0634\u0631\u064a\u0637 \u0645\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 \u0623\u0633\u0641\u0644 \u0627\u0644\u062d\u0627\u0626\u0637. \u064a\u062a\u0645 \u062d\u0633\u0627\u0628\u0647 \u0628\u0627\u0644\u0637\u0648\u0644. \u0623\u0648\u0644\u0627\u064b\u060c \u0646\u062d\u0633\u0628 \"\u0645\u062d\u064a\u0637 \u0627\u0644\u063a\u0631\u0641\u0629\"\u060c \u062b\u0645 \u0646\u062e\u0635\u0645 \u0645\u0646\u0647 \u0623\u0637\u0648\u0627\u0644 \u0641\u062a\u062d\u0627\u062a \u0627\u0644\u0623\u0628\u0648\u0627\u0628 (\u0644\u0623\u0646\u0647\u0627 \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0644\u0648\u0632\u0631). \u0646\u0641\u062a\u0631\u0636 \u0623\u0646 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0648\u0632\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0639\u062f\u064a\u0644 \u062d\u0633\u0628 \u0627\u062e\u062a\u064a\u0627\u0631\u0643.<\/p>\r\n <div class=\"formula\">\r\n \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0648\u0632\u0631 = (\u0645\u062d\u064a\u0637 \u0627\u0644\u063a\u0631\u0641\u0629 - \u0639\u0631\u0648\u0636 \u0627\u0644\u0623\u0628\u0648\u0627\u0628) \u00d7 (\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0648\u0632\u0631 \u00f7 100)\r\n <\/div>\r\n \r\n <p><strong>3. \u0643\u064a\u0641 \u064a\u062a\u0645 \u062d\u0633\u0627\u0628 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629\u061f<\/strong><\/p>\r\n <p>\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u062a\u062d\u0633\u0628 \u0628\u0627\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639 \u0623\u0648 \u0627\u0644\u0645\u062a\u0631 \u0627\u0644\u0637\u0648\u0644\u064a \u062d\u0633\u0628 \u0646\u0648\u0639 \u0627\u0644\u0639\u0645\u0644. \u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u0648\u0632\u0631 \u062a\u062d\u0633\u0628 \u0628\u0627\u0644\u0645\u062a\u0631 \u0627\u0644\u0637\u0648\u0644\u064a \u0623\u0648 \u0627\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639. <strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0646\u0638\u0627\u0645 \u064a\u0645\u0643\u0646\u0643 \u062a\u062d\u062f\u064a\u062f \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0644\u0643\u0644 \u0645\u062a\u0631 \u0645\u0631\u0628\u0639 \u0645\u0646 \u0642\u0633\u0645 \"\u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a\".<\/p>\r\n \r\n <p><strong>4. \u0645\u0627 \u0647\u064a \u0646\u0633\u0628\u0629 \u0627\u0644\u0647\u0627\u0644\u0643\u061f<\/strong><\/p>\r\n <p>\u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0642\u0635 \u0648\u0627\u0644\u062a\u0631\u0643\u064a\u0628\u060c \u064a\u062a\u0645 \u0641\u0642\u062f\u0627\u0646 \u062c\u0632\u0621 \u0645\u0646 \u0627\u0644\u0628\u0644\u0627\u0637. \u0646\u0633\u0628\u0629 \u0627\u0644\u0647\u0627\u0644\u0643 (\u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 10%) \u0647\u064a \u0643\u0645\u064a\u0629 \u0625\u0636\u0627\u0641\u064a\u0629 \u0646\u0637\u0644\u0628\u0647\u0627 \u0644\u062a\u0639\u0648\u064a\u0636 \u0647\u0630\u0627 \u0627\u0644\u0641\u0627\u0642\u062f \u0648\u0636\u0645\u0627\u0646 \u0639\u062f\u0645 \u0646\u0642\u0635 \u0627\u0644\u0645\u0648\u0627\u062f \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0639\u0645\u0644.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"explanation-section\" style=\"display:none;\">\r\n <h3 style=\"text-align:center; margin-top: 30px;\">\r\n <i class=\"fas fa-calculator\"><\/i> \u0634\u0631\u062d \u0627\u0644\u0623\u0631\u0642\u0627\u0645: \u0643\u064a\u0641 \u062a\u0645 \u062d\u0633\u0627\u0628 \u0643\u0644 \u0634\u064a\u0621\u061f\r\n <\/h3>\r\n <div id=\"explanation-container\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"final-controls\" id=\"final-controls\" style=\"display:none;\">\r\n <div class=\"save-load-controls\">\r\n <button class=\"share-button\" onclick=\"calculator.exportProject()\">\r\n <i class=\"fas fa-download\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062d\u0627\u0644\u064a\r\n <\/button>\r\n <button class=\"share-button\" onclick=\"calculator.startEmptyProject()\">\r\n <i class=\"fas fa-file\"><\/i> \u0628\u062f\u0621 \u0645\u0634\u0631\u0648\u0639 \u062c\u062f\u064a\u062f\r\n <\/button>\r\n <\/div>\r\n <button class=\"share-button\" onclick=\"calculator.shareSummary()\">\r\n <i class=\"fab fa-whatsapp\"><\/i> \u0645\u0634\u0627\u0631\u0643\u0629 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628\r\n <\/button>\r\n <button class=\"share-button delete-all-btn\" onclick=\"calculator.deleteAllData()\">\r\n <i class=\"fas fa-trash\"><\/i> \u062d\u0630\u0641 \u0643\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0635\u0629 \u0648\u0627\u0644\u0628\u062f\u0621 \u0645\u0646 \u062c\u062f\u064a\u062f\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n<\/main>\r\n\r\n<!-- \u0646\u0627\u0641\u0630\u0629 \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u0627\u062d\u0629 \u0630\u0643\u064a\u0629 -->\r\n<div id=\"smart-area-modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <span class=\"close-modal\">×<\/span>\r\n <h3><i class=\"fas fa-layer-group\"><\/i> \u0645\u0627 \u0646\u0648\u0639 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u064a\u062f \u0625\u0636\u0627\u0641\u062a\u0647\u0627\u061f<\/h3>\r\n <div class=\"modal-options\">\r\n <div class=\"modal-option\" data-type=\"bathroom\">\ud83d\udec1 \u062d\u0645\u0627\u0645<\/div>\r\n <div class=\"modal-option\" data-type=\"kitchen\">\ud83c\udf73 \u0645\u0637\u0628\u062e<\/div>\r\n <div class=\"modal-option\" data-type=\"room\">\ud83d\udecb\ufe0f \u063a\u0631\u0641\u0629<\/div>\r\n <div class=\"modal-option\" data-type=\"hallway\">\ud83d\udeb6\u200d\u2642\ufe0f \u0637\u0631\u0642\u0629<\/div>\r\n <div class=\"modal-option\" data-type=\"living\">\ud83d\udecb\ufe0f \u0645\u0639\u064a\u0634\u0629<\/div>\r\n <div class=\"modal-option\" data-type=\"custom\">\ud83c\udfde\ufe0f \u0645\u0633\u0627\u062d\u0629 \u0645\u062e\u0635\u0635\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ========== \u0646\u0627\u0641\u0630\u0629 \u0625\u0636\u0627\u0641\u0629 \u0628\u0644\u0627\u0637 \u062c\u062f\u064a\u062f\u0629 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629 ========== -->\r\n<div id=\"tile-selection-modal\" class=\"modal tile-selection-modal\">\r\n <div class=\"modal-content\">\r\n <span class=\"close-modal\">×<\/span>\r\n <h3><i class=\"fas fa-tile\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0628\u0644\u0627\u0637 \u062c\u062f\u064a\u062f \u0644\u0644\u0645\u0639\u0631\u0636<\/h3>\r\n \r\n <div class=\"tile-selection-form tile-form-simplified\">\r\n <!-- 1\ufe0f\u20e3 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 -->\r\n <div class=\"form-group\">\r\n <label><i class=\"fas fa-map-marker-alt\"><\/i> \u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/label>\r\n <select id=\"tile-area-select\" class=\"validate-input\" onchange=\"calculator.updateAreaInfo()\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 --<\/option>\r\n <!-- \u0633\u064a\u062a\u0645 \u0645\u0644\u0624\u0647\u0627 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b -->\r\n <\/select>\r\n <\/div>\r\n \r\n <!-- \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 -->\r\n <div class=\"area-info-box\" id=\"area-info-box\" style=\"display:none;\">\r\n <h4 id=\"selected-area-name\">\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/h4>\r\n <p>\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629: <span id=\"selected-area-size\">0<\/span> \u0645\u00b2<\/p>\r\n <p>\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629: <span id=\"current-tile-count\">0<\/span> \u062e\u064a\u0627\u0631<\/p>\r\n <\/div>\r\n \r\n <!-- 2\ufe0f\u20e3 \u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639 (\u0627\u0644\u062d\u0642\u0644 \u0627\u0644\u0623\u0647\u0645) -->\r\n <div class=\"form-group \">\r\n <label><i class=\"fas fa-industry\"><\/i> \u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639 (\u0623\u0647\u0645 \u062d\u0642\u0644)<\/label>\r\n <input type=\"text\" id=\"tile-manufacturer\" placeholder=\"\u0645\u062b\u0627\u0644: \u0643\u0644\u064a\u0648\u0628\u0627\u062a\u0631\u0627\u060c \u0627\u0644\u0633\u0631\u0627\u0645\u064a\u0643\u060c \u0627\u0644\u062c\u0648\u0647\u0631\u0629\" \r\n class=\"validate-input\" >\r\n <small style=\"color: var(--danger); font-size: 12px;\">\u0647\u0630\u0627 \u0627\u0644\u062d\u0642\u0644 \u0625\u062c\u0628\u0627\u0631\u064a<\/small>\r\n <\/div>\r\n \r\n <!-- 3\ufe0f\u20e3 \u0627\u062e\u062a\u064a\u0627\u0631 \u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637 \u062d\u0633\u0628 \u0627\u0644\u0645\u0643\u0627\u0646 -->\r\n <h4 style=\"margin: 15px 0 10px 0; color: var(--primary); border-bottom: 2px solid #eee; padding-bottom: 5px;\">\r\n <i class=\"fas fa-th-large\"><\/i> \u0627\u062e\u062a\u064a\u0627\u0631 \u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637 \u062d\u0633\u0628 \u0627\u0644\u0645\u0643\u0627\u0646\r\n <\/h4>\r\n \r\n <div class=\"tile-options-grid\">\r\n <!-- \u062e\u064a\u0627\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631 -->\r\n <div class=\"tile-option-card wall-option\">\r\n <h5 style=\"color: var(--primary); margin-bottom: 10px;\">\r\n <i class=\"fas fa-wall\"><\/i> \u0628\u0644\u0627\u0637 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631\r\n <\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637<\/label>\r\n <select id=\"wall-tile-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 --<\/option>\r\n <option value=\"ceramic_small\">\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631<\/option>\r\n <option value=\"ceramic_large\">\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631<\/option>\r\n <option value=\"porcelain\">\u0628\u0648\u0631\u0633\u0644\u064a\u0646<\/option>\r\n <option value=\"marble\">\u0631\u062e\u0627\u0645<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631 (\u062c)<\/label>\r\n <input type=\"number\" id=\"wall-tile-price\" value=\"0\" \r\n onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/label>\r\n <select id=\"wall-tile-location\" class=\"validate-input\">\r\n <option value=\"walls\">\u062d\u0648\u0627\u0626\u0637 \u0641\u0642\u0637<\/option>\r\n <option value=\"skirting\">\u0648\u0632\u0631 \u0641\u0642\u0637<\/option>\r\n <option value=\"both\">\u062d\u0648\u0627\u0626\u0637 \u0648\u0648\u0632\u0631<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u062e\u064a\u0627\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a -->\r\n <div class=\"tile-option-card floor-option\">\r\n <h5 style=\"color: var(--success); margin-bottom: 10px;\">\r\n <i class=\"fas fa-th\"><\/i> \u0628\u0644\u0627\u0637 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a\r\n <\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637<\/label>\r\n <select id=\"floor-tile-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 --<\/option>\r\n <option value=\"ceramic_small\">\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631<\/option>\r\n <option value=\"ceramic_large\">\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631<\/option>\r\n <option value=\"porcelain\">\u0628\u0648\u0631\u0633\u0644\u064a\u0646<\/option>\r\n <option value=\"marble\">\u0631\u062e\u0627\u0645<\/option>\r\n <option value=\"granite\">\u062c\u0631\u0627\u0646\u064a\u062a<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631 (\u062c)<\/label>\r\n <input type=\"number\" id=\"floor-tile-price\" value=\"0\" \r\n onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/label>\r\n <select id=\"floor-tile-location\" class=\"validate-input\">\r\n <option value=\"floor\">\u0623\u0631\u0636\u064a\u0627\u062a<\/option>\r\n <option value=\"floor_with_border\">\u0623\u0631\u0636\u064a\u0627\u062a \u0645\u0639 \u0625\u0637\u0627\u0631<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- 4\ufe0f\u20e3 \u0627\u0644\u0627\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 -->\r\n <div class=\"accessories-section\">\r\n <h5 style=\"color: var(--warning); margin-bottom: 10px;\">\r\n <i class=\"fas fa-plus-circle\"><\/i> \u0627\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\r\n <\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631<\/label>\r\n <select id=\"accessory-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631 --<\/option>\r\n <option value=\"corner\">\u0632\u0648\u0627\u064a\u0627<\/option>\r\n <option value=\"border\">\u0625\u0637\u0627\u0631\u0627\u062a<\/option>\r\n <option value=\"pattern\">\u0632\u062e\u0627\u0631\u0641<\/option>\r\n <option value=\"other\">\u0623\u062e\u0631\u0649<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"inline\">\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062e\u0635\u0635\u0629 (\u0645\u00b2)<\/label>\r\n <input type=\"number\" id=\"accessory-area\" value=\"0\" \r\n onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"\r\n placeholder=\"\u0633\u064a\u062a\u0645 \u062e\u0635\u0645\u0647\u0627 \u0645\u0646 \u0627\u0644\u062a\u0643\u0639\u064a\u0628\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0648\u062d\u062f\u0629 (\u062c)<\/label>\r\n <input type=\"number\" id=\"accessory-price\" value=\"0\" \r\n onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0644\u0649 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631<\/label>\r\n <input type=\"text\" id=\"accessory-notes\" placeholder=\"\u0648\u0635\u0641 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631...\"\r\n class=\"validate-input optional-field\">\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- 5\ufe0f\u20e3 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 -->\r\n <div class=\"form-group\">\r\n <label><i class=\"fas fa-sticky-note\"><\/i> \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\r\n <textarea id=\"tile-notes\" class=\"notes-field\" rows=\"3\" \r\n placeholder=\"\u0623\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0644\u0627\u0637 \u0623\u0648 \u0627\u0644\u062a\u062b\u0628\u064a\u062a...\"><\/textarea>\r\n <\/div>\r\n \r\n <!-- 6\ufe0f\u20e3 \u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u062a\u0631\u0643\u064a\u0628 -->\r\n <h4 style=\"margin: 15px 0 10px 0; color: var(--primary); border-bottom: 2px solid #eee; padding-bottom: 5px;\">\r\n <i class=\"fas fa-tools\"><\/i> \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628\r\n <\/h4>\r\n \r\n <div class=\"installation-options\">\r\n <div class=\"installation-option\" data-method=\"default\" onclick=\"calculator.selectInstallMethod('default')\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <div>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a<\/div>\r\n <\/div>\r\n <div class=\"installation-option\" data-method=\"none\" onclick=\"calculator.selectInstallMethod('none')\">\r\n <i class=\"fas fa-ban\"><\/i>\r\n <div>\u0644\u0627 \u0623\u0631\u064a\u062f \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u0631\u0643\u064a\u0628<\/div>\r\n <\/div>\r\n <div class=\"installation-option\" data-method=\"mortar\" onclick=\"calculator.selectInstallMethod('mortar')\">\r\n <i class=\"fas fa-bucket\"><\/i>\r\n <div>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0648\u0646\u0629 \u0627\u0644\u0623\u0633\u0645\u0646\u062a\u064a\u0629<\/div>\r\n <\/div>\r\n <div class=\"installation-option\" data-method=\"glue\" onclick=\"calculator.selectInstallMethod('glue')\">\r\n <i class=\"fas fa-glue\"><\/i>\r\n <div>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <input type=\"hidden\" id=\"tile-install-method\" value=\"default\">\r\n \r\n <!-- \u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 -->\r\n <div class=\"tile-preview\" id=\"tile-preview\" style=\"display:none;\">\r\n <h5><i class=\"fas fa-eye\"><\/i> \u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u062a\u0643\u0644\u0641\u0629:<\/h5>\r\n <div style=\"display:flex; justify-content:space-between; align-items:center; background: #f8f9fa; padding: 15px; border-radius: 8px;\">\r\n <div>\r\n <p style=\"margin:5px 0;\"><strong>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637:<\/strong> <span id=\"preview-wall-area\">0<\/span> \u0645\u00b2<\/p>\r\n <p style=\"margin:5px 0;\"><strong>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/strong> <span id=\"preview-floor-area\">0<\/span> \u0645\u00b2<\/p>\r\n <p style=\"margin:5px 0;\"><strong>\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a:<\/strong> <span id=\"preview-accessory-area\">0<\/span> \u0645\u00b2<\/p>\r\n <\/div>\r\n <div style=\"text-align:center;\">\r\n <p style=\"margin:5px 0; font-size:12px; color:#666;\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a\u0629<\/p>\r\n <p style=\"margin:5px 0; font-size:24px; font-weight:bold; color:var(--primary);\" id=\"preview-cost\">0 \u062c<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 -->\r\n <div class=\"inline\" style=\"margin-top:20px; justify-content:center; gap: 10px;\">\r\n <button class=\"add-large\" onclick=\"calculator.addTileToShowroom(true)\" style=\"width:auto; padding:12px 30px;\">\r\n <i class=\"fas fa-check-circle\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0648\u062a\u0623\u0643\u064a\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630\r\n <\/button>\r\n <button class=\"add\" onclick=\"calculator.addTileToShowroom(false)\" style=\"width:auto; padding:12px 30px; background-color: var(--secondary);\">\r\n <i class=\"fas fa-plus\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0643\u062e\u064a\u0627\u0631 \u0645\u0642\u0627\u0631\u0646\u0629\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u0646\u0627\u0641\u0630\u0629 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0628\u0644\u0627\u0637 -->\r\n<div id=\"edit-tile-modal\" class=\"modal tile-selection-modal\">\r\n <div class=\"modal-content\">\r\n <span class=\"close-modal\">×<\/span>\r\n <h3><i class=\"fas fa-edit\"><\/i> \u062a\u0639\u062f\u064a\u0644 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0637<\/h3>\r\n \r\n <div class=\"tile-selection-form tile-form-simplified\" id=\"edit-tile-form\">\r\n <!-- \u0633\u064a\u062a\u0645 \u0645\u0644\u0624\u0647\u0627 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b -->\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 -->\r\n<div id=\"spreadsheet-overlay\">\r\n <div class=\"spreadsheet-container\">\r\n <!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062c\u062f\u0648\u0644 \u0633\u064a\u062a\u0645 \u0625\u0646\u0634\u0627\u0624\u0647 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b -->\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ====================\r\n\/\/ \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629 v18.2\r\n\/\/ ====================\r\n\r\nclass MultiProjectCeramicCalculator {\r\n constructor() {\r\n this.STORAGE_KEY = 'multiProjectCeramicCalculator_v18.2';\r\n this.projects = [];\r\n this.activeProjectId = null;\r\n this.areaCounter = 0;\r\n this.workmanshipItemCounter = 0;\r\n this.transactionCounter = 0;\r\n this.tileCounter = 0;\r\n this.calculationTotals = {};\r\n this.selectedTiles = [];\r\n this.confirmedTiles = [];\r\n \r\n this.initDOM();\r\n this.attachEventListeners();\r\n this.loadInitialState();\r\n this.initSpreadsheetSystem();\r\n this.initCollapsibleSections();\r\n }\r\n\r\n initDOM() {\r\n this.tabsContainer = document.getElementById('project-tabs-container');\r\n this.areasContainer = document.getElementById(\"areas-container\");\r\n this.summaryDiv = document.getElementById(\"summary\");\r\n this.summaryBody = document.getElementById(\"summaryBody\");\r\n this.summaryFoot = document.getElementById(\"summaryFoot\");\r\n this.purchaseOrderCard = document.getElementById(\"purchase-order-card\");\r\n this.purchaseOrderList = document.getElementById(\"purchase-order-list\");\r\n this.aiSummaryContainer = document.getElementById(\"aiSummaryContainer\");\r\n this.aiSummaryText = document.getElementById(\"aiSummaryText\");\r\n this.educationSection = document.getElementById(\"education-section\");\r\n this.contractorInfo = {\r\n name: document.getElementById('contractorName'),\r\n phone: document.getElementById('contractorPhone'),\r\n callLink: document.getElementById('callLink')\r\n };\r\n this.priceInputs = {\r\n waste: document.getElementById('wastePercentage'),\r\n addOns: document.getElementById('addOnsPercentage'),\r\n };\r\n this.settings = {\r\n skirtingHeight: document.getElementById('skirtingHeight'),\r\n mortarThickness: document.getElementById('mortarThickness')\r\n };\r\n this.materialControls = {\r\n enableGlue: document.getElementById('enableGlue'),\r\n enableGrout: document.getElementById('enableGrout'),\r\n gluePrice: document.getElementById('gluePrice'),\r\n groutPrice: document.getElementById('groutPrice'),\r\n defaultMethod: document.getElementById('defaultInstallMethod')\r\n };\r\n this.workmanshipItemsContainer = document.getElementById('workmanship-items-container');\r\n this.workmanshipTotalContainer = document.getElementById('workmanship-total-container');\r\n this.workmanshipTotalSpan = document.getElementById('workmanshipTotal');\r\n this.financialDashboardContainer = document.getElementById('financial-dashboard-container');\r\n this.explanationSection = document.getElementById(\"explanation-section\");\r\n this.explanationContainer = document.getElementById(\"explanation-container\");\r\n this.finalControls = document.getElementById('final-controls');\r\n this.projectNotes = document.getElementById('project-notes');\r\n \r\n this.tileShowroomContainer = document.getElementById('tile-showroom-container');\r\n this.tileSummarySection = document.getElementById('tile-summary-section');\r\n this.tileSummaryBody = document.getElementById('tile-summary-body');\r\n this.tileSummaryTotal = document.getElementById('tile-summary-total');\r\n this.selectedTilesCount = document.getElementById('selected-tiles-count');\r\n this.selectedTilesTotal = document.getElementById('selected-tiles-total');\r\n this.confirmedTilesCount = document.getElementById('confirmed-tiles-count');\r\n \r\n this.tileSelectionModal = document.getElementById('tile-selection-modal');\r\n this.tileAreaSelect = document.getElementById('tile-area-select');\r\n this.areaInfoBox = document.getElementById('area-info-box');\r\n this.selectedAreaName = document.getElementById('selected-area-name');\r\n this.selectedAreaSize = document.getElementById('selected-area-size');\r\n this.currentTileCount = document.getElementById('current-tile-count');\r\n this.tileManufacturerInput = document.getElementById('tile-manufacturer');\r\n \r\n \/\/ \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629\r\n this.wallTileType = document.getElementById('wall-tile-type');\r\n this.wallTilePrice = document.getElementById('wall-tile-price');\r\n this.wallTileLocation = document.getElementById('wall-tile-location');\r\n this.floorTileType = document.getElementById('floor-tile-type');\r\n this.floorTilePrice = document.getElementById('floor-tile-price');\r\n this.floorTileLocation = document.getElementById('floor-tile-location');\r\n this.accessoryType = document.getElementById('accessory-type');\r\n this.accessoryArea = document.getElementById('accessory-area');\r\n this.accessoryPrice = document.getElementById('accessory-price');\r\n this.accessoryNotes = document.getElementById('accessory-notes');\r\n this.tileNotesInput = document.getElementById('tile-notes');\r\n this.tileInstallMethod = document.getElementById('tile-install-method');\r\n this.tilePreview = document.getElementById('tile-preview');\r\n this.previewWallArea = document.getElementById('preview-wall-area');\r\n this.previewFloorArea = document.getElementById('preview-floor-area');\r\n this.previewAccessoryArea = document.getElementById('preview-accessory-area');\r\n this.previewCost = document.getElementById('preview-cost');\r\n \r\n \/\/ \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629\r\n this.wallWorkmanshipPrice = document.getElementById('wall-workmanship-price');\r\n this.floorWorkmanshipPrice = document.getElementById('floor-workmanship-price');\r\n this.skirtingWorkmanshipPrice = document.getElementById('skirting-workmanship-price');\r\n \r\n this.editTileModal = document.getElementById('edit-tile-modal');\r\n this.editTileForm = document.getElementById('edit-tile-form');\r\n \r\n this.smartAreaModal = document.getElementById('smart-area-modal');\r\n this.closeModalBtns = document.querySelectorAll('.close-modal');\r\n \r\n this.tileOrderContainer = document.getElementById('tile-order-container');\r\n }\r\n\r\n initCollapsibleSections() {\r\n const sections = ['areas', 'order', 'tiles', 'settings', 'workmanship', 'financial', 'guide'];\r\n sections.forEach(section => {\r\n const content = document.getElementById(`${section}-content`);\r\n if (content) {\r\n content.classList.add('collapsed');\r\n const header = document.querySelector(`#${section}-section .section-header`);\r\n if (header) {\r\n header.classList.add('collapsed');\r\n }\r\n }\r\n });\r\n \r\n this.toggleSection('guide', true);\r\n this.toggleSection('areas', true);\r\n }\r\n\r\n toggleSection(sectionId, forceOpen = false) {\r\n const content = document.getElementById(`${sectionId}-content`);\r\n const header = document.querySelector(`#${sectionId}-section .section-header`);\r\n \r\n if (!content || !header) return;\r\n \r\n if (forceOpen) {\r\n content.classList.remove('collapsed');\r\n header.classList.remove('collapsed');\r\n } else {\r\n content.classList.toggle('collapsed');\r\n header.classList.toggle('collapsed');\r\n }\r\n }\r\n\r\n expandAllSections() {\r\n const sections = ['areas', 'order', 'tiles', 'settings', 'workmanship', 'financial', 'guide'];\r\n sections.forEach(section => {\r\n this.toggleSection(section, true);\r\n });\r\n }\r\n\r\n collapseAllSections() {\r\n const sections = ['areas', 'order', 'tiles', 'settings', 'workmanship', 'financial', 'guide'];\r\n sections.forEach(section => {\r\n const content = document.getElementById(`${section}-content`);\r\n const header = document.querySelector(`#${section}-section .section-header`);\r\n \r\n if (content && header) {\r\n content.classList.add('collapsed');\r\n header.classList.add('collapsed');\r\n }\r\n });\r\n }\r\n\r\n \/\/ ====================\r\n \/\/ \u0645\u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u0636\u0644\u0629 \u0628\u064a\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0645\u062d\u0633\u0646\u0629\r\n \/\/ ====================\r\n\r\n openTileSelectionModal() {\r\n this.populateAreaSelect();\r\n this.tileSelectionModal.style.display = 'block';\r\n this.updateAreaInfo();\r\n }\r\n\r\n populateAreaSelect() {\r\n this.tileAreaSelect.innerHTML = '<option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 --<\/option>';\r\n \r\n const areaGroups = this.areasContainer.querySelectorAll('.area-group');\r\n if (areaGroups.length === 0) {\r\n this.tileAreaSelect.innerHTML += '<option value=\"\" disabled>\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0633\u0627\u062d\u0627\u062a \u0645\u0636\u0627\u0641\u0629. \u0623\u0636\u0641 \u0645\u0633\u0627\u062d\u0627\u062a \u0623\u0648\u0644\u0627\u064b \u0645\u0646 \u0642\u0633\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a<\/option>';\r\n return;\r\n }\r\n \r\n areaGroups.forEach((group, index) => {\r\n const name = group.querySelector('.area-name').value || `\u0645\u0633\u0627\u062d\u0629 ${index + 1}`;\r\n const type = group.dataset.type;\r\n const areaId = group.id;\r\n \r\n const typeNames = {\r\n 'bathroom': '\ud83d\udec1 \u062d\u0645\u0627\u0645',\r\n 'kitchen': '\ud83c\udf73 \u0645\u0637\u0628\u062e',\r\n 'room': '\ud83d\udecb\ufe0f \u063a\u0631\u0641\u0629',\r\n 'hallway': '\ud83d\udeb6\u200d\u2642\ufe0f \u0637\u0631\u0642\u0629',\r\n 'living': '\ud83d\udecb\ufe0f \u0645\u0639\u064a\u0634\u0629',\r\n 'custom': '\ud83c\udfde\ufe0f \u0645\u062e\u0635\u0635'\r\n };\r\n \r\n const areaTypeName = typeNames[type] || type;\r\n \r\n const existingTiles = this.selectedTiles.filter(tile => tile.areaId === areaId);\r\n const confirmedTiles = existingTiles.filter(tile => tile.confirmed);\r\n \r\n let tileStatus = '';\r\n if (existingTiles.length > 0) {\r\n tileStatus = ` (${existingTiles.length} \u062e\u064a\u0627\u0631${existingTiles.length > 1 ? '\u0627\u062a' : ''}\u060c ${confirmedTiles.length} \u0645\u0624\u0643\u062f)`;\r\n }\r\n \r\n const option = document.createElement('option');\r\n option.value = areaId;\r\n option.textContent = `${name} - ${areaTypeName}${tileStatus}`;\r\n option.dataset.name = name;\r\n \r\n this.tileAreaSelect.appendChild(option);\r\n });\r\n }\r\n\r\n selectInstallMethod(method) {\r\n document.querySelectorAll('.installation-option').forEach(opt => {\r\n opt.classList.remove('selected');\r\n });\r\n \r\n const selectedOpt = document.querySelector(`.installation-option[data-method=\"${method}\"]`);\r\n if (selectedOpt) {\r\n selectedOpt.classList.add('selected');\r\n }\r\n \r\n document.getElementById('tile-install-method').value = method;\r\n }\r\n\r\n updateAreaInfo() {\r\n const selectedOption = this.tileAreaSelect.options[this.tileAreaSelect.selectedIndex];\r\n \r\n if (selectedOption && selectedOption.value) {\r\n const areaGroup = document.getElementById(selectedOption.value);\r\n if (areaGroup) {\r\n const areaSize = this.calculateAreaSize(areaGroup);\r\n const areaName = selectedOption.dataset.name;\r\n const areaId = selectedOption.value;\r\n \r\n const existingTiles = this.selectedTiles.filter(tile => tile.areaId === areaId);\r\n \r\n this.selectedAreaName.textContent = areaName;\r\n this.selectedAreaSize.textContent = areaSize.toFixed(2);\r\n this.currentTileCount.textContent = existingTiles.length;\r\n \r\n this.areaInfoBox.style.display = 'block';\r\n this.updateTilePreview();\r\n }\r\n } else {\r\n this.areaInfoBox.style.display = 'none';\r\n this.tilePreview.style.display = 'none';\r\n }\r\n }\r\n\r\n calculateAreaSize(areaGroup) {\r\n const type = areaGroup.dataset.type;\r\n const dim1 = parseFloat(areaGroup.querySelector('.area-dim1').value) || 0;\r\n const dim2 = parseFloat(areaGroup.querySelector('.area-dim2').value) || 0;\r\n \r\n if (type === 'bathroom' || type === 'kitchen') {\r\n const dim3 = parseFloat(areaGroup.querySelector('.area-dim3')?.value) || 0;\r\n const perimeter = (dim1 + dim2) * 2;\r\n const wallArea = perimeter * dim3;\r\n const floorArea = dim1 * dim2;\r\n return wallArea + floorArea;\r\n } else {\r\n return dim1 * dim2;\r\n }\r\n }\r\n\r\n calculateWallAndFloorArea(areaGroup) {\r\n const type = areaGroup.dataset.type;\r\n const dim1 = parseFloat(areaGroup.querySelector('.area-dim1').value) || 0;\r\n const dim2 = parseFloat(areaGroup.querySelector('.area-dim2').value) || 0;\r\n const dim3 = parseFloat(areaGroup.querySelector('.area-dim3')?.value) || 0;\r\n \r\n let wallArea = 0;\r\n let floorArea = 0;\r\n \r\n if (type === 'bathroom' || type === 'kitchen') {\r\n const perimeter = (dim1 + dim2) * 2;\r\n wallArea = perimeter * dim3;\r\n floorArea = dim1 * dim2;\r\n } else {\r\n floorArea = dim1 * dim2;\r\n }\r\n \r\n return { wallArea, floorArea };\r\n }\r\n\r\n updateTilePreview() {\r\n const selectedOption = this.tileAreaSelect.options[this.tileAreaSelect.selectedIndex];\r\n if (!selectedOption || !selectedOption.value) return;\r\n \r\n const areaGroup = document.getElementById(selectedOption.value);\r\n if (!areaGroup) return;\r\n \r\n const { wallArea, floorArea } = this.calculateWallAndFloorArea(areaGroup);\r\n const wallTilePrice = parseFloat(this.wallTilePrice.value) || 0;\r\n const floorTilePrice = parseFloat(this.floorTilePrice.value) || 0;\r\n const accessoryArea = parseFloat(this.accessoryArea.value) || 0;\r\n const accessoryPrice = parseFloat(this.accessoryPrice.value) || 0;\r\n \r\n const wastePercentage = parseFloat(this.priceInputs.waste.value) || 10;\r\n const wasteFactor = 1 + (wastePercentage \/ 100);\r\n \r\n const wallTilesWithWaste = wallArea * wasteFactor;\r\n const floorTilesWithWaste = floorArea * wasteFactor;\r\n \r\n const wallCost = wallTilesWithWaste * wallTilePrice;\r\n const floorCost = floorTilesWithWaste * floorTilePrice;\r\n const accessoryCost = accessoryArea * accessoryPrice;\r\n \r\n const totalCost = wallCost + floorCost + accessoryCost;\r\n \r\n this.previewWallArea.textContent = wallArea.toFixed(2);\r\n this.previewFloorArea.textContent = floorArea.toFixed(2);\r\n this.previewAccessoryArea.textContent = accessoryArea.toFixed(2);\r\n this.previewCost.textContent = totalCost.toFixed(2) + ' \u062c';\r\n \r\n this.tilePreview.style.display = 'block';\r\n }\r\n\r\n addTileToShowroom(confirmed = false) {\r\n const areaId = this.tileAreaSelect.value;\r\n if (!areaId) {\r\n alert('\u26a0\ufe0f \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0633\u0627\u062d\u0629 \u0623\u0648\u0644\u0627\u064b');\r\n return;\r\n }\r\n \r\n const manufacturer = this.tileManufacturerInput.value;\r\n if (!manufacturer || manufacturer.trim() === '') {\r\n alert('\u26a0\ufe0f \u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639 (\u0647\u0630\u0627 \u0627\u0644\u062d\u0642\u0644 \u0645\u0647\u0645)');\r\n return;\r\n }\r\n \r\n const wallTilePrice = parseFloat(this.wallTilePrice.value) || 0;\r\n const floorTilePrice = parseFloat(this.floorTilePrice.value) || 0;\r\n \r\n if (wallTilePrice <= 0 && floorTilePrice <= 0) {\r\n alert('\u26a0\ufe0f \u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0633\u0639\u0631 \u0635\u062d\u064a\u062d \u0644\u0644\u062d\u0648\u0627\u0626\u0637 \u0623\u0648 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a');\r\n return;\r\n }\r\n \r\n const areaGroup = document.getElementById(areaId);\r\n if (!areaGroup) return;\r\n \r\n const areaName = areaGroup.querySelector('.area-name').value || '\u0645\u0633\u0627\u062d\u0629 \u063a\u064a\u0631 \u0645\u0633\u0645\u0627\u0629';\r\n const areaType = areaGroup.dataset.type;\r\n \r\n \/\/ \u062c\u0645\u0639 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062d\u0648\u0627\u0626\u0637\r\n const wallTileType = this.wallTileType.value;\r\n const wallTileLocation = this.wallTileLocation.value;\r\n \r\n \/\/ \u062c\u0645\u0639 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a\r\n const floorTileType = this.floorTileType.value;\r\n const floorTileLocation = this.floorTileLocation.value;\r\n \r\n \/\/ \u062c\u0645\u0639 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a\r\n const accessoryType = this.accessoryType.value;\r\n const accessoryArea = parseFloat(this.accessoryArea.value) || 0;\r\n const accessoryPrice = parseFloat(this.accessoryPrice.value) || 0;\r\n const accessoryNotes = this.accessoryNotes.value || '';\r\n \r\n const tileNotes = this.tileNotesInput.value || '';\r\n const installMethod = this.tileInstallMethod.value;\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a\r\n const { wallArea, floorArea } = this.calculateWallAndFloorArea(areaGroup);\r\n \r\n const wastePercentage = parseFloat(this.priceInputs.waste.value) || 10;\r\n const wasteFactor = 1 + (wastePercentage \/ 100);\r\n \r\n const wallTilesWithWaste = wallArea * wasteFactor;\r\n const floorTilesWithWaste = floorArea * wasteFactor;\r\n \r\n const wallCost = wallTilesWithWaste * wallTilePrice;\r\n const floorCost = floorTilesWithWaste * floorTilePrice;\r\n const accessoryCost = accessoryArea * accessoryPrice;\r\n \r\n const totalCost = wallCost + floorCost + accessoryCost;\r\n \r\n const tileId = `tile-${Date.now()}`;\r\n \r\n const tileData = {\r\n id: tileId,\r\n areaId: areaId,\r\n areaName: areaName,\r\n areaType: areaType,\r\n manufacturer: manufacturer,\r\n wallTileType: wallTileType,\r\n wallTilePrice: wallTilePrice,\r\n wallTileLocation: wallTileLocation,\r\n wallArea: wallArea,\r\n wallTilesWithWaste: wallTilesWithWaste,\r\n wallCost: wallCost,\r\n floorTileType: floorTileType,\r\n floorTilePrice: floorTilePrice,\r\n floorTileLocation: floorTileLocation,\r\n floorArea: floorArea,\r\n floorTilesWithWaste: floorTilesWithWaste,\r\n floorCost: floorCost,\r\n accessoryType: accessoryType,\r\n accessoryArea: accessoryArea,\r\n accessoryPrice: accessoryPrice,\r\n accessoryCost: accessoryCost,\r\n accessoryNotes: accessoryNotes,\r\n totalCost: totalCost,\r\n notes: tileNotes,\r\n installMethod: installMethod,\r\n confirmed: confirmed,\r\n dateAdded: new Date().toISOString()\r\n };\r\n \r\n this.selectedTiles.push(tileData);\r\n \r\n if (confirmed) {\r\n this.confirmedTiles.push(tileData);\r\n \r\n const otherTiles = this.selectedTiles.filter(tile => \r\n tile.areaId === areaId && tile.id !== tileId && tile.confirmed);\r\n \r\n otherTiles.forEach(tile => {\r\n tile.confirmed = false;\r\n const confirmedIndex = this.confirmedTiles.findIndex(t => t.id === tile.id);\r\n if (confirmedIndex > -1) {\r\n this.confirmedTiles.splice(confirmedIndex, 1);\r\n }\r\n });\r\n }\r\n \r\n this.updateTileShowroom();\r\n this.updateAreaTileTypes(areaId, tileData);\r\n this.updateTileOrder();\r\n \r\n this.tileSelectionModal.style.display = 'none';\r\n this.resetTileForm();\r\n \r\n const status = confirmed ? '\u0645\u0624\u0643\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630' : '\u0645\u0636\u0627\u0641\u0629 \u0644\u0644\u0645\u0642\u0627\u0631\u0646\u0629';\r\n alert(`\u2705 \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0628\u0646\u062c\u0627\u062d \u0644\u0644\u0645\u0633\u0627\u062d\u0629 \"${areaName}\" (${status})`);\r\n }\r\n\r\n updateAreaTileTypes(areaId, tileData) {\r\n const areaGroup = document.getElementById(areaId);\r\n if (!areaGroup) return;\r\n \r\n const wallTypeInput = areaGroup.querySelector('.wall-tile-type');\r\n const floorTypeInput = areaGroup.querySelector('.floor-tile-type');\r\n \r\n if (tileData.wallTilePrice > 0 && wallTypeInput) {\r\n const typeNames = {\r\n 'ceramic_small': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631',\r\n 'ceramic_large': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631',\r\n 'porcelain': '\u0628\u0648\u0631\u0633\u0644\u064a\u0646',\r\n 'marble': '\u0631\u062e\u0627\u0645'\r\n };\r\n \r\n const wallTypeName = typeNames[tileData.wallTileType] || tileData.wallTileType;\r\n wallTypeInput.value = `${wallTypeName} - ${tileData.manufacturer}`;\r\n }\r\n \r\n if (tileData.floorTilePrice > 0 && floorTypeInput) {\r\n const typeNames = {\r\n 'ceramic_small': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631',\r\n 'ceramic_large': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631',\r\n 'porcelain': '\u0628\u0648\u0631\u0633\u0644\u064a\u0646',\r\n 'marble': '\u0631\u062e\u0627\u0645',\r\n 'granite': '\u062c\u0631\u0627\u0646\u064a\u062a'\r\n };\r\n \r\n const floorTypeName = typeNames[tileData.floorTileType] || tileData.floorTileType;\r\n floorTypeInput.value = `${floorTypeName} - ${tileData.manufacturer}`;\r\n }\r\n }\r\n\r\n resetTileForm() {\r\n this.tileManufacturerInput.value = '';\r\n this.wallTileType.value = '';\r\n this.wallTilePrice.value = '0';\r\n this.wallTileLocation.value = 'walls';\r\n this.floorTileType.value = '';\r\n this.floorTilePrice.value = '0';\r\n this.floorTileLocation.value = 'floor';\r\n this.accessoryType.value = '';\r\n this.accessoryArea.value = '0';\r\n this.accessoryPrice.value = '0';\r\n this.accessoryNotes.value = '';\r\n this.tileNotesInput.value = '';\r\n this.tileInstallMethod.value = 'default';\r\n \r\n document.querySelectorAll('.installation-option').forEach(opt => {\r\n opt.classList.remove('selected');\r\n });\r\n document.querySelector('.installation-option[data-method=\"default\"]').classList.add('selected');\r\n \r\n this.areaInfoBox.style.display = 'none';\r\n this.tilePreview.style.display = 'none';\r\n }\r\n\r\n updateTileShowroom() {\r\n this.selectedTilesCount.textContent = this.selectedTiles.length;\r\n \r\n let totalCost = 0;\r\n let confirmedCount = 0;\r\n \r\n this.selectedTiles.forEach(tile => {\r\n if (tile.confirmed) {\r\n totalCost += tile.totalCost;\r\n confirmedCount++;\r\n }\r\n });\r\n \r\n this.selectedTilesTotal.textContent = totalCost.toFixed(2) + ' \u062c';\r\n this.confirmedTilesCount.textContent = confirmedCount;\r\n \r\n this.tileShowroomContainer.innerHTML = '';\r\n \r\n if (this.selectedTiles.length === 0) {\r\n this.tileShowroomContainer.innerHTML = `\r\n <div style=\"text-align:center; padding:40px; color:#666;\">\r\n <i class=\"fas fa-tile\" style=\"font-size:48px; margin-bottom:20px; opacity:0.3;\"><\/i>\r\n <h3>\u0627\u0644\u0645\u0639\u0631\u0636 \u0641\u0627\u0631\u063a<\/h3>\r\n <p>\u0642\u0645 \u0628\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0643\u0644 \u0645\u0633\u0627\u062d\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0632\u0631 \u0628\u0627\u0644\u0623\u0639\u0644\u0649<\/p>\r\n <\/div>\r\n `;\r\n this.tileSummarySection.style.display = 'none';\r\n return;\r\n }\r\n \r\n const tilesByArea = {};\r\n this.selectedTiles.forEach(tile => {\r\n if (!tilesByArea[tile.areaId]) {\r\n tilesByArea[tile.areaId] = [];\r\n }\r\n tilesByArea[tile.areaId].push(tile);\r\n });\r\n \r\n Object.keys(tilesByArea).forEach(areaId => {\r\n const areaTiles = tilesByArea[areaId];\r\n const firstTile = areaTiles[0];\r\n \r\n const areaCard = document.createElement('div');\r\n areaCard.className = `tile-card ${areaTiles.some(t => t.confirmed) ? 'confirmed' : ''}`;\r\n if (areaTiles.length > 1) {\r\n areaCard.classList.add('area-with-multiple-tiles');\r\n }\r\n areaCard.id = `area-tile-${areaId}`;\r\n \r\n const confirmedTile = areaTiles.find(t => t.confirmed);\r\n const confirmedCount = areaTiles.filter(t => t.confirmed).length;\r\n \r\n let tilesHTML = '';\r\n \r\n if (areaTiles.length > 1) {\r\n tilesHTML += `<div class=\"tile-comparison-grid\">`;\r\n areaTiles.forEach(tile => {\r\n const wallTypeName = this.getTileTypeName(tile.wallTileType);\r\n const floorTypeName = this.getTileTypeName(tile.floorTileType);\r\n \r\n tilesHTML += `\r\n <div class=\"tile-comparison-item ${tile.confirmed ? 'confirmed' : ''}\">\r\n ${tile.confirmed ? \r\n `<button class=\"confirm-btn unconfirm-btn\" onclick=\"calculator.toggleTileConfirmation('${tile.id}')\">\r\n <i class=\"fas fa-times\"><\/i> \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062a\u0623\u0643\u064a\u062f\r\n <\/button>` : \r\n `<button class=\"confirm-btn\" onclick=\"calculator.toggleTileConfirmation('${tile.id}')\">\r\n <i class=\"fas fa-check\"><\/i> \u062a\u0623\u0643\u064a\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630\r\n <\/button>`\r\n }\r\n <h6>${tile.areaName}<\/h6>\r\n <div class=\"tile-comparison-details\">\r\n <div><span class=\"detail-label\">\u0627\u0644\u0645\u0635\u0646\u0639:<\/span> <span class=\"detail-value manufacturer-highlight\">${tile.manufacturer}<\/span><\/div>\r\n ${tile.wallTilePrice > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631:<\/span> <span class=\"detail-value\">${wallTypeName}<\/span><\/div>\r\n <div><span class=\"detail-label\">\u0633\u0639\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637:<\/span> <span class=\"detail-value\">${tile.wallTilePrice.toFixed(2)} \u062c\/\u0645\u00b2<\/span><\/div>\r\n ` : ''}\r\n ${tile.floorTilePrice > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/span> <span class=\"detail-value\">${floorTypeName}<\/span><\/div>\r\n <div><span class=\"detail-label\">\u0633\u0639\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.floorTilePrice.toFixed(2)} \u062c\/\u0645\u00b2<\/span><\/div>\r\n ` : ''}\r\n ${tile.accessoryArea > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.accessoryType}<\/span><\/div>\r\n ` : ''}\r\n ${tile.notes ? `<div><span class=\"detail-label\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.notes}<\/span><\/div>` : ''}\r\n <\/div>\r\n <div class=\"cost-display ${tile.confirmed ? 'confirmed' : ''}\">\r\n ${tile.totalCost.toFixed(2)} \u062c\r\n <\/div>\r\n <div class=\"tile-comparison-actions\">\r\n <button class=\"edit-tile-btn\" onclick=\"calculator.openEditTileModal('${tile.id}')\">\r\n <i class=\"fas fa-edit\"><\/i> \u062a\u0639\u062f\u064a\u0644\r\n <\/button>\r\n <button class=\"del-tile\" style=\"padding: 3px 8px; font-size: 11px;\" onclick=\"calculator.removeTile('${tile.id}')\">\r\n <i class=\"fas fa-trash\"><\/i> \u062d\u0630\u0641\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n tilesHTML += `<\/div>`;\r\n } else {\r\n const tile = areaTiles[0];\r\n const wallTypeName = this.getTileTypeName(tile.wallTileType);\r\n const floorTypeName = this.getTileTypeName(tile.floorTileType);\r\n \r\n tilesHTML = `\r\n <div style=\"padding: 15px; background: #f8f9fa; border-radius: 8px;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;\">\r\n <div>\r\n <h6 style=\"margin: 0;\">${tile.areaName}<\/h6>\r\n <div style=\"font-size: 12px; color: #666;\">${tile.manufacturer}<\/div>\r\n <\/div>\r\n <div>\r\n ${tile.confirmed ? \r\n `<span class=\"confirmation-badge confirmed\">\u2713 \u0645\u0624\u0643\u062f<\/span>` : \r\n `<button class=\"confirm-btn\" onclick=\"calculator.toggleTileConfirmation('${tile.id}')\" style=\"padding: 5px 10px;\">\r\n <i class=\"fas fa-check\"><\/i> \u062a\u0623\u0643\u064a\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630\r\n <\/button>`\r\n }\r\n <\/div>\r\n <\/div>\r\n <div class=\"tile-comparison-details\">\r\n ${tile.wallTilePrice > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631:<\/span> <span class=\"detail-value\">${wallTypeName}<\/span><\/div>\r\n <div><span class=\"detail-label\">\u0633\u0639\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637:<\/span> <span class=\"detail-value\">${tile.wallTilePrice.toFixed(2)} \u062c\/\u0645\u00b2<\/span><\/div>\r\n ` : ''}\r\n ${tile.floorTilePrice > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/span> <span class=\"detail-value\">${floorTypeName}<\/span><\/div>\r\n <div><span class=\"detail-label\">\u0633\u0639\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.floorTilePrice.toFixed(2)} \u062c\/\u0645\u00b2<\/span><\/div>\r\n ` : ''}\r\n ${tile.accessoryArea > 0 ? `\r\n <div><span class=\"detail-label\">\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.accessoryType} (${tile.accessoryArea} \u0645\u00b2)<\/span><\/div>\r\n ` : ''}\r\n ${tile.notes ? `<div><span class=\"detail-label\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/span> <span class=\"detail-value\">${tile.notes}<\/span><\/div>` : ''}\r\n <\/div>\r\n <div class=\"cost-display ${tile.confirmed ? 'confirmed' : ''}\">\r\n ${tile.totalCost.toFixed(2)} \u062c\r\n <\/div>\r\n <div style=\"display: flex; gap: 5px; margin-top: 10px; justify-content: flex-end;\">\r\n <button class=\"edit-tile-btn\" onclick=\"calculator.openEditTileModal('${tile.id}')\">\r\n <i class=\"fas fa-edit\"><\/i> \u062a\u0639\u062f\u064a\u0644\r\n <\/button>\r\n <button class=\"del-tile\" style=\"padding: 3px 8px; font-size: 11px;\" onclick=\"calculator.removeTile('${tile.id}')\">\r\n <i class=\"fas fa-trash\"><\/i> \u062d\u0630\u0641\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n \r\n const areaTotalCost = areaTiles.reduce((sum, tile) => sum + (tile.confirmed ? tile.totalCost : 0), 0);\r\n \r\n areaCard.innerHTML = `\r\n <div class=\"tile-card-header\">\r\n <h5>${firstTile.areaName} ${areaTiles.length > 1 ? `<span class=\"area-tile-count-badge\">${areaTiles.length} \u062e\u064a\u0627\u0631${areaTiles.length > 1 ? '\u0627\u062a' : ''}<\/span>` : ''}<\/h5>\r\n <span class=\"tile-badge\">${confirmedCount}\/${areaTiles.length} \u0645\u0624\u0643\u062f<\/span>\r\n <\/div>\r\n <div class=\"tile-card-body\">\r\n ${tilesHTML}\r\n <div class=\"tile-total\" style=\"background: ${confirmedCount > 0 ? '#d4edda' : '#f8f9fa'}; color: ${confirmedCount > 0 ? '#155724' : '#6c757d'}\">\r\n ${confirmedCount > 0 ? '\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0645\u0624\u0643\u062f\u0629 \u0644\u0644\u0645\u0633\u0627\u062d\u0629:' : '\u0644\u0645 \u064a\u062a\u0645 \u062a\u0623\u0643\u064a\u062f \u0623\u064a \u0628\u0644\u0627\u0637 \u0644\u0644\u0645\u0633\u0627\u062d\u0629:'} ${areaTotalCost.toFixed(2)} \u062c\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n this.tileShowroomContainer.appendChild(areaCard);\r\n });\r\n \r\n this.updateTileSummary();\r\n this.updateTileOrder();\r\n }\r\n\r\n getTileTypeName(tileType) {\r\n const typeNames = {\r\n 'ceramic_small': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631',\r\n 'ceramic_large': '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631',\r\n 'porcelain': '\u0628\u0648\u0631\u0633\u0644\u064a\u0646',\r\n 'marble': '\u0631\u062e\u0627\u0645',\r\n 'granite': '\u062c\u0631\u0627\u0646\u064a\u062a'\r\n };\r\n return typeNames[tileType] || tileType;\r\n }\r\n\r\n updateTileOrder() {\r\n if (this.confirmedTiles.length === 0) {\r\n if (this.tileOrderContainer) {\r\n this.tileOrderContainer.innerHTML = `\r\n <p style=\"color: #666;\">\u0633\u064a\u062a\u0645 \u0639\u0631\u0636 \u0642\u0627\u0626\u0645\u0629 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0647\u0646\u0627 \u0628\u0639\u062f \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f<\/p>\r\n `;\r\n }\r\n return;\r\n }\r\n \r\n let html = '<h4 style=\"margin-top: 0; color: var(--primary);\">\ud83d\udccb \u0642\u0627\u0626\u0645\u0629 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u062e\u062a\u0627\u0631<\/h4>';\r\n \r\n const tilesByArea = {};\r\n this.confirmedTiles.forEach(tile => {\r\n if (!tilesByArea[tile.areaId]) {\r\n tilesByArea[tile.areaId] = [];\r\n }\r\n tilesByArea[tile.areaId].push(tile);\r\n });\r\n \r\n Object.keys(tilesByArea).forEach(areaId => {\r\n const areaTiles = tilesByArea[areaId];\r\n const firstTile = areaTiles[0];\r\n \r\n html += `<div style=\"margin-bottom: 15px; padding: 10px; background: #e8f4ff; border-radius: 6px; border-right: 3px solid var(--primary);\">`;\r\n html += `<h5 style=\"margin: 0 0 10px 0; color: var(--primary);\">${firstTile.areaName}<\/h5>`;\r\n \r\n areaTiles.forEach(tile => {\r\n if (tile.wallTilePrice > 0) {\r\n const wallTypeName = this.getTileTypeName(tile.wallTileType);\r\n html += `<div style=\"display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #ccc;\">\r\n <span>${wallTypeName} (\u062d\u0648\u0627\u0626\u0637\/\u0648\u0632\u0631)<\/span>\r\n <span><strong>${tile.wallTilesWithWaste.toFixed(2)} \u0645\u00b2<\/strong><\/span>\r\n <\/div>`;\r\n }\r\n \r\n if (tile.floorTilePrice > 0) {\r\n const floorTypeName = this.getTileTypeName(tile.floorTileType);\r\n html += `<div style=\"display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #ccc;\">\r\n <span>${floorTypeName} (\u0623\u0631\u0636\u064a\u0627\u062a)<\/span>\r\n <span><strong>${tile.floorTilesWithWaste.toFixed(2)} \u0645\u00b2<\/strong><\/span>\r\n <\/div>`;\r\n }\r\n \r\n if (tile.accessoryArea > 0) {\r\n html += `<div style=\"display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #ccc;\">\r\n <span>\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a: ${tile.accessoryType}<\/span>\r\n <span><strong>${tile.accessoryArea.toFixed(2)} \u0645\u00b2<\/strong><\/span>\r\n <\/div>`;\r\n }\r\n });\r\n \r\n html += `<\/div>`;\r\n });\r\n \r\n if (this.tileOrderContainer) {\r\n this.tileOrderContainer.innerHTML = html;\r\n }\r\n }\r\n\r\n openEditTileModal(tileId) {\r\n const tile = this.selectedTiles.find(t => t.id === tileId);\r\n if (!tile) return;\r\n \r\n const editFormHTML = `\r\n <div class=\"form-group \">\r\n <label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639 (\u0623\u0647\u0645 \u062d\u0642\u0644)<\/label>\r\n <input type=\"text\" id=\"edit-tile-manufacturer\" value=\"${tile.manufacturer}\" placeholder=\"\u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639\" class=\"validate-input\">\r\n <\/div>\r\n \r\n <div class=\"tile-options-grid\">\r\n <div class=\"tile-option-card wall-option\">\r\n <h5>\u0628\u0644\u0627\u0637 \u0627\u0644\u062d\u0648\u0627\u0626\u0637\/\u0627\u0644\u0648\u0632\u0631<\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637<\/label>\r\n <select id=\"edit-wall-tile-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 --<\/option>\r\n <option value=\"ceramic_small\" ${tile.wallTileType === 'ceramic_small' ? 'selected' : ''}>\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631<\/option>\r\n <option value=\"ceramic_large\" ${tile.wallTileType === 'ceramic_large' ? 'selected' : ''}>\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631<\/option>\r\n <option value=\"porcelain\" ${tile.wallTileType === 'porcelain' ? 'selected' : ''}>\u0628\u0648\u0631\u0633\u0644\u064a\u0646<\/option>\r\n <option value=\"marble\" ${tile.wallTileType === 'marble' ? 'selected' : ''}>\u0631\u062e\u0627\u0645<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631 (\u062c)<\/label>\r\n <input type=\"number\" id=\"edit-wall-tile-price\" value=\"${tile.wallTilePrice}\" onclick=\"this.select()\" class=\"validate-input\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/label>\r\n <select id=\"edit-wall-tile-location\" class=\"validate-input\">\r\n <option value=\"walls\" ${tile.wallTileLocation === 'walls' ? 'selected' : ''}>\u062d\u0648\u0627\u0626\u0637 \u0641\u0642\u0637<\/option>\r\n <option value=\"skirting\" ${tile.wallTileLocation === 'skirting' ? 'selected' : ''}>\u0648\u0632\u0631 \u0641\u0642\u0637<\/option>\r\n <option value=\"both\" ${tile.wallTileLocation === 'both' ? 'selected' : ''}>\u062d\u0648\u0627\u0626\u0637 \u0648\u0648\u0632\u0631<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"tile-option-card floor-option\">\r\n <h5>\u0628\u0644\u0627\u0637 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637<\/label>\r\n <select id=\"edit-floor-tile-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 --<\/option>\r\n <option value=\"ceramic_small\" ${tile.floorTileType === 'ceramic_small' ? 'selected' : ''}>\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631<\/option>\r\n <option value=\"ceramic_large\" ${tile.floorTileType === 'ceramic_large' ? 'selected' : ''}>\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0643\u0628\u064a\u0631<\/option>\r\n <option value=\"porcelain\" ${tile.floorTileType === 'porcelain' ? 'selected' : ''}>\u0628\u0648\u0631\u0633\u0644\u064a\u0646<\/option>\r\n <option value=\"marble\" ${tile.floorTileType === 'marble' ? 'selected' : ''}>\u0631\u062e\u0627\u0645<\/option>\r\n <option value=\"granite\" ${tile.floorTileType === 'granite' ? 'selected' : ''}>\u062c\u0631\u0627\u0646\u064a\u062a<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631 (\u062c)<\/label>\r\n <input type=\"number\" id=\"edit-floor-tile-price\" value=\"${tile.floorTilePrice}\" onclick=\"this.select()\" class=\"validate-input\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/label>\r\n <select id=\"edit-floor-tile-location\" class=\"validate-input\">\r\n <option value=\"floor\" ${tile.floorTileLocation === 'floor' ? 'selected' : ''}>\u0623\u0631\u0636\u064a\u0627\u062a<\/option>\r\n <option value=\"floor_with_border\" ${tile.floorTileLocation === 'floor_with_border' ? 'selected' : ''}>\u0623\u0631\u0636\u064a\u0627\u062a \u0645\u0639 \u0625\u0637\u0627\u0631<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"accessories-section\">\r\n <h5>\u0627\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629<\/h5>\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631<\/label>\r\n <select id=\"edit-accessory-type\" class=\"validate-input\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631 --<\/option>\r\n <option value=\"corner\" ${tile.accessoryType === 'corner' ? 'selected' : ''}>\u0632\u0648\u0627\u064a\u0627<\/option>\r\n <option value=\"border\" ${tile.accessoryType === 'border' ? 'selected' : ''}>\u0625\u0637\u0627\u0631\u0627\u062a<\/option>\r\n <option value=\"pattern\" ${tile.accessoryType === 'pattern' ? 'selected' : ''}>\u0632\u062e\u0627\u0631\u0641<\/option>\r\n <option value=\"other\" ${tile.accessoryType === 'other' ? 'selected' : ''}>\u0623\u062e\u0631\u0649<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"inline\">\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062e\u0635\u0635\u0629 (\u0645\u00b2)<\/label>\r\n <input type=\"number\" id=\"edit-accessory-area\" value=\"${tile.accessoryArea || 0}\" onclick=\"this.select()\" class=\"validate-input\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0633\u0639\u0631 \u0627\u0644\u0648\u062d\u062f\u0629 (\u062c)<\/label>\r\n <input type=\"number\" id=\"edit-accessory-price\" value=\"${tile.accessoryPrice || 0}\" onclick=\"this.select()\" class=\"validate-input\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0644\u0649 \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631<\/label>\r\n <input type=\"text\" id=\"edit-accessory-notes\" value=\"${tile.accessoryNotes || ''}\" class=\"validate-input\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label>\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629<\/label>\r\n <textarea id=\"edit-tile-notes\" class=\"notes-field\" rows=\"3\">${tile.notes || ''}<\/textarea>\r\n <\/div>\r\n \r\n <div class=\"installation-options\" style=\"margin-top: 15px;\">\r\n <div class=\"installation-option ${tile.installMethod === 'default' ? 'selected' : ''}\" data-method=\"default\" onclick=\"calculator.selectEditInstallMethod('default')\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <div>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a<\/div>\r\n <\/div>\r\n <div class=\"installation-option ${tile.installMethod === 'none' ? 'selected' : ''}\" data-method=\"none\" onclick=\"calculator.selectEditInstallMethod('none')\">\r\n <i class=\"fas fa-ban\"><\/i>\r\n <div>\u0644\u0627 \u0623\u0631\u064a\u062f \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u0631\u0643\u064a\u0628<\/div>\r\n <\/div>\r\n <div class=\"installation-option ${tile.installMethod === 'mortar' ? 'selected' : ''}\" data-method=\"mortar\" onclick=\"calculator.selectEditInstallMethod('mortar')\">\r\n <i class=\"fas fa-bucket\"><\/i>\r\n <div>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0648\u0646\u0629 \u0627\u0644\u0623\u0633\u0645\u0646\u062a\u064a\u0629<\/div>\r\n <\/div>\r\n <div class=\"installation-option ${tile.installMethod === 'glue' ? 'selected' : ''}\" data-method=\"glue\" onclick=\"calculator.selectEditInstallMethod('glue')\">\r\n <i class=\"fas fa-glue\"><\/i>\r\n <div>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <input type=\"hidden\" id=\"edit-tile-install-method\" value=\"${tile.installMethod || 'default'}\">\r\n \r\n <div style=\"background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0;\">\r\n <h5>\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u062a\u0643\u0644\u0641\u0629:<\/h5>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div>\r\n <p style=\"margin: 5px 0;\"><strong>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637:<\/strong> ${tile.wallArea.toFixed(2)} \u0645\u00b2<\/p>\r\n <p style=\"margin: 5px 0;\"><strong>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a:<\/strong> ${tile.floorArea.toFixed(2)} \u0645\u00b2<\/p>\r\n <p style=\"margin: 5px 0;\"><strong>\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a:<\/strong> ${tile.accessoryArea.toFixed(2)} \u0645\u00b2<\/p>\r\n <\/div>\r\n <div style=\"text-align: center;\">\r\n <p style=\"margin: 5px 0; font-size: 12px; color: #666;\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/p>\r\n <p style=\"margin: 5px 0; font-size: 24px; font-weight: bold; color: var(--primary);\" id=\"edit-preview-cost\">${tile.totalCost.toFixed(2)} \u062c<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"inline\" style=\"margin-top: 20px; justify-content: center; gap: 10px;\">\r\n <button class=\"add-large\" onclick=\"calculator.saveTileEdit('${tile.id}')\" style=\"width: auto; padding: 12px 30px;\">\r\n <i class=\"fas fa-save\"><\/i> \u062d\u0641\u0638 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a\r\n <\/button>\r\n <button class=\"add\" onclick=\"calculator.editTileModal.style.display='none'\" style=\"width: auto; padding: 12px 30px; background-color: var(--secondary);\">\r\n <i class=\"fas fa-times\"><\/i> \u0625\u0644\u063a\u0627\u0621\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n this.editTileForm.innerHTML = editFormHTML;\r\n this.editTileModal.style.display = 'block';\r\n \r\n document.getElementById('edit-wall-tile-price').addEventListener('input', () => this.updateEditPreview(tile.id));\r\n document.getElementById('edit-floor-tile-price').addEventListener('input', () => this.updateEditPreview(tile.id));\r\n document.getElementById('edit-accessory-area').addEventListener('input', () => this.updateEditPreview(tile.id));\r\n document.getElementById('edit-accessory-price').addEventListener('input', () => this.updateEditPreview(tile.id));\r\n }\r\n\r\n selectEditInstallMethod(method) {\r\n document.querySelectorAll('#edit-tile-form .installation-option').forEach(opt => {\r\n opt.classList.remove('selected');\r\n });\r\n \r\n const selectedOpt = document.querySelector(`#edit-tile-form .installation-option[data-method=\"${method}\"]`);\r\n if (selectedOpt) {\r\n selectedOpt.classList.add('selected');\r\n }\r\n \r\n document.getElementById('edit-tile-install-method').value = method;\r\n }\r\n\r\n updateEditPreview(tileId) {\r\n const tile = this.selectedTiles.find(t => t.id === tileId);\r\n if (!tile) return;\r\n \r\n const wallPrice = parseFloat(document.getElementById('edit-wall-tile-price').value) || tile.wallTilePrice;\r\n const floorPrice = parseFloat(document.getElementById('edit-floor-tile-price').value) || tile.floorTilePrice;\r\n const accessoryArea = parseFloat(document.getElementById('edit-accessory-area').value) || tile.accessoryArea;\r\n const accessoryPrice = parseFloat(document.getElementById('edit-accessory-price').value) || tile.accessoryPrice;\r\n \r\n const wastePercentage = parseFloat(this.priceInputs.waste.value) || 10;\r\n const wasteFactor = 1 + (wastePercentage \/ 100);\r\n \r\n const wallTilesWithWaste = tile.wallArea * wasteFactor;\r\n const floorTilesWithWaste = tile.floorArea * wasteFactor;\r\n \r\n const wallCost = wallTilesWithWaste * wallPrice;\r\n const floorCost = floorTilesWithWaste * floorPrice;\r\n const accessoryCost = accessoryArea * accessoryPrice;\r\n \r\n const totalCost = wallCost + floorCost + accessoryCost;\r\n \r\n document.getElementById('edit-preview-cost').textContent = totalCost.toFixed(2) + ' \u062c';\r\n }\r\n\r\n saveTileEdit(tileId) {\r\n const tile = this.selectedTiles.find(t => t.id === tileId);\r\n if (!tile) return;\r\n \r\n const manufacturer = document.getElementById('edit-tile-manufacturer').value;\r\n if (!manufacturer || manufacturer.trim() === '') {\r\n alert('\u26a0\ufe0f \u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0635\u0646\u0639 (\u0647\u0630\u0627 \u0627\u0644\u062d\u0642\u0644 \u0645\u0647\u0645)');\r\n return;\r\n }\r\n \r\n tile.manufacturer = manufacturer;\r\n tile.wallTileType = document.getElementById('edit-wall-tile-type').value;\r\n tile.wallTilePrice = parseFloat(document.getElementById('edit-wall-tile-price').value) || 0;\r\n tile.wallTileLocation = document.getElementById('edit-wall-tile-location').value;\r\n tile.floorTileType = document.getElementById('edit-floor-tile-type').value;\r\n tile.floorTilePrice = parseFloat(document.getElementById('edit-floor-tile-price').value) || 0;\r\n tile.floorTileLocation = document.getElementById('edit-floor-tile-location').value;\r\n tile.accessoryType = document.getElementById('edit-accessory-type').value;\r\n tile.accessoryArea = parseFloat(document.getElementById('edit-accessory-area').value) || 0;\r\n tile.accessoryPrice = parseFloat(document.getElementById('edit-accessory-price').value) || 0;\r\n tile.accessoryNotes = document.getElementById('edit-accessory-notes').value;\r\n tile.notes = document.getElementById('edit-tile-notes').value;\r\n tile.installMethod = document.getElementById('edit-tile-install-method').value;\r\n \r\n const wastePercentage = parseFloat(this.priceInputs.waste.value) || 10;\r\n const wasteFactor = 1 + (wastePercentage \/ 100);\r\n \r\n tile.wallTilesWithWaste = tile.wallArea * wasteFactor;\r\n tile.floorTilesWithWaste = tile.floorArea * wasteFactor;\r\n \r\n tile.wallCost = tile.wallTilesWithWaste * tile.wallTilePrice;\r\n tile.floorCost = tile.floorTilesWithWaste * tile.floorTilePrice;\r\n tile.accessoryCost = tile.accessoryArea * tile.accessoryPrice;\r\n tile.totalCost = tile.wallCost + tile.floorCost + tile.accessoryCost;\r\n \r\n this.updateTileShowroom();\r\n this.calculateAll();\r\n \r\n this.editTileModal.style.display = 'none';\r\n \r\n alert('\u2705 \u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0637 \u0628\u0646\u062c\u0627\u062d');\r\n }\r\n\r\n toggleTileConfirmation(tileId) {\r\n const tileIndex = this.selectedTiles.findIndex(tile => tile.id === tileId);\r\n if (tileIndex === -1) return;\r\n \r\n const tile = this.selectedTiles[tileIndex];\r\n \r\n if (tile.confirmed) {\r\n tile.confirmed = false;\r\n const confirmedIndex = this.confirmedTiles.findIndex(t => t.id === tileId);\r\n if (confirmedIndex > -1) {\r\n this.confirmedTiles.splice(confirmedIndex, 1);\r\n }\r\n } else {\r\n tile.confirmed = true;\r\n this.confirmedTiles.push(tile);\r\n \r\n const otherTiles = this.selectedTiles.filter(t => \r\n t.areaId === tile.areaId && t.id !== tileId && t.confirmed);\r\n \r\n otherTiles.forEach(otherTile => {\r\n otherTile.confirmed = false;\r\n const otherConfirmedIndex = this.confirmedTiles.findIndex(t => t.id === otherTile.id);\r\n if (otherConfirmedIndex > -1) {\r\n this.confirmedTiles.splice(otherConfirmedIndex, 1);\r\n }\r\n });\r\n }\r\n \r\n this.updateTileShowroom();\r\n this.calculateAll();\r\n }\r\n\r\n removeTile(tileId) {\r\n const tileIndex = this.selectedTiles.findIndex(tile => tile.id === tileId);\r\n if (tileIndex === -1) return;\r\n \r\n const tile = this.selectedTiles[tileIndex];\r\n if (confirm(`\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0627\u0644\u0628\u0644\u0627\u0637 \u0645\u0646 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \"${tile.areaName}\"\u061f`)) {\r\n this.selectedTiles.splice(tileIndex, 1);\r\n \r\n const confirmedIndex = this.confirmedTiles.findIndex(t => t.id === tileId);\r\n if (confirmedIndex > -1) {\r\n this.confirmedTiles.splice(confirmedIndex, 1);\r\n }\r\n \r\n this.updateTileShowroom();\r\n this.calculateAll();\r\n }\r\n }\r\n\r\n updateTileSummary() {\r\n if (this.confirmedTiles.length === 0) {\r\n this.tileSummarySection.style.display = 'none';\r\n return;\r\n }\r\n \r\n let html = '';\r\n let totalCost = 0;\r\n \r\n const tilesByArea = {};\r\n this.confirmedTiles.forEach(tile => {\r\n if (!tilesByArea[tile.areaId]) {\r\n tilesByArea[tile.areaId] = [];\r\n }\r\n tilesByArea[tile.areaId].push(tile);\r\n });\r\n \r\n Object.keys(tilesByArea).forEach(areaId => {\r\n const areaTiles = tilesByArea[areaId];\r\n const firstTile = areaTiles[0];\r\n \r\n areaTiles.forEach((tile, index) => {\r\n const wallTypeName = this.getTileTypeName(tile.wallTileType);\r\n const floorTypeName = this.getTileTypeName(tile.floorTileType);\r\n \r\n html += `\r\n <tr style=\"background-color: #d4edda;\">\r\n <td>${index === 0 ? tile.areaName : ''}<\/td>\r\n <td class=\"manufacturer-highlight\">${tile.manufacturer}<\/td>\r\n <td>${tile.wallTilePrice > 0 ? wallTypeName : '-'}<\/td>\r\n <td>${tile.floorTilePrice > 0 ? floorTypeName : '-'}<\/td>\r\n <td>${tile.wallTilePrice.toFixed(2)}<\/td>\r\n <td>${tile.floorTilePrice.toFixed(2)}<\/td>\r\n <td>${tile.totalCost.toFixed(2)} \u062c<\/td>\r\n <td>\r\n <span style=\"color: var(--success); font-weight: bold;\">\r\n \u2713 \u0645\u0624\u0643\u062f\r\n <\/span>\r\n <\/td>\r\n <td>\r\n <button class=\"edit-tile-btn\" style=\"padding:3px 6px; font-size:10px;\" onclick=\"calculator.openEditTileModal('${tile.id}')\">\r\n <i class=\"fas fa-edit\"><\/i>\r\n <\/button>\r\n <button class=\"del-tile\" style=\"padding:3px 6px; font-size:10px;\" onclick=\"calculator.removeTile('${tile.id}')\">\r\n \ud83d\uddd1\ufe0f\r\n <\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n totalCost += tile.totalCost;\r\n });\r\n });\r\n \r\n this.tileSummaryBody.innerHTML = html;\r\n this.tileSummaryTotal.textContent = totalCost.toFixed(2) + ' \u062c';\r\n this.tileSummarySection.style.display = 'block';\r\n }\r\n\r\n \/\/ ====================\r\n \/\/ \u0646\u0638\u0627\u0645 \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\r\n \/\/ ====================\r\n\r\n initSpreadsheetSystem() {\r\n const spreadsheetBtn = document.getElementById('open-spreadsheet-btn');\r\n if (spreadsheetBtn) {\r\n spreadsheetBtn.addEventListener('click', () => this.openSpreadsheet());\r\n }\r\n }\r\n\r\n openSpreadsheet() {\r\n const overlay = document.getElementById('spreadsheet-overlay');\r\n const container = overlay.querySelector('.spreadsheet-container');\r\n \r\n container.innerHTML = `\r\n <div class=\"spreadsheet-header\">\r\n <div>\r\n <h3 style=\"margin: 0; color: white; font-size: 24px;\">\ud83d\udcca \u062c\u062f\u0648\u0644 \u0645\u062a\u0642\u062f\u0645 - \u062a\u062d\u0631\u064a\u0631 \u0645\u0628\u0627\u0634\u0631<\/h3>\r\n <p style=\"margin: 5px 0 0 0; color: rgba(255,255,255,0.9);\">\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u062b\u0644 Excel<\/p>\r\n <\/div>\r\n <div class=\"spreadsheet-controls\">\r\n <button id=\"close-spreadsheet\">\u274c \u0625\u063a\u0644\u0627\u0642<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"overflow-x: auto; margin: 20px 0;\">\r\n <table id=\"excel-like-table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/th>\r\n <th>\u0627\u0644\u0645\u0635\u0646\u0639<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u062d\u0648\u0627\u0626\u0637<\/th>\r\n <th>\u0646\u0648\u0639 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u062c)<\/th>\r\n <th>\u0633\u0639\u0631 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a (\u062c)<\/th>\r\n <th>\u0627\u0644\u062a\u0643\u0644\u0641\u0629<\/th>\r\n <th>\u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0623\u0643\u064a\u062f<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"spreadsheet-body\">\r\n <!-- \u0633\u064a\u062a\u0645 \u0645\u0644\u0624\u0647\u0627 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b -->\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n `;\r\n \r\n overlay.style.display = 'block';\r\n document.body.style.overflow = 'hidden';\r\n \r\n this.loadDataIntoSpreadsheet();\r\n this.attachSpreadsheetEvents();\r\n }\r\n\r\n loadDataIntoSpreadsheet() {\r\n const tbody = document.getElementById('spreadsheet-body');\r\n if (!tbody) return;\r\n \r\n tbody.innerHTML = '';\r\n \r\n const confirmedTilesByArea = {};\r\n this.confirmedTiles.forEach(tile => {\r\n if (!confirmedTilesByArea[tile.areaId]) {\r\n confirmedTilesByArea[tile.areaId] = tile;\r\n }\r\n });\r\n \r\n const areas = document.querySelectorAll('.area-group');\r\n \r\n areas.forEach((area, index) => {\r\n const name = area.querySelector('.area-name')?.value || `\u0645\u0633\u0627\u062d\u0629 ${index + 1}`;\r\n const areaId = area.id;\r\n \r\n const tile = confirmedTilesByArea[areaId];\r\n let manufacturer = '-';\r\n let wallType = '\u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n let floorType = '\u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n let wallPrice = 0;\r\n let floorPrice = 0;\r\n let totalCost = 0;\r\n let isConfirmed = false;\r\n \r\n if (tile) {\r\n manufacturer = tile.manufacturer || '-';\r\n wallType = this.getTileTypeName(tile.wallTileType);\r\n floorType = this.getTileTypeName(tile.floorTileType);\r\n wallPrice = tile.wallTilePrice;\r\n floorPrice = tile.floorTilePrice;\r\n totalCost = tile.totalCost;\r\n isConfirmed = true;\r\n }\r\n \r\n const row = document.createElement('tr');\r\n row.innerHTML = `\r\n <td>${index + 1}<\/td>\r\n <td>${name}<\/td>\r\n <td>${manufacturer}<\/td>\r\n <td>${wallType}<\/td>\r\n <td>${floorType}<\/td>\r\n <td>${wallPrice.toFixed(2)}<\/td>\r\n <td>${floorPrice.toFixed(2)}<\/td>\r\n <td>${totalCost.toFixed(2)}<\/td>\r\n <td>${isConfirmed ? '\u2713 \u0645\u0624\u0643\u062f' : '\u063a\u064a\u0631 \u0645\u0624\u0643\u062f'}<\/td>\r\n `;\r\n \r\n tbody.appendChild(row);\r\n });\r\n }\r\n\r\n attachSpreadsheetEvents() {\r\n document.getElementById('close-spreadsheet')?.addEventListener('click', () => {\r\n this.closeSpreadsheet();\r\n });\r\n \r\n document.getElementById('spreadsheet-overlay')?.addEventListener('click', (e) => {\r\n if (e.target.id === 'spreadsheet-overlay') {\r\n this.closeSpreadsheet();\r\n }\r\n });\r\n }\r\n\r\n closeSpreadsheet() {\r\n document.getElementById('spreadsheet-overlay').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n \/\/ ====================\r\n \/\/ \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a\r\n \/\/ ====================\r\n\r\n addTransaction(data = {}) {\r\n this.transactionCounter++;\r\n const today = new Date().toISOString().split('T')[0];\r\n const dashboardHTML = `\r\n <div class=\"financial-dashboard\">\r\n <h4><i class=\"fas fa-file-invoice-dollar\"><\/i> \u0627\u0644\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0627\u0644\u064a \u0644\u0644\u0645\u0642\u0627\u0648\u0644<\/h4>\r\n \r\n <div class=\"financial-summary\">\r\n <div class=\"financial-card total\">\r\n <h5>\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a<\/h5>\r\n <div class=\"amount\" id=\"total-due-amount\">0.00<\/div>\r\n <\/div>\r\n <div class=\"financial-card paid\">\r\n <h5>\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u062f\u0641\u0648\u0639<\/h5>\r\n <div class=\"amount positive\" id=\"total-paid-amount\">0.00<\/div>\r\n <\/div>\r\n <div class=\"financial-card balance\">\r\n <h5>\u0627\u0644\u0631\u0635\u064a\u062f \u0627\u0644\u062d\u0627\u0644\u064a<\/h5>\r\n <div class=\"amount\" id=\"balance-amount\">0.00<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 20px;\">\r\n <h5><i class=\"fas fa-list\"><\/i> \u0633\u062c\u0644 \u0627\u0644\u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0627\u0644\u0645\u0627\u0644\u064a\u0629<\/h5>\r\n <div id=\"transactions-container\"><\/div>\r\n \r\n <div class=\"area-selection-controls\" style=\"margin-top: 15px;\">\r\n <button class=\"add\" onclick=\"calculator.addTransactionItem('payment')\">\r\n <i class=\"fas fa-money-bill-wave\"><\/i> \u062f\u0641\u0639\u0629 \u0646\u0642\u062f\u064a\u0629\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n this.financialDashboardContainer.innerHTML = dashboardHTML;\r\n \r\n if (data.amount) {\r\n this.addTransactionItem(data.type || 'payment', data);\r\n } else {\r\n this.addTransactionItem('payment', {\r\n amount: '0',\r\n date: today,\r\n description: '\u0639\u0631\u0628\u0648\u0646 \u0623\u0648 \u062f\u0641\u0639\u0629 \u0623\u0648\u0644\u0649'\r\n });\r\n }\r\n }\r\n\r\n addTransactionItem(type = 'payment', data = {}) {\r\n const transactionsContainer = document.getElementById('transactions-container');\r\n const today = new Date().toISOString().split('T')[0];\r\n const itemId = `transaction-item-${Date.now()}`;\r\n \r\n const isPayment = type === 'payment';\r\n const sign = isPayment ? '+' : '-';\r\n const bgColor = isPayment ? '#d4edda' : '#f8d7da';\r\n const borderColor = isPayment ? '#c3e6cb' : '#f5c6cb';\r\n \r\n const itemHTML = `\r\n <div class=\"transaction-item\" id=\"${itemId}\" style=\"background: ${bgColor}; border: 1px solid ${borderColor}; border-radius: 8px; padding: 15px; margin-bottom: 10px;\">\r\n <div class=\"inline\">\r\n <div class=\"form-group\" style=\"flex: 1;\">\r\n <label>\u0627\u0644\u062a\u0627\u0631\u064a\u062e<\/label>\r\n <input type=\"date\" class=\"transaction-date\" value=\"${data.date || today}\">\r\n <\/div>\r\n <div class=\"form-group\" style=\"flex: 2;\">\r\n <label>\u0627\u0644\u0648\u0635\u0641<\/label>\r\n <input type=\"text\" class=\"transaction-desc\" value=\"${data.description || (isPayment ? '\u062f\u0641\u0639\u0629 \u0646\u0642\u062f\u064a\u0629' : '\u062e\u0635\u0645\/\u062a\u0633\u0648\u064a\u0629')}\" placeholder=\"\u0648\u0635\u0641 \u0627\u0644\u0645\u0639\u0627\u0645\u0644\u0629\">\r\n <\/div>\r\n <div class=\"form-group\" style=\"flex: 1;\">\r\n <label>\u0627\u0644\u0645\u0628\u0644\u063a<\/label>\r\n <div style=\"display: flex; align-items: center;\">\r\n <span style=\"margin-left: 5px; font-weight: bold; color: ${isPayment ? 'var(--success)' : 'var(--danger)'};\">${sign}<\/span>\r\n <input type=\"number\" class=\"transaction-amount\" value=\"${data.amount || '0'}\" onclick=\"this.select()\" style=\"text-align: left;\">\r\n <\/div>\r\n <\/div>\r\n <button class=\"del-payment\" onclick=\"document.getElementById('${itemId}').remove(); calculator.updateFinancialSummary()\">\u2716<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n transactionsContainer.insertAdjacentHTML('beforeend', itemHTML);\r\n \r\n const newItem = document.getElementById(itemId);\r\n newItem.querySelectorAll('input, select').forEach(input => {\r\n input.addEventListener('input', () => this.updateFinancialSummary());\r\n });\r\n \r\n this.updateFinancialSummary();\r\n }\r\n\r\n updateFinancialSummary() {\r\n let totalDue = parseFloat(this.workmanshipTotalSpan.textContent) || 0;\r\n let totalPaid = 0;\r\n \r\n document.querySelectorAll('.transaction-item').forEach(item => {\r\n const amount = parseFloat(item.querySelector('.transaction-amount')?.value) || 0;\r\n totalPaid += amount;\r\n });\r\n \r\n const balance = totalDue - totalPaid;\r\n \r\n const totalDueEl = document.getElementById('total-due-amount');\r\n const totalPaidEl = document.getElementById('total-paid-amount');\r\n const balanceEl = document.getElementById('balance-amount');\r\n \r\n if (totalDueEl) totalDueEl.textContent = totalDue.toFixed(2);\r\n if (totalPaidEl) totalPaidEl.textContent = totalPaid.toFixed(2);\r\n if (balanceEl) {\r\n balanceEl.textContent = Math.abs(balance).toFixed(2);\r\n if (balance >= 0) {\r\n balanceEl.className = 'amount positive';\r\n balanceEl.parentElement.querySelector('h5').textContent = '\u0627\u0644\u0631\u0635\u064a\u062f \u0627\u0644\u0645\u062a\u0628\u0642\u064a';\r\n } else {\r\n balanceEl.className = 'amount negative';\r\n balanceEl.parentElement.querySelector('h5').textContent = '\u0645\u0628\u0644\u063a \u0632\u0627\u0626\u062f \u0639\u0646 \u0627\u0644\u0645\u0633\u062a\u062d\u0642';\r\n }\r\n }\r\n }\r\n\r\n \/\/ ====================\r\n \/\/ \u0627\u0644\u062f\u0648\u0627\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 (\u0645\u062d\u062f\u062b\u0629 \u0645\u0639 \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0648\u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f)\r\n \/\/ ====================\r\n\r\n attachEventListeners() {\r\n Object.values(this.priceInputs).forEach(input => {\r\n if (input) input.addEventListener('input', () => {\r\n this.calculateAll();\r\n this.updateTilePreview();\r\n });\r\n });\r\n \r\n Object.values(this.settings).forEach(input => {\r\n if (input) input.addEventListener('input', () => this.calculateAll());\r\n });\r\n \r\n Object.values(this.materialControls).forEach(input => {\r\n if (input && input.type !== 'checkbox') input.addEventListener('input', () => this.calculateAll());\r\n });\r\n \r\n if (this.materialControls.enableGlue) {\r\n this.materialControls.enableGlue.addEventListener('change', () => {\r\n document.getElementById('glue-control').style.opacity = this.materialControls.enableGlue.checked ? '1' : '0.5';\r\n this.calculateAll();\r\n });\r\n }\r\n \r\n if (this.materialControls.enableGrout) {\r\n this.materialControls.enableGrout.addEventListener('change', () => {\r\n document.getElementById('grout-control').style.opacity = this.materialControls.enableGrout.checked ? '1' : '0.5';\r\n this.calculateAll();\r\n });\r\n }\r\n \r\n if (this.materialControls.defaultMethod) {\r\n this.materialControls.defaultMethod.addEventListener('change', () => this.calculateAll());\r\n }\r\n \r\n Object.values(this.contractorInfo).forEach(input => {\r\n if (input && input.id !== 'callLink') input.addEventListener('input', () => this.calculateAll());\r\n });\r\n \r\n if (this.contractorInfo.phone) {\r\n this.contractorInfo.phone.addEventListener('input', () => {\r\n if (this.contractorInfo.callLink) {\r\n this.contractorInfo.callLink.href = `tel:${this.contractorInfo.phone.value}`;\r\n }\r\n });\r\n }\r\n \r\n this.areasContainer.addEventListener('input', e => {\r\n if (e.target.matches('input, select')) {\r\n this.calculateAll();\r\n }\r\n });\r\n \r\n this.areasContainer.addEventListener('click', e => {\r\n if (e.target.matches('.del-area')) { \r\n e.target.closest('.area-group').remove(); \r\n this.calculateAll(); \r\n }\r\n else if (e.target.matches('.del-opening')) { \r\n e.target.closest('.inline').remove(); \r\n this.calculateAll(); \r\n }\r\n else if (e.target.matches('.add-opening')) { \r\n this.addOpening(e.target.closest('.area-group')); \r\n }\r\n else if (e.target.matches('.add-skirting-deduction')) { \r\n this.addSkirtingDeduction(e.target.closest('.area-group')); \r\n }\r\n else if (e.target.matches('.del-skirting-deduction')) { \r\n e.target.closest('.inline').remove(); \r\n this.calculateAll(); \r\n }\r\n });\r\n \r\n this.workmanshipItemsContainer.addEventListener('input', () => this.calculateAll());\r\n this.workmanshipItemsContainer.addEventListener('click', e => {\r\n if (e.target.classList.contains('del-item')) {\r\n e.target.closest('.workmanship-item-card').remove();\r\n this.calculateAll();\r\n }\r\n });\r\n\r\n document.querySelectorAll(\".accordion\").forEach(acc => {\r\n if (acc.id !== 'togglePayments') {\r\n acc.addEventListener(\"click\", function() {\r\n this.classList.toggle(\"active\");\r\n const panel = this.nextElementSibling;\r\n panel.style.maxHeight = this.classList.contains(\"active\") ? panel.scrollHeight + \"px\" : null;\r\n });\r\n }\r\n });\r\n\r\n this.closeModalBtns.forEach(btn => {\r\n btn.onclick = () => {\r\n if (this.smartAreaModal) this.smartAreaModal.style.display = 'none';\r\n if (this.tileSelectionModal) this.tileSelectionModal.style.display = 'none';\r\n if (this.editTileModal) this.editTileModal.style.display = 'none';\r\n };\r\n });\r\n \r\n window.onclick = (event) => {\r\n if (this.smartAreaModal && event.target == this.smartAreaModal) {\r\n this.smartAreaModal.style.display = \"none\";\r\n }\r\n if (this.tileSelectionModal && event.target == this.tileSelectionModal) {\r\n this.tileSelectionModal.style.display = \"none\";\r\n }\r\n if (this.editTileModal && event.target == this.editTileModal) {\r\n this.editTileModal.style.display = \"none\";\r\n }\r\n }\r\n \r\n document.querySelectorAll('.modal-option').forEach(option => {\r\n option.onclick = () => {\r\n this.addSmartArea(option.dataset.type);\r\n if (this.smartAreaModal) this.smartAreaModal.style.display = 'none';\r\n }\r\n });\r\n\r\n if (this.projectNotes) {\r\n this.projectNotes.addEventListener('input', () => this.saveProjects());\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0644\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u062c\u062f\u064a\u062f\u0629\r\n if (this.wallTilePrice) {\r\n this.wallTilePrice.addEventListener('input', () => this.updateTilePreview());\r\n }\r\n \r\n if (this.floorTilePrice) {\r\n this.floorTilePrice.addEventListener('input', () => this.updateTilePreview());\r\n }\r\n \r\n if (this.accessoryArea) {\r\n this.accessoryArea.addEventListener('input', () => this.updateTilePreview());\r\n }\r\n \r\n if (this.accessoryPrice) {\r\n this.accessoryPrice.addEventListener('input', () => this.updateTilePreview());\r\n }\r\n \r\n if (this.tileAreaSelect) {\r\n this.tileAreaSelect.addEventListener('change', () => this.updateTilePreview());\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0644\u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629\r\n if (this.wallWorkmanshipPrice) {\r\n this.wallWorkmanshipPrice.addEventListener('input', () => this.calculateAll());\r\n }\r\n \r\n if (this.floorWorkmanshipPrice) {\r\n this.floorWorkmanshipPrice.addEventListener('input', () => this.calculateAll());\r\n }\r\n \r\n if (this.skirtingWorkmanshipPrice) {\r\n this.skirtingWorkmanshipPrice.addEventListener('input', () => this.calculateAll());\r\n }\r\n }\r\n\r\n loadInitialState() {\r\n const savedProjects = localStorage.getItem(this.STORAGE_KEY);\r\n this.projects = savedProjects ? JSON.parse(savedProjects) : [];\r\n if (this.projects.length === 0) {\r\n this.startEmptyProject();\r\n } else {\r\n this.activeProjectId = this.projects[0].id;\r\n this.renderTabs();\r\n this.loadProjectState(this.activeProjectId);\r\n }\r\n }\r\n\r\n saveProjects() {\r\n if (!this.activeProjectId) return;\r\n this.saveCurrentProjectState();\r\n localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.projects));\r\n }\r\n\r\n addNewProject(name = `\u0645\u0634\u0631\u0648\u0639 ${this.projects.length + 1}`, data = null) {\r\n const newProjectId = Date.now();\r\n const newProject = { \r\n id: newProjectId, \r\n name: name, \r\n data: data || this.getEmptyProjectData() \r\n };\r\n this.projects.push(newProject);\r\n this.switchProject(newProjectId);\r\n return newProject;\r\n }\r\n\r\n switchProject(projectId) {\r\n if (this.activeProjectId) this.saveCurrentProjectState();\r\n this.activeProjectId = projectId;\r\n this.renderTabs();\r\n this.loadProjectState(projectId);\r\n }\r\n\r\n deleteProject(projectId) {\r\n if (this.projects.length === 1) {\r\n alert(\"\u0644\u0627 \u064a\u0645\u0643\u0646 \u062d\u0630\u0641 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0648\u062d\u064a\u062f.\");\r\n return;\r\n }\r\n if (confirm(\"\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\u061f\")) {\r\n this.projects = this.projects.filter(p => p.id !== projectId);\r\n this.activeProjectId = this.projects.length > 0 ? this.projects[0].id : null;\r\n this.saveProjects();\r\n if (this.activeProjectId) this.switchProject(this.activeProjectId);\r\n else this.startEmptyProject();\r\n }\r\n }\r\n\r\n renameProject(tab) {\r\n const tabNameSpan = tab.querySelector('.tab-name');\r\n const currentName = tabNameSpan.textContent;\r\n const newName = prompt(\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u062c\u062f\u064a\u062f \u0644\u0644\u0645\u0634\u0631\u0648\u0639:\", currentName);\r\n if (newName && newName.trim() !== \"\") {\r\n tabNameSpan.textContent = newName.trim();\r\n const project = this.projects.find(p => p.id == tab.dataset.id);\r\n if (project) {\r\n project.name = newName.trim();\r\n this.saveProjects();\r\n }\r\n }\r\n }\r\n\r\n renderTabs() {\r\n if (!this.tabsContainer) return;\r\n \r\n this.tabsContainer.innerHTML = '';\r\n this.projects.forEach(project => {\r\n const tab = document.createElement('div');\r\n tab.className = `project-tab ${project.id === this.activeProjectId ? 'active' : ''}`;\r\n tab.dataset.id = project.id;\r\n tab.innerHTML = `<span class=\"tab-name\">${project.name}<\/span><span class=\"edit-name-btn\">\u270f\ufe0f<\/span><span class=\"delete-tab\">\u2716<\/span>`;\r\n tab.querySelector('.edit-name-btn').addEventListener('click', (e) => { e.stopPropagation(); this.renameProject(tab); });\r\n tab.querySelector('.delete-tab').addEventListener('click', (e) => { e.stopPropagation(); this.deleteProject(project.id); });\r\n tab.addEventListener('click', () => this.switchProject(project.id));\r\n this.tabsContainer.appendChild(tab);\r\n });\r\n const addTab = document.createElement('div');\r\n addTab.className = 'project-tab add-project-tab';\r\n addTab.textContent = '\u2795 \u0645\u0634\u0631\u0648\u0639 \u062c\u062f\u064a\u062f';\r\n addTab.onclick = () => this.startEmptyProject();\r\n this.tabsContainer.appendChild(addTab);\r\n }\r\n\r\n getEmptyProjectData() {\r\n return {\r\n contractorInfo: { name: '', phone: '' },\r\n prices: { waste: '10', addOns: '10' },\r\n settings: { skirtingHeight: '10', mortarThickness: '3' },\r\n materialControls: {\r\n enableGlue: true,\r\n enableGrout: true,\r\n gluePrice: '120',\r\n groutPrice: '80',\r\n defaultMethod: 'none' \/\/ \u0627\u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0627\u0644\u062c\u062f\u064a\u062f\r\n },\r\n workmanshipPrices: {\r\n wall: '60',\r\n floor: '50',\r\n skirting: '25'\r\n },\r\n areaGroups: [], \r\n workmanshipItems: [], \r\n transactions: [], \r\n paymentsEnabled: false,\r\n projectNotes: '',\r\n selectedTiles: [],\r\n confirmedTiles: [],\r\n collapsedSections: {\r\n areas: false,\r\n order: true,\r\n tiles: true,\r\n settings: true,\r\n workmanship: true,\r\n financial: true,\r\n guide: true\r\n }\r\n };\r\n }\r\n\r\n saveCurrentProjectState() {\r\n if (!this.activeProjectId) return;\r\n const project = this.projects.find(p => p.id === this.activeProjectId);\r\n if (!project) return;\r\n \r\n project.data = this.getCurrentStateAsObject();\r\n }\r\n \r\n getCurrentStateAsObject() {\r\n const state = {\r\n contractorInfo: { \r\n name: this.contractorInfo.name ? this.contractorInfo.name.value : '', \r\n phone: this.contractorInfo.phone ? this.contractorInfo.phone.value : '' \r\n },\r\n prices: {}, \r\n settings: {}, \r\n materialControls: {},\r\n workmanshipPrices: {},\r\n areaGroups: [], \r\n workmanshipItems: [], \r\n transactions: [],\r\n projectNotes: this.projectNotes ? this.projectNotes.value : '',\r\n selectedTiles: this.selectedTiles,\r\n confirmedTiles: this.confirmedTiles,\r\n collapsedSections: {}\r\n };\r\n \r\n const sections = ['areas', 'order', 'tiles', 'settings', 'workmanship', 'financial', 'guide'];\r\n sections.forEach(section => {\r\n const content = document.getElementById(`${section}-content`);\r\n state.collapsedSections[section] = content ? content.classList.contains('collapsed') : true;\r\n });\r\n \r\n Object.keys(this.priceInputs).forEach(key => {\r\n if (this.priceInputs[key]) state.prices[key] = this.priceInputs[key].value;\r\n });\r\n \r\n Object.keys(this.settings).forEach(key => {\r\n if (this.settings[key]) state.settings[key] = this.settings[key].value;\r\n });\r\n \r\n Object.keys(this.materialControls).forEach(key => {\r\n const control = this.materialControls[key];\r\n if (control) {\r\n if (control.type === 'checkbox') {\r\n state.materialControls[key] = control.checked;\r\n } else {\r\n state.materialControls[key] = control.value;\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u062d\u0641\u0638 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629\r\n state.workmanshipPrices = {\r\n wall: this.wallWorkmanshipPrice ? this.wallWorkmanshipPrice.value : '60',\r\n floor: this.floorWorkmanshipPrice ? this.floorWorkmanshipPrice.value : '50',\r\n skirting: this.skirtingWorkmanshipPrice ? this.skirtingWorkmanshipPrice.value : '25'\r\n };\r\n \r\n if (this.workmanshipItemsContainer) {\r\n this.workmanshipItemsContainer.querySelectorAll('.workmanship-item-card').forEach(item => {\r\n state.workmanshipItems.push({\r\n desc: item.querySelector('.item-desc')?.value || '', \r\n type: item.querySelector('.item-type-select')?.value || '',\r\n price: item.querySelector('.item-price')?.value || '',\r\n });\r\n });\r\n }\r\n \r\n if (this.financialDashboardContainer) {\r\n document.querySelectorAll('.transaction-item').forEach(item => {\r\n state.transactions.push({\r\n type: 'payment',\r\n amount: item.querySelector('.transaction-amount')?.value || '',\r\n date: item.querySelector('.transaction-date')?.value || '',\r\n description: item.querySelector('.transaction-desc')?.value || ''\r\n });\r\n });\r\n }\r\n\r\n state.areaGroups = [];\r\n if (this.areasContainer) {\r\n this.areasContainer.querySelectorAll('.area-group').forEach(group => {\r\n const groupData = {\r\n id: group.id,\r\n type: group.dataset.type,\r\n name: group.querySelector('.area-name')?.value || '',\r\n dim1: group.querySelector('.area-dim1')?.value || '',\r\n dim2: group.querySelector('.area-dim2')?.value || '',\r\n dim3: group.querySelector('.area-dim3')?.value || '',\r\n wallTileType: group.querySelector('.wall-tile-type')?.value || '',\r\n floorTileType: group.querySelector('.floor-tile-type')?.value || '',\r\n method: group.querySelector('.install-method')?.value || '',\r\n hasSkirting: group.querySelector('.has-skirting')?.checked || false,\r\n skirtingHeight: group.querySelector('.skirting-height')?.value || '',\r\n openings: [], \r\n skirtingDeductions: []\r\n };\r\n \r\n group.querySelectorAll('.openings .inline').forEach(op => {\r\n groupData.openings.push({ \r\n width: op.querySelector('.opening-width')?.value || '', \r\n height: op.querySelector('.opening-height')?.value || '', \r\n count: op.querySelector('.opening-count')?.value || '' \r\n });\r\n });\r\n \r\n group.querySelectorAll('.skirting-deductions .inline').forEach(ded => {\r\n groupData.skirtingDeductions.push({ \r\n length: ded.querySelector('.skirting-deduction-length')?.value || '', \r\n count: ded.querySelector('.skirting-deduction-count')?.value || '1'\r\n });\r\n });\r\n \r\n state.areaGroups.push(groupData);\r\n });\r\n }\r\n \r\n return state;\r\n }\r\n\r\n loadProjectState(projectId, shouldSave = true) {\r\n const project = this.projects.find(p => p.id === projectId);\r\n if (!project) return;\r\n const state = project.data;\r\n \r\n this.areasContainer.innerHTML = ''; \r\n this.workmanshipItemsContainer.innerHTML = ''; \r\n this.financialDashboardContainer.innerHTML = '';\r\n this.selectedTiles = [];\r\n this.confirmedTiles = [];\r\n \r\n if (this.projectNotes) this.projectNotes.value = state.projectNotes || '';\r\n \r\n if (this.contractorInfo.name) this.contractorInfo.name.value = state.contractorInfo.name || '';\r\n if (this.contractorInfo.phone) this.contractorInfo.phone.value = state.contractorInfo.phone || '';\r\n if (this.contractorInfo.callLink) this.contractorInfo.callLink.href = `tel:${state.contractorInfo.phone || ''}`;\r\n \r\n Object.keys(state.prices).forEach(key => { \r\n if (this.priceInputs[key]) this.priceInputs[key].value = state.prices[key]; \r\n });\r\n \r\n Object.keys(state.settings).forEach(key => { \r\n if (this.settings[key]) this.settings[key].value = state.settings[key]; \r\n });\r\n \r\n Object.keys(state.materialControls || {}).forEach(key => {\r\n const control = this.materialControls[key];\r\n if (control) {\r\n if (control.type === 'checkbox') {\r\n control.checked = state.materialControls[key];\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0638\u0647\u0631 \u0627\u0644\u062d\u0642\u0648\u0644\r\n if (key === 'enableGlue') {\r\n document.getElementById('glue-control').style.opacity = control.checked ? '1' : '0.5';\r\n }\r\n if (key === 'enableGrout') {\r\n document.getElementById('grout-control').style.opacity = control.checked ? '1' : '0.5';\r\n }\r\n } else {\r\n control.value = state.materialControls[key];\r\n }\r\n }\r\n });\r\n \r\n \/\/ \u062a\u062d\u0645\u064a\u0644 \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629\r\n if (state.workmanshipPrices) {\r\n if (this.wallWorkmanshipPrice) this.wallWorkmanshipPrice.value = state.workmanshipPrices.wall || '60';\r\n if (this.floorWorkmanshipPrice) this.floorWorkmanshipPrice.value = state.workmanshipPrices.floor || '50';\r\n if (this.skirtingWorkmanshipPrice) this.skirtingWorkmanshipPrice.value = state.workmanshipPrices.skirting || '25';\r\n }\r\n \r\n if (state.workmanshipItems) {\r\n state.workmanshipItems.forEach(itemData => this.addWorkmanshipItem(itemData));\r\n }\r\n \r\n if (state.transactions && state.transactions.length > 0) {\r\n this.addTransaction();\r\n setTimeout(() => {\r\n state.transactions.forEach(transData => {\r\n this.addTransactionItem(transData.type, transData);\r\n });\r\n }, 100);\r\n }\r\n \r\n if (state.areaGroups && state.areaGroups.length > 0) {\r\n state.areaGroups.forEach(groupData => this.addSmartArea(groupData.type, groupData));\r\n }\r\n \r\n if (state.selectedTiles) {\r\n this.selectedTiles = state.selectedTiles;\r\n }\r\n \r\n if (state.confirmedTiles) {\r\n this.confirmedTiles = state.confirmedTiles;\r\n }\r\n \r\n if (state.collapsedSections) {\r\n Object.keys(state.collapsedSections).forEach(section => {\r\n if (!state.collapsedSections[section]) {\r\n this.toggleSection(section, true);\r\n }\r\n });\r\n }\r\n \r\n setTimeout(() => {\r\n this.updateTileShowroom();\r\n this.updateTileOrder();\r\n if (shouldSave) this.calculateAll();\r\n }, 500);\r\n }\r\n\r\n deleteAllData() { \r\n if (confirm(\"\u062a\u062d\u0630\u064a\u0631: \u0633\u064a\u062a\u0645 \u062d\u0630\u0641 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0648\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0634\u0643\u0644 \u0646\u0647\u0627\u0626\u064a.\")) { \r\n localStorage.removeItem(this.STORAGE_KEY); \r\n window.location.reload(); \r\n } \r\n }\r\n\r\n startEmptyProject() {\r\n const projectName = prompt(\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u062c\u062f\u064a\u062f:\", `\u0645\u0634\u0631\u0648\u0639 ${this.projects.length + 1}`);\r\n if (projectName) {\r\n this.addNewProject(projectName, this.getEmptyProjectData());\r\n }\r\n }\r\n\r\n startSampleProject() {\r\n const projectName = prompt(\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\u064a:\", \"\u0634\u0642\u0629 \u0646\u0645\u0648\u0630\u062c\u064a\u0629 3 \u063a\u0631\u0641\");\r\n if (projectName) {\r\n const sampleData = this.getSampleProjectData();\r\n this.addNewProject(projectName, sampleData);\r\n }\r\n }\r\n\r\n getSampleProjectData() {\r\n return {\r\n contractorInfo: { name: '\u0645\u0642\u0627\u0648\u0644 \u0645\u062d\u0645\u062f \u0623\u062d\u0645\u062f', phone: '01012345678' },\r\n prices: { waste: '10', addOns: '15' },\r\n settings: { skirtingHeight: '12', mortarThickness: '3' },\r\n materialControls: {\r\n enableGlue: true,\r\n enableGrout: true,\r\n gluePrice: '120',\r\n groutPrice: '80',\r\n defaultMethod: 'none'\r\n },\r\n workmanshipPrices: {\r\n wall: '60',\r\n floor: '50',\r\n skirting: '25'\r\n },\r\n areaGroups: [\r\n {\r\n id: 'area-1',\r\n type: 'living',\r\n name: '\u0635\u0627\u0644\u0629 \u0645\u0639\u064a\u0634\u0629',\r\n dim1: '5',\r\n dim2: '4',\r\n floorTileType: '\u0628\u0648\u0631\u0633\u0644\u064a\u0646 - \u0643\u0644\u064a\u0648\u0628\u0627\u062a\u0631\u0627',\r\n method: 'default',\r\n hasSkirting: true,\r\n skirtingHeight: '12',\r\n openings: [\r\n { width: '0.9', height: '2.2', count: '1' },\r\n { width: '1.2', height: '1.5', count: '1' }\r\n ],\r\n skirtingDeductions: [\r\n { length: '0.9', count: '1' }\r\n ]\r\n },\r\n {\r\n id: 'area-2',\r\n type: 'bathroom',\r\n name: '\u062d\u0645\u0627\u0645 \u0631\u0626\u064a\u0633\u064a',\r\n dim1: '2.5',\r\n dim2: '1.8',\r\n dim3: '2.4',\r\n wallTileType: '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631 - \u0627\u0644\u0633\u0631\u0627\u0645\u064a\u0643',\r\n floorTileType: '\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0635\u063a\u064a\u0631 - \u0627\u0644\u0633\u0631\u0627\u0645\u064a\u0643',\r\n method: 'default',\r\n hasSkirting: false,\r\n openings: [\r\n { width: '0.7', height: '2', count: '1' }\r\n ]\r\n }\r\n ],\r\n workmanshipItems: [\r\n { desc: '\u0645\u0635\u0646\u0639\u064a\u0629 \u0628\u0648\u0631\u0633\u0644\u064a\u0646 \u0623\u0631\u0636\u064a\u0627\u062a', type: 'porcelain_work', price: '80' },\r\n { desc: '\u0645\u0635\u0646\u0639\u064a\u0629 \u0648\u0632\u0631', type: 'skirting_work', price: '25' },\r\n { desc: '\u0645\u0635\u0646\u0639\u064a\u0629 \u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u062d\u0648\u0627\u0626\u0637 \u062d\u0645\u0627\u0645', type: 'wall_work', price: '60' }\r\n ],\r\n transactions: [\r\n { type: 'payment', amount: '5000', date: new Date().toISOString().split('T')[0], description: '\u0639\u0631\u0628\u0648\u0646' }\r\n ],\r\n projectNotes: '\u0645\u0634\u0631\u0648\u0639 \u0634\u0642\u0629 \u0646\u0645\u0648\u0630\u062c\u064a\u0629 \u0645\u0639 \u0627\u062e\u062a\u064a\u0627\u0631\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 \u0644\u0644\u0628\u0644\u0627\u0637',\r\n selectedTiles: [],\r\n confirmedTiles: [],\r\n collapsedSections: {\r\n areas: false,\r\n order: true,\r\n tiles: true,\r\n settings: true,\r\n workmanship: true,\r\n financial: true,\r\n guide: true\r\n }\r\n };\r\n }\r\n\r\n exportProject() {\r\n const project = this.projects.find(p => p.id === this.activeProjectId);\r\n if (!project) return;\r\n \r\n this.saveCurrentProjectState();\r\n \r\n const projectData = {\r\n version: '1.8.2',\r\n exportDate: new Date().toISOString(),\r\n project: project\r\n };\r\n \r\n const dataStr = JSON.stringify(projectData, null, 2);\r\n const dataBlob = new Blob([dataStr], {type: 'application\/json'});\r\n const url = URL.createObjectURL(dataBlob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `\u0645\u0634\u0631\u0648\u0639_\u0633\u064a\u0631\u0627\u0645\u064a\u0643_${project.name}_${new Date().toISOString().split('T')[0]}.json`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n \r\n alert(`\u062a\u0645 \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \"${project.name}\" \u0628\u0646\u062c\u0627\u062d`);\r\n }\r\n\r\n importProject() {\r\n const input = document.createElement('input');\r\n input.type = 'file';\r\n input.accept = '.json';\r\n input.onchange = (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n \r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const importedData = JSON.parse(e.target.result);\r\n if (!importedData.project || !importedData.project.data) {\r\n throw new Error('\u0645\u0644\u0641 \u063a\u064a\u0631 \u0635\u0627\u0644\u062d');\r\n }\r\n \r\n if (confirm(`\u0647\u0644 \u062a\u0631\u064a\u062f \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \"${importedData.project.name}\"\u061f`)) {\r\n const newProjectId = Date.now();\r\n const newProject = {\r\n id: newProjectId,\r\n name: importedData.project.name,\r\n data: importedData.project.data\r\n };\r\n \r\n this.projects.push(newProject);\r\n this.saveProjects();\r\n this.switchProject(newProjectId);\r\n alert(`\u062a\u0645 \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \"${newProject.name}\" \u0628\u0646\u062c\u0627\u062d`);\r\n }\r\n } catch (error) {\r\n alert('\u062e\u0637\u0623 \u0641\u064a \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0627\u0644\u0645\u0644\u0641. \u062a\u0623\u0643\u062f \u0645\u0646 \u0635\u062d\u0629 \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u0644\u0641.');\r\n console.error('Import error:', error);\r\n }\r\n };\r\n reader.readAsText(file);\r\n };\r\n input.click();\r\n }\r\n\r\n openSmartAreaModal() {\r\n if (this.smartAreaModal) {\r\n this.smartAreaModal.style.display = 'block';\r\n }\r\n }\r\n\r\n addSmartArea(type, data = {}) {\r\n this.areaCounter++;\r\n const areaId = data.id || `area-${this.areaCounter}`;\r\n const group = document.createElement('div');\r\n group.className = 'area-group';\r\n group.id = areaId;\r\n group.dataset.type = type;\r\n\r\n const name = data.name || this.getDefaultAreaName(type);\r\n const isCombined = type === 'bathroom' || type === 'kitchen';\r\n\r\n let dimensionsHTML = '';\r\n if (isCombined) {\r\n dimensionsHTML = `\r\n <div class=\"form-group\"><label>\u0637\u0648\u0644 \u0627\u0644\u063a\u0631\u0641\u0629 (\u0645)<\/label><input class=\"area-dim1\" type=\"number\" value=\"${data.dim1 || ''}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0639\u0631\u0636 \u0627\u0644\u063a\u0631\u0641\u0629 (\u0645)<\/label><input class=\"area-dim2\" type=\"number\" value=\"${data.dim2 || ''}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 (\u0645)<\/label><input class=\"area-dim3\" type=\"number\" value=\"${data.dim3 || ''}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n `;\r\n } else {\r\n dimensionsHTML = `\r\n <div class=\"form-group\"><label>\u0627\u0644\u0637\u0648\u0644 (\u0645)<\/label><input class=\"area-dim1\" type=\"number\" value=\"${data.dim1 || ''}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0639\u0631\u0636 (\u0645)<\/label><input class=\"area-dim2\" type=\"number\" value=\"${data.dim2 || ''}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n `;\r\n }\r\n\r\n let pricesHTML = '';\r\n if (isCombined) {\r\n const wallTileType = data.wallTileType || '';\r\n const floorTileType = data.floorTileType || '';\r\n \r\n pricesHTML = `\r\n <div class=\"form-group\" style=\"background-color: #f0f8ff; padding: 5px; border-radius: 6px;\">\r\n <label style=\"font-weight:bold;\">\u0646\u0648\u0639 \u0628\u0644\u0627\u0637 \u0627\u0644\u062d\u0648\u0627\u0626\u0637<\/label>\r\n <input class=\"wall-tile-type\" type=\"text\" value=\"${wallTileType}\" placeholder=\"\u0633\u064a\u062a\u0645 \u062a\u0639\u0628\u0626\u062a\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b\" readonly style=\"background: #f0f0f0; text-align: center;\">\r\n <\/div>\r\n <div class=\"form-group\" style=\"background-color: #f0f8ff; padding: 5px; border-radius: 6px;\">\r\n <label style=\"font-weight:bold;\">\u0646\u0648\u0639 \u0628\u0644\u0627\u0637 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a<\/label>\r\n <input class=\"floor-tile-type\" type=\"text\" value=\"${floorTileType}\" placeholder=\"\u0633\u064a\u062a\u0645 \u062a\u0639\u0628\u0626\u062a\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b\" readonly style=\"background: #f0f0f0; text-align: center;\">\r\n <\/div>\r\n `;\r\n } else {\r\n const floorTileType = data.floorTileType || '';\r\n \r\n pricesHTML = `\r\n <div class=\"form-group\" style=\"background-color: #f0f8ff; padding: 5px; border-radius: 6px;\">\r\n <label style=\"font-weight:bold;\">\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645<\/label>\r\n <input class=\"floor-tile-type\" type=\"text\" value=\"${floorTileType}\" placeholder=\"\u0633\u064a\u062a\u0645 \u062a\u0639\u0628\u0626\u062a\u0647 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b\" readonly style=\"background: #f0f0f0; text-align: center;\">\r\n <\/div>\r\n `;\r\n }\r\n\r\n const skirtingHeight = data.skirtingHeight || this.settings.skirtingHeight.value || '10';\r\n const skirtingCheckboxHTML = !isCombined ? `\r\n <div class=\"checkbox-group\" style=\"justify-content: flex-start;\">\r\n <input type=\"checkbox\" class=\"has-skirting\" id=\"skirting-${areaId}\" ${data.hasSkirting ? 'checked' : ''}>\r\n <label for=\"skirting-${areaId}\">\u0647\u0644 \u064a\u0648\u062c\u062f \u0648\u0632\u0631\u061f<\/label>\r\n <\/div>` : '';\r\n\r\n const skirtingHeightControl = !isCombined ? `\r\n <div class=\"form-group\" style=\"display: ${data.hasSkirting ? 'block' : 'none'};\">\r\n <label style=\"font-size:12px;\">\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0648\u0632\u0631 (\u0633\u0645)<\/label>\r\n <input class=\"skirting-height\" type=\"number\" value=\"${skirtingHeight}\" min=\"5\" max=\"30\" step=\"0.5\" style=\"padding: 6px; font-size: 13px;\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\">\r\n <\/div>` : '';\r\n\r\n const defaultMethod = this.materialControls.defaultMethod?.value || 'none';\r\n \r\n group.innerHTML = `\r\n <h4>\r\n <span class=\"area-type-badge\">${this.getDefaultAreaName(type)}<\/span>\r\n ${name}\r\n <button class=\"del-area\">\u2716<\/button>\r\n <\/h4>\r\n <div class=\"inline\">\r\n <div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u0627\u062d\u0629<\/label><input class=\"area-name\" type=\"text\" value=\"${name}\" class=\"validate-input\" data-validate=\"text\"><\/div>\r\n ${dimensionsHTML}\r\n <\/div>\r\n <div class=\"details-section\">\r\n <div class=\"inline\">\r\n ${pricesHTML}\r\n <div class=\"form-group\"><label>\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0628<\/label>\r\n <select class=\"install-method\">\r\n <option value=\"default\" ${data.method === 'default' || !data.method ? 'selected' : ''}>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a<\/option>\r\n <option value=\"none\" ${data.method === 'none' ? 'selected' : ''}>\u0644\u0627 \u0623\u0631\u064a\u062f \u0645\u0648\u0627\u062f \u062a\u0631\u0643\u064a\u0628<\/option>\r\n <option value=\"mortar\" ${data.method === 'mortar' ? 'selected' : ''}>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0648\u0646\u0629 \u0627\u0644\u0623\u0633\u0645\u0646\u062a\u064a\u0629<\/option>\r\n <option value=\"glue\" ${data.method === 'glue' ? 'selected' : ''}>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0628\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"details-section\">\r\n <div class=\"inline\">\r\n <div style=\"flex: 2;\">\r\n <h5>\u062e\u0635\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (\u0623\u0628\u0648\u0627\u0628\/\u0646\u0648\u0627\u0641\u0630)<\/h5>\r\n <div class=\"openings\"><\/div>\r\n <button class=\"add add-opening\">\u2795 \u062e\u0635\u0645 \u0645\u0633\u0627\u062d\u0629<\/button>\r\n <\/div>\r\n <div style=\"flex: 2; border-right: 2px solid #eee; padding-right: 15px; display: ${!isCombined ? 'block' : 'none'};\">\r\n ${skirtingCheckboxHTML}\r\n ${skirtingHeightControl}\r\n <div class=\"skirting-deductions\"><\/div>\r\n <button class=\"add add-skirting-deduction\" style=\"display: ${data.hasSkirting ? 'inline-block' : 'none'};\">\u2795 \u062e\u0635\u0645 \u0645\u0646 \u0627\u0644\u0648\u0632\u0631<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tile-selection-status\">\r\n <div>\r\n <span class=\"${this.selectedTiles.some(t => t.areaId === areaId && t.confirmed) ? 'selected' : 'not-selected'}\">\r\n ${this.selectedTiles.some(t => t.areaId === areaId && t.confirmed) ? '\u2713 \u0627\u0644\u0628\u0644\u0627\u0637 \u0645\u0624\u0643\u062f \u0644\u0644\u062a\u0646\u0641\u064a\u0630' : '\u2717 \u0644\u0645 \u064a\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0628\u0644\u0627\u0637'}\r\n <\/span>\r\n <\/div>\r\n <button class=\"add\" onclick=\"calculator.openTileSelectionModal(); calculator.tileAreaSelect.value='${areaId}'; calculator.updateAreaInfo();\" style=\"padding: 5px 10px; font-size: 12px;\">\r\n ${this.selectedTiles.some(t => t.areaId === areaId) ? '\u0625\u0636\u0627\u0641\u0629 \u062e\u064a\u0627\u0631 \u0628\u0644\u0627\u0637' : '\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0628\u0644\u0627\u0637'}\r\n <\/button>\r\n <\/div>\r\n <div class=\"area-summary\" style=\"display:none;\"><\/div>\r\n `;\r\n \r\n this.areasContainer.appendChild(group);\r\n\r\n const skirtingCheckbox = group.querySelector('.has-skirting');\r\n if (skirtingCheckbox) {\r\n skirtingCheckbox.addEventListener('change', (e) => {\r\n const skirtingHeightControl = group.querySelector('.skirting-height')?.parentElement;\r\n if (skirtingHeightControl) skirtingHeightControl.style.display = e.target.checked ? 'block' : 'none';\r\n group.querySelector('.add-skirting-deduction').style.display = e.target.checked ? 'inline-block' : 'none';\r\n this.calculateAll();\r\n });\r\n }\r\n\r\n const skirtingHeightInput = group.querySelector('.skirting-height');\r\n if (skirtingHeightInput) {\r\n skirtingHeightInput.addEventListener('input', () => this.calculateAll());\r\n }\r\n\r\n if (data.openings) data.openings.forEach(opData => this.addOpening(group, opData));\r\n if (data.skirtingDeductions) data.skirtingDeductions.forEach(dedData => this.addSkirtingDeduction(group, dedData));\r\n \r\n this.calculateAll();\r\n }\r\n\r\n getDefaultAreaName(type) {\r\n const names = {\r\n 'bathroom': '\ud83d\udec1 \u062d\u0645\u0627\u0645',\r\n 'kitchen': '\ud83c\udf73 \u0645\u0637\u0628\u062e',\r\n 'room': '\ud83d\udecb\ufe0f \u063a\u0631\u0641\u0629',\r\n 'hallway': '\ud83d\udeb6\u200d\u2642\ufe0f \u0637\u0631\u0642\u0629',\r\n 'living': '\ud83d\udecb\ufe0f \u0645\u0639\u064a\u0634\u0629',\r\n 'custom': '\ud83c\udfde\ufe0f \u0645\u062e\u0635\u0635'\r\n };\r\n return names[type] || '\u0645\u0633\u0627\u062d\u0629';\r\n }\r\n\r\n addOpening(group, data = {}) {\r\n const box = group.querySelector(\".openings\");\r\n box.insertAdjacentHTML(\"beforeend\", `\r\n <div class=\"inline\">\r\n <div class=\"form-group\"><label>\u0639\u0631\u0636 \u0627\u0644\u062e\u0635\u0645<\/label><input class=\"opening-width\" type=\"number\" value=\"${data.width || 0.9}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u062e\u0635\u0645<\/label><input class=\"opening-height\" type=\"number\" value=\"${data.height || 2.2}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0639\u062f\u062f<\/label><input class=\"opening-count\" type=\"number\" value=\"${data.count || 1}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <button class=\"del-opening\">\u2716<\/button>\r\n <\/div>`);\r\n }\r\n\r\n addSkirtingDeduction(group, data = {}) {\r\n const box = group.querySelector(\".skirting-deductions\");\r\n box.insertAdjacentHTML(\"beforeend\", `\r\n <div class=\"inline\">\r\n <div class=\"form-group\"><label>\u0637\u0648\u0644 \u0627\u0644\u062e\u0635\u0645 (\u0645)<\/label><input class=\"skirting-deduction-length\" type=\"number\" value=\"${data.length || 0.9}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0639\u062f\u062f<\/label><input class=\"skirting-deduction-count\" type=\"number\" value=\"${data.count || 1}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>\r\n <button class=\"del-skirting-deduction\">\u2716<\/button>\r\n <\/div>`);\r\n }\r\n\r\n addWorkmanshipItem(data = {}) {\r\n this.workmanshipItemCounter++;\r\n const itemId = `item-${this.workmanshipItemCounter}`;\r\n const itemHTML = `\r\n <div class=\"workmanship-item-card\" id=\"${itemId}\">\r\n <button class=\"del-item\">\u2716<\/button>\r\n <div class=\"inline\">\r\n <div class=\"form-group\" style=\"flex: 2;\"><label>\u0648\u0635\u0641 \u0627\u0644\u0628\u0646\u062f<\/label><input class=\"item-desc\" type=\"text\" value=\"${data.desc || ''}\" placeholder=\"\u0645\u062b\u0627\u0644: \u0645\u0635\u0646\u0639\u064a\u0629 \u0628\u0648\u0631\u0633\u0644\u064a\u0646 \u0623\u0631\u0636\u064a\u0627\u062a\" class=\"validate-input\" data-validate=\"text\"><\/div>\r\n <div class=\"form-group\"><label>\u0646\u0648\u0639 \u0627\u0644\u0628\u0646\u062f<\/label>\r\n <select class=\"item-type-select\">\r\n <option value=\"wall_work\" ${data.type === 'wall_work' ? 'selected' : ''}>\u0645\u0635\u0646\u0639\u064a\u0629 \u062d\u0648\u0627\u0626\u0637 (\u0645\u00b2)<\/option>\r\n <option value=\"floor_small_work\" ${data.type === 'floor_small_work' ? 'selected' : ''}>\u0645\u0635\u0646\u0639\u064a\u0629 \u0623\u0631\u0636\u064a\u0627\u062a \u0635\u063a\u064a\u0631\u0629 (\u0645\u00b2)<\/option>\r\n <option value=\"floor_large_work\" ${data.type === 'floor_large_work' ? 'selected' : ''}>\u0645\u0635\u0646\u0639\u064a\u0629 \u0623\u0631\u0636\u064a\u0627\u062a \u0643\u0628\u064a\u0631\u0629 (\u0645\u00b2)<\/option>\r\n <option value=\"porcelain_work\" ${data.type === 'porcelain_work' ? 'selected' : ''}>\u0645\u0635\u0646\u0639\u064a\u0629 \u0628\u0648\u0631\u0633\u0644\u064a\u0646 (\u0645\u00b2)<\/option>\r\n <option value=\"skirting_work\" ${data.type === 'skirting_work' ? 'selected' : ''}>\u0645\u0635\u0646\u0639\u064a\u0629 \u0648\u0632\u0631 (\u0645.\u0637)<\/option>\r\n <option value=\"lump_sum\" ${data.type === 'lump_sum' ? 'selected' : ''}>\u0645\u0635\u0631\u0648\u0641\u0627\u062a (\u0645\u0642\u0637\u0648\u0639\u0629)<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"inline item-fields-container\"><\/div>\r\n <div class=\"item-total-summary\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0628\u0646\u062f: <span class=\"item-total\">0.00<\/span> \u062c\u0646\u064a\u0647<\/div>\r\n <\/div>`;\r\n this.workmanshipItemsContainer.insertAdjacentHTML('beforeend', itemHTML);\r\n const newItem = document.getElementById(itemId);\r\n newItem.querySelector('.item-type-select').addEventListener('change', (e) => this.updateWorkmanshipItemUI(e.target.closest('.workmanship-item-card')));\r\n this.updateWorkmanshipItemUI(newItem, data);\r\n }\r\n\r\n updateWorkmanshipItemUI(itemCard, data = {}) {\r\n const type = itemCard.querySelector('.item-type-select').value;\r\n const fieldsContainer = itemCard.querySelector('.item-fields-container');\r\n let fieldsHTML = '';\r\n const totals = this.calculationTotals;\r\n const priceValue = (defaultPrice) => data && data.price ? data.price : defaultPrice;\r\n\r\n switch (type) {\r\n case 'wall_work':\r\n fieldsHTML = `<div class=\"form-group\"><label>\u0627\u0644\u0633\u0639\u0631 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639)<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(60)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629<\/label><input class=\"item-quantity\" type=\"text\" value=\"${(totals.wallArea || 0).toFixed(2)} \u0645\u00b2\" readonly><\/div>`;\r\n break;\r\n case 'floor_small_work':\r\n fieldsHTML = `<div class=\"form-group\"><label>\u0627\u0644\u0633\u0639\u0631 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639)<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(50)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629<\/label><input class=\"item-quantity\" type=\"text\" value=\"${(totals.floorSmallArea || 0).toFixed(2)} \u0645\u00b2\" readonly><\/div>`;\r\n break;\r\n case 'floor_large_work':\r\n fieldsHTML = `<div class=\"form-group\"><label>\u0627\u0644\u0633\u0639\u0631 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639)<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(70)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629<\/label><input class=\"item-quantity\" type=\"text\" value=\"${(totals.floorLargeArea || 0).toFixed(2)} \u0645\u00b2\" readonly><\/div>`;\r\n break;\r\n case 'porcelain_work':\r\n fieldsHTML = `<div class=\"form-group\"><label>\u0627\u0644\u0633\u0639\u0631 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0645\u0631\u0628\u0639)<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(80)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629<\/label><input class=\"item-quantity\" type=\"text\" value=\"${(totals.porcelainArea || 0).toFixed(2)} \u0645\u00b2\" readonly><\/div>`;\r\n break;\r\n case 'skirting_work':\r\n fieldsHTML = `<div class=\"form-group\"><label>\u0627\u0644\u0633\u0639\u0631 (\u0644\u0644\u0645\u062a\u0631 \u0627\u0644\u0637\u0648\u0644\u064a)<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(25)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629<\/label><input class=\"item-quantity\" type=\"text\" value=\"${(totals.totalPerimeter || 0).toFixed(2)} \u0645.\u0637\" readonly><\/div>`;\r\n break;\r\n case 'lump_sum':\r\n fieldsHTML = `<div class=\"form-group\" style=\"flex: 1;\"><label>\u0627\u0644\u0645\u0628\u0644\u063a \u0627\u0644\u0645\u0642\u0637\u0648\u0639<\/label><input class=\"item-price\" type=\"number\" value=\"${priceValue(0)}\" onclick=\"this.select()\" class=\"validate-input\" data-validate=\"number\"><\/div>`;\r\n break;\r\n }\r\n fieldsContainer.innerHTML = fieldsHTML;\r\n \r\n itemCard.querySelectorAll('input').forEach(input => {\r\n input.addEventListener('input', () => this.calculateAll());\r\n });\r\n }\r\n\r\n calculateAll(shouldSave = true) {\r\n this.summaryBody.innerHTML = \"\"; \r\n this.summaryFoot.innerHTML = \"\"; \r\n this.explanationContainer.innerHTML = \"\"; \r\n this.purchaseOrderList.innerHTML = \"\";\r\n \r\n const areaGroups = this.areasContainer.querySelectorAll(\".area-group\");\r\n if (areaGroups.length === 0) {\r\n this.summaryDiv.style.display = \"none\"; \r\n this.finalControls.style.display = \"none\"; \r\n if (shouldSave) this.saveProjects(); \r\n return;\r\n }\r\n\r\n const mortarThickness = (parseFloat(this.settings.mortarThickness?.value) || 3) \/ 100;\r\n const prices = {\r\n waste: (parseFloat(this.priceInputs.waste?.value) || 0) \/ 100,\r\n };\r\n\r\n \/\/ \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f\r\n const enableGlue = this.materialControls.enableGlue?.checked || true;\r\n const enableGrout = this.materialControls.enableGrout?.checked || true;\r\n const defaultMethod = this.materialControls.defaultMethod?.value || 'none';\r\n const gluePrice = parseFloat(this.materialControls.gluePrice?.value) || 120;\r\n const groutPrice = parseFloat(this.materialControls.groutPrice?.value) || 80;\r\n\r\n \/\/ \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0645\u0627\u0644\u0629\r\n const wallWorkmanshipPrice = parseFloat(this.wallWorkmanshipPrice?.value) || 60;\r\n const floorWorkmanshipPrice = parseFloat(this.floorWorkmanshipPrice?.value) || 50;\r\n const skirtingWorkmanshipPrice = parseFloat(this.skirtingWorkmanshipPrice?.value) || 25;\r\n\r\n let total = {\r\n wallArea: 0, \r\n floorSmallArea: 0, \r\n floorLargeArea: 0, \r\n porcelainArea: 0, \r\n totalPerimeter: 0,\r\n skirtingArea: 0,\r\n purchaseOrder: {},\r\n glueBags: 0, \r\n groutBags: 0, \r\n mortarVolume: 0,\r\n costs: { \r\n tiles: 0, \r\n glue: 0, \r\n grout: 0, \r\n mortarCement: 0, \r\n mortarSand: 0, \r\n totalMaterials: 0 \r\n },\r\n workmanship: {\r\n wall: 0,\r\n floor: 0,\r\n skirting: 0,\r\n total: 0\r\n }\r\n };\r\n\r\n areaGroups.forEach(group => {\r\n const name = group.querySelector('.area-name')?.value || '\u0645\u0633\u0627\u062d\u0629 \u063a\u064a\u0631 \u0645\u0633\u0645\u0627\u0629';\r\n const type = group.dataset.type;\r\n const dim1 = parseFloat(group.querySelector('.area-dim1')?.value) || 0;\r\n const dim2 = parseFloat(group.querySelector('.area-dim2')?.value) || 0;\r\n const dim3 = parseFloat(group.querySelector('.area-dim3')?.value) || 0;\r\n const installMethodSelect = group.querySelector('.install-method');\r\n const installMethod = installMethodSelect ? installMethodSelect.value : 'default';\r\n const actualMethod = installMethod === 'default' ? defaultMethod : installMethod;\r\n const hasSkirting = group.querySelector('.has-skirting')?.checked;\r\n const skirtingHeightInput = group.querySelector('.skirting-height');\r\n const skirtingHeight = skirtingHeightInput ? parseFloat(skirtingHeightInput.value) : parseFloat(this.settings.skirtingHeight?.value);\r\n const skirtingHeightMeters = skirtingHeight \/ 100;\r\n\r\n let openingsArea = 0;\r\n group.querySelectorAll('.openings .inline').forEach(op => {\r\n const width = parseFloat(op.querySelector('.opening-width')?.value) || 0;\r\n const height = parseFloat(op.querySelector('.opening-height')?.value) || 0;\r\n const count = parseFloat(op.querySelector('.opening-count')?.value) || 0;\r\n openingsArea += width * height * count;\r\n });\r\n \r\n let skirtingDeductionLength = 0;\r\n group.querySelectorAll('.skirting-deductions .inline').forEach(ded => {\r\n const length = parseFloat(ded.querySelector('.skirting-deduction-length')?.value) || 0;\r\n const count = parseFloat(ded.querySelector('.skirting-deduction-count')?.value) || 0;\r\n skirtingDeductionLength += length * count;\r\n });\r\n\r\n let netWallArea = 0, netFloorArea = 0, skirtingPerimeter = 0, skirtingArea = 0;\r\n let groupTotalCost = 0, totalTileCostForGroup = 0;\r\n let tileManufacturer = '-';\r\n let wallTileTypeName = '\u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n let floorTileTypeName = '\u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n let wallTilePrice = 0;\r\n let floorTilePrice = 0;\r\n let accessoryCost = 0;\r\n \r\n \/\/ \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f \u0644\u0647\u0630\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629\r\n const confirmedTileForArea = this.confirmedTiles.find(t => t.areaId === group.id);\r\n \r\n if (!total.purchaseOrder[name]) {\r\n total.purchaseOrder[name] = { wall: 0, floor: 0, skirting: 0, accessories: 0 };\r\n }\r\n\r\n if (type === 'bathroom' || type === 'kitchen') {\r\n const perimeter = (dim1 + dim2) * 2;\r\n netWallArea = Math.max(0, (perimeter * dim3) - openingsArea);\r\n netFloorArea = dim1 * dim2;\r\n \r\n if (confirmedTileForArea) {\r\n tileManufacturer = confirmedTileForArea.manufacturer || '-';\r\n wallTileTypeName = this.getTileTypeName(confirmedTileForArea.wallTileType);\r\n floorTileTypeName = this.getTileTypeName(confirmedTileForArea.floorTileType);\r\n wallTilePrice = confirmedTileForArea.wallTilePrice || 0;\r\n floorTilePrice = confirmedTileForArea.floorTilePrice || 0;\r\n accessoryCost = confirmedTileForArea.accessoryCost || 0;\r\n }\r\n \r\n total.wallArea += netWallArea;\r\n total.floorSmallArea += netFloorArea;\r\n\r\n const wallTilesWithWaste = netWallArea * (1 + prices.waste);\r\n const floorTilesWithWaste = netFloorArea * (1 + prices.waste);\r\n \r\n total.purchaseOrder[name].wall += wallTilesWithWaste;\r\n total.purchaseOrder[name].floor += floorTilesWithWaste;\r\n if (confirmedTileForArea?.accessoryArea > 0) {\r\n total.purchaseOrder[name].accessories += confirmedTileForArea.accessoryArea;\r\n }\r\n\r\n const wallTileCost = wallTilesWithWaste * wallTilePrice;\r\n const floorTileCost = floorTilesWithWaste * floorTilePrice;\r\n totalTileCostForGroup = wallTileCost + floorTileCost + accessoryCost;\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629\r\n total.workmanship.wall += netWallArea * wallWorkmanshipPrice;\r\n total.workmanship.floor += netFloorArea * floorWorkmanshipPrice;\r\n \r\n } else {\r\n netFloorArea = Math.max(0, (dim1 * dim2) - openingsArea);\r\n \r\n if (confirmedTileForArea) {\r\n tileManufacturer = confirmedTileForArea.manufacturer || '-';\r\n floorTileTypeName = this.getTileTypeName(confirmedTileForArea.floorTileType);\r\n floorTilePrice = confirmedTileForArea.floorTilePrice || 0;\r\n accessoryCost = confirmedTileForArea.accessoryCost || 0;\r\n }\r\n \r\n const perimeter = (dim1 + dim2) * 2;\r\n skirtingPerimeter = hasSkirting ? Math.max(0, perimeter - skirtingDeductionLength) : 0;\r\n skirtingArea = skirtingPerimeter * skirtingHeightMeters;\r\n total.totalPerimeter += skirtingPerimeter;\r\n total.skirtingArea += skirtingArea;\r\n \r\n total.floorSmallArea += netFloorArea;\r\n\r\n const floorTilesWithWaste = netFloorArea * (1 + prices.waste);\r\n const skirtingTilesWithWaste = skirtingArea * (1 + prices.waste);\r\n \r\n total.purchaseOrder[name].floor += floorTilesWithWaste;\r\n total.purchaseOrder[name].skirting += skirtingTilesWithWaste;\r\n if (confirmedTileForArea?.accessoryArea > 0) {\r\n total.purchaseOrder[name].accessories += confirmedTileForArea.accessoryArea;\r\n }\r\n\r\n const floorTileCost = floorTilesWithWaste * floorTilePrice;\r\n const skirtingTileCost = skirtingTilesWithWaste * floorTilePrice; \/\/ \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0639\u0631 \u0623\u0631\u0636\u064a\u0627\u062a \u0644\u0644\u0648\u0632\u0631\r\n totalTileCostForGroup = floorTileCost + skirtingTileCost + accessoryCost;\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629\r\n total.workmanship.floor += netFloorArea * floorWorkmanshipPrice;\r\n total.workmanship.skirting += skirtingPerimeter * skirtingWorkmanshipPrice;\r\n }\r\n\r\n let otherMaterialsCost = 0;\r\n const materialArea = netWallArea + netFloorArea + skirtingArea;\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u062d\u0633\u0628 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a\r\n if (actualMethod !== 'none') {\r\n if (actualMethod === 'glue' && enableGlue) {\r\n const bags = materialArea \/ 5; \r\n const glueCost = Math.ceil(bags) * gluePrice;\r\n otherMaterialsCost += glueCost; \r\n total.glueBags += bags; \r\n total.costs.glue += glueCost;\r\n }\r\n \r\n if (enableGrout) {\r\n const groutBags = materialArea \/ 18; \r\n const groutCost = Math.ceil(groutBags) * groutPrice;\r\n otherMaterialsCost += groutCost; \r\n total.groutBags += groutBags; \r\n total.costs.grout += groutCost;\r\n }\r\n }\r\n\r\n groupTotalCost = totalTileCostForGroup + otherMaterialsCost;\r\n total.costs.tiles += totalTileCostForGroup; \r\n total.costs.totalMaterials += groupTotalCost;\r\n\r\n const summaryEl = group.querySelector('.area-summary');\r\n if (summaryEl) {\r\n let summaryHTML = '';\r\n if (netWallArea > 0) summaryHTML += `<div><span>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u062d\u0648\u0627\u0626\u0637 \u0627\u0644\u0635\u0627\u0641\u064a\u0629:<\/span> <span>${netWallArea.toFixed(2)} \u0645\u00b2<\/span><\/div>`;\r\n if (netFloorArea > 0) summaryHTML += `<div><span>\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 \u0627\u0644\u0635\u0627\u0641\u064a\u0629:<\/span> <span>${netFloorArea.toFixed(2)} \u0645\u00b2<\/span><\/div>`;\r\n if (skirtingPerimeter > 0) summaryHTML += `<div><span>\u0637\u0648\u0644 \u0627\u0644\u0648\u0632\u0631 \u0627\u0644\u0635\u0627\u0641\u064a:<\/span> <span>${skirtingPerimeter.toFixed(2)} \u0645.\u0637<\/span><\/div>`;\r\n if (skirtingHeightMeters > 0 && skirtingPerimeter > 0) summaryHTML += `<div><span>\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0648\u0632\u0631:<\/span> <span>${skirtingHeight} \u0633\u0645<\/span><\/div>`;\r\n summaryHTML += `<hr style=\"border-top: 1px dashed #ccc; margin: 5px 0;\">\r\n <div><span>\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0637:<\/span> <span>${totalTileCostForGroup.toFixed(2)} \u062c<\/span><\/div>\r\n <div><span>\u062a\u0643\u0644\u0641\u0629 \u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628:<\/span> <span>${otherMaterialsCost.toFixed(2)} \u062c<\/span><\/div>\r\n <div class=\"total\"><span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0644\u0644\u0645\u0633\u0627\u062d\u0629:<\/span> <span>${groupTotalCost.toFixed(2)} \u062c<\/span><\/div>`;\r\n summaryEl.innerHTML = summaryHTML;\r\n summaryEl.style.display = 'block';\r\n }\r\n\r\n const totalTilesForGroupWithWaste = (netWallArea + netFloorArea + skirtingArea) * (1 + prices.waste);\r\n const avgWallPrice = netWallArea > 0 ? (wallTilePrice * netWallArea) \/ netWallArea : 0;\r\n const avgFloorPrice = netFloorArea > 0 ? (floorTilePrice * netFloorArea) \/ netFloorArea : 0;\r\n \r\n this.summaryBody.insertAdjacentHTML(\"beforeend\",\r\n `<tr class=\"summary-table-enhanced\">\r\n <td>${name}<\/td>\r\n <td class=\"manufacturer-cell\">${tileManufacturer}<\/td>\r\n <td>${wallTileTypeName}<\/td>\r\n <td>${floorTileTypeName}<\/td>\r\n <td>${avgWallPrice.toFixed(2)}<\/td>\r\n <td>${avgFloorPrice.toFixed(2)}<\/td>\r\n <td>${netWallArea.toFixed(2)}<\/td>\r\n <td>${netFloorArea.toFixed(2)}<\/td>\r\n <td>${(wallTilePrice * netWallArea * (1 + prices.waste)).toFixed(2)}<\/td>\r\n <td>${(floorTilePrice * netFloorArea * (1 + prices.waste)).toFixed(2)}<\/td>\r\n <td>${accessoryCost.toFixed(2)}<\/td>\r\n <td class=\"total-cell\">${groupTotalCost.toFixed(2)}<\/td>\r\n <\/tr>`);\r\n });\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0639\u0627\u0631\r\n total.workmanship.total = total.workmanship.wall + total.workmanship.floor + total.workmanship.skirting;\r\n \r\n this.calculationTotals = total;\r\n this.updateAllWorkmanshipItems();\r\n\r\n Object.keys(total.purchaseOrder).forEach(name => {\r\n const item = total.purchaseOrder[name];\r\n if (item.wall > 0) {\r\n this.purchaseOrderList.innerHTML += `<li><span>\u062d\u0648\u0627\u0626\u0637 ${name}<\/span> <span>${item.wall.toFixed(2)} \u0645\u00b2<\/span><\/li>`;\r\n }\r\n if (item.floor > 0) {\r\n this.purchaseOrderList.innerHTML += `<li><span>\u0623\u0631\u0636\u064a\u0629 ${name}<\/span> <span>${item.floor.toFixed(2)} \u0645\u00b2<\/span><\/li>`;\r\n }\r\n if (item.skirting > 0) {\r\n this.purchaseOrderList.innerHTML += `<li><span>\u0648\u0632\u0631 ${name}<\/span> <span>${item.skirting.toFixed(2)} \u0645\u00b2<\/span><\/li>`;\r\n }\r\n if (item.accessories > 0) {\r\n this.purchaseOrderList.innerHTML += `<li><span>\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a ${name}<\/span> <span>${item.accessories.toFixed(2)} \u0645\u00b2<\/span><\/li>`;\r\n }\r\n });\r\n \r\n this.purchaseOrderCard.style.display = 'block';\r\n\r\n let totalWorkmanshipCostManual = 0;\r\n let workmanshipItemsDetails = [];\r\n this.workmanshipItemsContainer.querySelectorAll('.workmanship-item-card').forEach(item => {\r\n const type = item.querySelector('.item-type-select')?.value;\r\n const price = parseFloat(item.querySelector('.item-price')?.value) || 0;\r\n const desc = item.querySelector('.item-desc')?.value || '\u0628\u0646\u062f \u063a\u064a\u0631 \u0645\u0633\u0645\u0649';\r\n let itemCost = 0;\r\n \r\n switch (type) {\r\n case 'wall_work': \r\n itemCost = total.wallArea * price; \r\n break;\r\n case 'floor_small_work': \r\n itemCost = total.floorSmallArea * price; \r\n break;\r\n case 'floor_large_work': \r\n itemCost = total.floorLargeArea * price; \r\n break;\r\n case 'porcelain_work': \r\n itemCost = total.porcelainArea * price; \r\n break;\r\n case 'skirting_work': \r\n itemCost = total.totalPerimeter * price; \r\n break;\r\n case 'lump_sum': \r\n itemCost = price; \r\n break;\r\n }\r\n \r\n if (item.querySelector('.item-total')) {\r\n item.querySelector('.item-total').textContent = itemCost.toFixed(2);\r\n }\r\n \r\n totalWorkmanshipCostManual += itemCost;\r\n if (itemCost > 0) {\r\n workmanshipItemsDetails.push({ desc, cost: itemCost });\r\n }\r\n });\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0645\u0646 \u0627\u0644\u0623\u0633\u0639\u0627\u0631\r\n const totalWorkmanshipCostAuto = total.workmanship.total;\r\n const totalWorkmanshipCost = totalWorkmanshipCostManual + totalWorkmanshipCostAuto;\r\n \r\n this.workmanshipTotalContainer.style.display = this.workmanshipItemsContainer.children.length > 0 || totalWorkmanshipCostAuto > 0 ? 'block' : 'none';\r\n if (this.workmanshipTotalSpan) {\r\n this.workmanshipTotalSpan.textContent = totalWorkmanshipCost.toFixed(2);\r\n }\r\n\r\n this.updateFinancialSummary();\r\n\r\n const addOnsPercentage = parseFloat(this.priceInputs.addOns?.value) || 0;\r\n const subTotal = total.costs.totalMaterials + totalWorkmanshipCost;\r\n const addOnsValue = subTotal * (addOnsPercentage \/ 100);\r\n const grandTotal = subTotal + addOnsValue;\r\n\r\n const totalTileQty = Object.values(total.purchaseOrder).reduce((acc, item) => \r\n acc + item.wall + item.floor + item.skirting, 0);\r\n \r\n this.summaryFoot.innerHTML = `\r\n <tr style=\"font-weight: bold;\">\r\n <td colspan=\"6\">\u0625\u062c\u0645\u0627\u0644\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 (\u0634\u0627\u0645\u0644 \u0627\u0644\u0647\u0627\u0644\u0643 \u0648\u0627\u0644\u0648\u0632\u0631 \u0648\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a)<\/td>\r\n <td colspan=\"2\">${totalTileQty.toFixed(2)} \u0645\u00b2<\/td>\r\n <td colspan=\"1\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629<\/td>\r\n <td colspan=\"3\">${total.costs.tiles.toFixed(2)}<\/td>\r\n <\/tr>\r\n <tr style=\"font-weight: bold;\">\r\n <td colspan=\"6\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u062e\u0631\u0649<\/td>\r\n <td colspan=\"2\">${Math.ceil(total.glueBags) + Math.ceil(total.groutBags)} \u0634\u0643\u0627\u0631\u0629<\/td>\r\n <td colspan=\"1\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629<\/td>\r\n <td colspan=\"3\">${(total.costs.glue + total.costs.grout + total.costs.mortarCement + total.costs.mortarSand).toFixed(2)}<\/td>\r\n <\/tr>\r\n <tr style=\"background-color: #e0eafc; font-size: 16px; font-weight: bold;\">\r\n <td colspan=\"10\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 (\u0645\u0648\u0627\u062f \u0641\u0642\u0637)<\/td>\r\n <td colspan=\"2\">${total.costs.totalMaterials.toFixed(2)}<\/td>\r\n <\/tr>\r\n ${totalWorkmanshipCost > 0 ? `\r\n <tr style=\"background-color: #e0eafc; font-size: 16px; font-weight: bold;\">\r\n <td colspan=\"10\">\u0625\u062c\u0645\u0627\u0644\u064a \u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629<\/td>\r\n <td colspan=\"2\">${totalWorkmanshipCost.toFixed(2)}<\/td>\r\n <\/tr>` : ''}\r\n <tr style=\"background-color: #d4edda; font-size: 18px; font-weight: bold; color: #155724;\">\r\n <td colspan=\"10\">\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 (+${addOnsPercentage}% \u0645\u0635\u0627\u0631\u064a\u0641)<\/td>\r\n <td colspan=\"2\">${grandTotal.toFixed(2)}<\/td>\r\n <\/tr>\r\n `;\r\n\r\n this.generateAISummary(areaGroups.length, total, totalWorkmanshipCost, grandTotal);\r\n this.generateExplanationCards(total, totalWorkmanshipCost, addOnsValue, grandTotal, workmanshipItemsDetails);\r\n this.summaryDiv.style.display = \"block\";\r\n this.educationSection.style.display = \"block\";\r\n this.finalControls.style.display = \"flex\";\r\n \r\n if (shouldSave) this.saveProjects();\r\n }\r\n\r\n updateAllWorkmanshipItems() {\r\n this.workmanshipItemsContainer.querySelectorAll('.workmanship-item-card').forEach(item => {\r\n this.updateWorkmanshipItemUI(item);\r\n });\r\n }\r\n\r\n generateAISummary(areaCount, total, totalWorkmanshipCost, grandTotal) {\r\n if (areaCount === 0 || !this.aiSummaryContainer) { \r\n if (this.aiSummaryContainer) this.aiSummaryContainer.style.display = \"none\"; \r\n return; \r\n }\r\n \r\n const netArea = total.wallArea + total.floorSmallArea + total.floorLargeArea + total.porcelainArea;\r\n const totalTileQty = Object.values(total.purchaseOrder).reduce((acc, item) => \r\n acc + item.wall + item.floor + item.skirting, 0);\r\n \r\n let advice = `\u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a\u060c \u062a\u0645 \u062d\u0633\u0627\u0628 \u062a\u0643\u0627\u0644\u064a\u0641 \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0628\u0644\u0627\u0637 \u0644\u0640 <strong>${areaCount} \u0645\u0633\u0627\u062d\u0627\u062a<\/strong> \u0628\u0625\u062c\u0645\u0627\u0644\u064a \u0635\u0627\u0641\u064a <strong>${netArea.toFixed(2)} \u0645\u00b2<\/strong>.<br>`;\r\n advice += `\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0645\u0646 \u0627\u0644\u0628\u0644\u0627\u0637 \u0628\u0639\u062f \u0625\u0636\u0627\u0641\u0629 \u0646\u0633\u0628\u0629 \u0627\u0644\u0647\u0627\u0644\u0643 \u0647\u0648 <strong>${totalTileQty.toFixed(2)} \u0645\u00b2<\/strong>.<br><br>`;\r\n \r\n const materialCost = total.costs.totalMaterials;\r\n if (materialCost > 0 && totalWorkmanshipCost > 0) {\r\n const workmanshipPercentage = (totalWorkmanshipCost \/ (materialCost + totalWorkmanshipCost) * 100).toFixed(0);\r\n advice += `<strong>\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641:<\/strong> \u062a\u0645\u062b\u0644 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0648\u0627\u062f <strong>${(100 - workmanshipPercentage)}%<\/strong> \u0645\u0646 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u0645\u062b\u0644 \u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0627\u062a <strong>${workmanshipPercentage}%<\/strong>. `;\r\n }\r\n \r\n advice += `\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a\u0629 \u0644\u0644\u0645\u0634\u0631\u0648\u0639\u060c \u0628\u0639\u062f \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0635\u0627\u0631\u064a\u0641 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629\u060c \u0647\u064a \u062d\u0648\u0627\u0644\u064a <strong>${grandTotal.toLocaleString('ar-EG', { style: 'currency', currency: 'EGP' })}<\/strong>.`;\r\n this.aiSummaryText.innerHTML = advice;\r\n this.aiSummaryContainer.style.display = \"block\";\r\n }\r\n\r\n generateExplanationCards(total, totalWorkmanshipCost, addOnsValue, grandTotal, workmanshipItemsDetails) {\r\n if (!this.explanationContainer) return;\r\n \r\n this.explanationContainer.innerHTML = '';\r\n const createCard = (title, icon, text, totalCost, isTotal = false) => {\r\n if (totalCost > 0 || text) {\r\n return `\r\n <div class=\"explanation-card ${isTotal ? 'total-card' : ''}\">\r\n <h5>${icon} <span>${title}<\/span><\/h5>\r\n ${text}\r\n ${totalCost > 0 ? `<p class=\"cost ${isTotal ? 'final-cost' : ''}\">${totalCost.toFixed(2)} \u062c\u0646\u064a\u0647<\/p>` : ''}\r\n <\/div>`;\r\n } \r\n return '';\r\n };\r\n \r\n const totalTileQty = Object.values(total.purchaseOrder).reduce((acc, item) => \r\n acc + item.wall + item.floor + item.skirting, 0);\r\n \r\n this.explanationContainer.innerHTML += createCard(\r\n '\u0627\u0644\u0628\u0644\u0627\u0637 \u0627\u0644\u0645\u0624\u0643\u062f \u0639\u0644\u064a\u0647', \r\n '\ud83d\udd33', \r\n `<p>\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0647\u0648 <strong>${totalTileQty.toFixed(2)} \u0645\u00b2<\/strong> (\u0634\u0627\u0645\u0644\u0629 \u0627\u0644\u0647\u0627\u0644\u0643 \u0648\u0627\u0644\u0648\u0632\u0631 \u0648\u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a).<\/p>`, \r\n total.costs.tiles\r\n );\r\n \r\n if (total.costs.glue + total.costs.grout + total.costs.mortarCement + total.costs.mortarSand > 0) {\r\n this.explanationContainer.innerHTML += createCard(\r\n '\u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u062e\u0631\u0649', \r\n '\ud83e\uddf1', \r\n `<p>\u0645\u0648\u0627\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0648\u0627\u0644\u0633\u0642\u064a\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u0644\u0639\u0645\u0644.<\/p>`, \r\n total.costs.glue + total.costs.grout + total.costs.mortarCement + total.costs.mortarSand\r\n );\r\n }\r\n \r\n if (totalWorkmanshipCost > 0) {\r\n let itemsList = '<ul style=\"margin: 10px 0; padding-right: 20px;\">' + workmanshipItemsDetails.map(item => \r\n `<li style=\"margin-bottom: 5px;\"><span>${item.desc}<\/span><span style=\"float: left;\">${item.cost.toFixed(2)} \u062c\u0646\u064a\u0647<\/span><\/li>`\r\n ).join('') + '<\/ul>';\r\n \r\n this.explanationContainer.innerHTML += createCard(\r\n '\u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644', \r\n '\ud83d\udc77\u200d\u2642\ufe0f', \r\n `<p>\u0628\u0646\u0648\u062f \u0627\u0644\u0639\u0645\u0627\u0644\u0629 \u0648\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0627\u0644\u0645\u0636\u0627\u0641\u0629 \u064a\u062f\u0648\u064a\u0627\u064b:<\/p>${itemsList}`, \r\n totalWorkmanshipCost\r\n );\r\n }\r\n \r\n if (grandTotal > 0) {\r\n this.explanationContainer.innerHTML += createCard(\r\n '\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629', \r\n '\ud83d\udcca', \r\n `<p>\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0627\u0644\u062a\u0642\u062f\u064a\u0631\u064a \u0644\u0645\u0634\u0631\u0648\u0639\u0643 \u0634\u0627\u0645\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641.<\/p>`, \r\n grandTotal, \r\n true\r\n );\r\n }\r\n \r\n this.explanationSection.style.display = 'block';\r\n }\r\n\r\n shareSummary() {\r\n const activeProject = this.projects.find(p => p.id === this.activeProjectId);\r\n if (!activeProject) return;\r\n \r\n const total = this.calculationTotals;\r\n if (!total || !total.costs) { \r\n alert(\"\u0644\u0627 \u062a\u0648\u062c\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0643\u0627\u0641\u064a\u0629 \u0644\u0644\u0645\u0634\u0627\u0631\u0643\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641 \u0623\u0648\u0644\u0627\u064b.\"); \r\n return; \r\n }\r\n\r\n const grandTotalText = this.summaryFoot.querySelector('tr:last-child td:last-child')?.textContent;\r\n const grandTotal = grandTotalText ? parseFloat(grandTotalText) : 0;\r\n \r\n let msg = `*\u062a\u0642\u0631\u064a\u0631 \u0643\u0645\u064a\u0627\u062a \u0648\u062a\u0643\u0627\u0644\u064a\u0641 \u0645\u0634\u0631\u0648\u0639: ${activeProject.name}*\\n`;\r\n msg += `\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0642\u0631\u064a\u0631: ${new Date().toLocaleDateString('ar-EG')}\\n`;\r\n msg += `\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\\n\\n`;\r\n \r\n msg += `\ud83d\udce6 *\u0642\u0627\u0626\u0645\u0629 \u0637\u0644\u0628 \u0648\u0634\u0631\u0627\u0621 \u0627\u0644\u0645\u0648\u0627\u062f (\u0628\u0627\u0644\u0647\u0627\u0644\u0643):*\\n`;\r\n \r\n const totalPurchaseOrder = {};\r\n Object.keys(total.purchaseOrder).forEach(name => {\r\n const item = total.purchaseOrder[name];\r\n if (item.wall > 0) {\r\n if (!totalPurchaseOrder['\u062d\u0648\u0627\u0626\u0637']) totalPurchaseOrder['\u062d\u0648\u0627\u0626\u0637'] = 0;\r\n totalPurchaseOrder['\u062d\u0648\u0627\u0626\u0637'] += item.wall;\r\n }\r\n if (item.floor > 0) {\r\n if (!totalPurchaseOrder['\u0623\u0631\u0636\u064a\u0627\u062a']) totalPurchaseOrder['\u0623\u0631\u0636\u064a\u0627\u062a'] = 0;\r\n totalPurchaseOrder['\u0623\u0631\u0636\u064a\u0627\u062a'] += item.floor;\r\n }\r\n if (item.skirting > 0) {\r\n if (!totalPurchaseOrder['\u0648\u0632\u0631']) totalPurchaseOrder['\u0648\u0632\u0631'] = 0;\r\n totalPurchaseOrder['\u0648\u0632\u0631'] += item.skirting;\r\n }\r\n if (item.accessories > 0) {\r\n if (!totalPurchaseOrder['\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a']) totalPurchaseOrder['\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a'] = 0;\r\n totalPurchaseOrder['\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a'] += item.accessories;\r\n }\r\n });\r\n\r\n if (totalPurchaseOrder['\u062d\u0648\u0627\u0626\u0637']) msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0628\u0644\u0627\u0637 \u0627\u0644\u062d\u0648\u0627\u0626\u0637: *${totalPurchaseOrder['\u062d\u0648\u0627\u0626\u0637'].toFixed(2)} \u0645\u00b2*\\n`;\r\n if (totalPurchaseOrder['\u0623\u0631\u0636\u064a\u0627\u062a']) msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0628\u0644\u0627\u0637 \u0627\u0644\u0623\u0631\u0636\u064a\u0627\u062a: *${totalPurchaseOrder['\u0623\u0631\u0636\u064a\u0627\u062a'].toFixed(2)} \u0645\u00b2*\\n`;\r\n if (totalPurchaseOrder['\u0648\u0632\u0631']) msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0628\u0644\u0627\u0637 \u0627\u0644\u0648\u0632\u0631: *${totalPurchaseOrder['\u0648\u0632\u0631'].toFixed(2)} \u0645\u00b2*\\n`;\r\n if (totalPurchaseOrder['\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a']) msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a: *${totalPurchaseOrder['\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a'].toFixed(2)} \u0645\u00b2*\\n`;\r\n \r\n msg += `\\n--- \u0645\u0648\u0627\u062f \u0623\u062e\u0631\u0649 ---\\n`;\r\n if (total.glueBags > 0) msg += `\u2022 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0644\u0627\u0635\u0642\u0629: *${Math.ceil(total.glueBags)} \u0634\u0643\u0627\u0631\u0629*\\n`;\r\n if (total.groutBags > 0) msg += `\u2022 \u0645\u0627\u062f\u0629 \u0627\u0644\u0633\u0642\u064a\u0629: *${Math.ceil(total.groutBags)} \u0634\u0643\u0627\u0631\u0629*\\n`;\r\n\r\n if (Object.keys(total.purchaseOrder).length > 0) {\r\n msg += `\\n\ud83d\udccb *\u062a\u0641\u0627\u0635\u064a\u0644 \u0637\u0644\u0628\u064a\u0629 \u0627\u0644\u0628\u0644\u0627\u0637 (\u0644\u0643\u0644 \u0645\u0633\u0627\u062d\u0629):*\\n`;\r\n Object.keys(total.purchaseOrder).forEach(name => {\r\n const item = total.purchaseOrder[name];\r\n if (item.wall > 0) msg += `\u2022 \u062d\u0648\u0627\u0626\u0637 ${name}: *${item.wall.toFixed(2)} \u0645\u00b2*\\n`;\r\n if (item.floor > 0) msg += `\u2022 \u0623\u0631\u0636\u064a\u0629 ${name}: *${item.floor.toFixed(2)} \u0645\u00b2*\\n`;\r\n if (item.skirting > 0) msg += `\u2022 \u0648\u0632\u0631 ${name}: *${item.skirting.toFixed(2)} \u0645\u00b2*\\n`;\r\n if (item.accessories > 0) msg += `\u2022 \u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a ${name}: *${item.accessories.toFixed(2)} \u0645\u00b2*\\n`;\r\n });\r\n }\r\n \r\n msg += `\\n*\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550*\\n`;\r\n msg += `\ud83d\udcb0 *\u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0643\u0627\u0644\u064a\u0641:*\\n`;\r\n msg += `\u2022 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0637: *${total.costs.tiles.toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n msg += `\u2022 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u062e\u0631\u0649: *${(total.costs.glue + total.costs.grout + total.costs.mortarCement + total.costs.mortarSand).toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n msg += `*\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550*\\n`;\r\n msg += `*\u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u0645\u0648\u0627\u062f: ${total.costs.totalMaterials.toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n \r\n const totalWorkmanshipCostAll = this.workmanshipTotalContainer.style.display === 'block' ? \r\n parseFloat(this.workmanshipTotalSpan?.textContent || 0) : 0;\r\n \r\n if (totalWorkmanshipCostAll > 0) {\r\n msg += `\\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\\n`;\r\n msg += `\ud83d\udc77\u200d\u2642\ufe0f *\u0645\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0645\u0642\u0627\u0648\u0644:*\\n`;\r\n msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a: *${totalWorkmanshipCostAll.toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n \r\n const totalPaidEl = document.getElementById('total-paid-amount');\r\n const balanceEl = document.getElementById('balance-amount');\r\n \r\n if (totalPaidEl && balanceEl) {\r\n msg += `\u2022 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u062f\u0641\u0648\u0639: *${totalPaidEl.textContent} \u062c\u0646\u064a\u0647*\\n`;\r\n \r\n const balance = parseFloat(balanceEl.textContent);\r\n if (balance >= 0) {\r\n msg += `\u2022 \u0627\u0644\u0631\u0635\u064a\u062f \u0627\u0644\u0645\u062a\u0628\u0642\u064a: *${balanceEl.textContent} \u062c\u0646\u064a\u0647*\\n`;\r\n } else {\r\n msg += `\u2022 \u0645\u0628\u0644\u063a \u0632\u0627\u0626\u062f \u0639\u0646 \u0627\u0644\u0645\u0633\u062a\u062d\u0642: *${Math.abs(balance).toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n }\r\n }\r\n }\r\n \r\n msg += `\\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\\n`;\r\n msg += `\ud83d\udcca *\u0627\u0644\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0647\u0627\u0626\u064a:*\\n`;\r\n msg += `\u2022 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629: *${grandTotal.toFixed(2)} \u062c\u0646\u064a\u0647*\\n`;\r\n \r\n const contractorName = this.contractorInfo.name?.value;\r\n const contractorPhone = this.contractorInfo.phone?.value;\r\n if (contractorName) {\r\n msg += `\\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\\n`;\r\n msg += `*\ud83d\udc64 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0642\u0627\u0648\u0644:*\\n`;\r\n msg += `\u2022 \u0627\u0644\u0627\u0633\u0645: ${contractorName}\\n`;\r\n if (contractorPhone) msg += `\u2022 \u0627\u0644\u0647\u0627\u062a\u0641: ${contractorPhone}\\n`;\r\n }\r\n\r\n msg += `\\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\\n`;\r\n msg += `\ud83d\udca1 *\u0646\u0635\u064a\u062d\u0629 \u0645\u0647\u0646\u062f\u0633:*\\n`;\r\n \r\n if (this.aiSummaryText) {\r\n const aiText = this.aiSummaryText.innerText || this.aiSummaryText.textContent || '';\r\n msg += aiText.replace(\/<br\\s*\\\/?>\/gi, \"\\n\").replace(\/<\\\/?strong>\/gi, \"*\").replace(\/<\\\/?[^>]+(>|$)\/g, \"\");\r\n }\r\n \r\n msg += `\\n\\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\\n`;\r\n msg += `\ud83d\udcde *\u0644\u0644\u062a\u0648\u0627\u0635\u0644 \u0648\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a:*\\n`;\r\n msg += `\u2022 \u0627\u0644\u0647\u0627\u062a\u0641: +201550507700\\n`;\r\n msg += `\\n\ud83d\udcbc *\u0647\u0630\u0627 \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u062a\u0645 \u0625\u0639\u062f\u0627\u062f\u0647 \u0628\u0648\u0627\u0633\u0637\u0629:*\\n`;\r\n msg += `\u0645\u0646\u0635\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629\\n`;\r\n msg += `\u0627\u0644\u0625\u0635\u062f\u0627\u0631: 18.2 (\u062a\u062d\u0643\u0645 \u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u062f \u0648\u0627\u0644\u0645\u0635\u0646\u0639\u064a\u0629)\\n`;\r\n msg += `\"\u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646\"\\n`;\r\n msg += `\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\\n`;\r\n msg += `\ud83d\udd52 \u0648\u0642\u062a \u0627\u0644\u0625\u0646\u0634\u0627\u0621: ${new Date().toLocaleTimeString('ar-EG')}\\n`;\r\n msg += `\ud83d\udcc5 \u0627\u0644\u062a\u0627\u0631\u064a\u062e: ${new Date().toLocaleDateString('ar-EG')}\\n`;\r\n \r\n window.open(`https:\/\/api.whatsapp.com\/send?text=${encodeURIComponent(msg)}`, '_blank');\r\n }\r\n\r\n calculateTotalArea() {\r\n let total = 0;\r\n document.querySelectorAll('.area-group').forEach(group => {\r\n const length = parseFloat(group.querySelector('.area-dim1')?.value) || 0;\r\n const width = parseFloat(group.querySelector('.area-dim2')?.value) || 0;\r\n total += length * width;\r\n });\r\n return total;\r\n }\r\n}\r\n\r\n\/\/ \u0625\u0646\u0634\u0627\u0621 \u0645\u062b\u064a\u0644 \u0645\u0646 \u0627\u0644\u0622\u0644\u0629 \u0627\u0644\u062d\u0627\u0633\u0628\u0629\r\nconst calculator = new MultiProjectCeramicCalculator();\r\n\r\nwindow.addEventListener('DOMContentLoaded', () => {\r\n setTimeout(() => {\r\n if (calculator.updateTileShowroom) {\r\n calculator.updateTileShowroom();\r\n }\r\n }, 2000);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"categories":[24128],"tags":[],"class_list":["post-55756","post","type-post","status-publish","format-standard","hentry","category-24128"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":55750,"url":"https:\/\/engeg.com\/b\/2026\/01\/19\/%d8%ad%d8%a7%d8%b3%d8%a8%d8%a9-%d8%a7%d9%84%d8%b7%d9%88%d8%a8\/","url_meta":{"origin":55756,"position":0},"title":"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0648\u0628","author":"interior","date":"\u064a\u0646\u0627\u064a\u0631 19, 2026","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":52718,"url":"https:\/\/engeg.com\/b\/2025\/08\/31\/%d8%ad%d8%a7%d8%b3%d8%a8%d9%87-%d9%83%d9%85%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d8%b5%d8%a8\/","url_meta":{"origin":55756,"position":1},"title":"\u062d\u0627\u0633\u0628\u0647 \u0643\u0645\u064a\u0627\u062a \u0627\u0644\u0635\u0628","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 31, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":52693,"url":"https:\/\/engeg.com\/b\/2025\/08\/30\/%d8%ad%d8%a7%d8%b3%d8%a8%d9%87-%d8%ad%d8%af%d9%8a%d8%af-%d8%a7%d9%84%d9%82%d9%88%d8%a7%d8%b9%d8%af\/","url_meta":{"origin":55756,"position":2},"title":"\u062d\u0627\u0633\u0628\u0647 \u062d\u062f\u064a\u062f \u0627\u0644\u0642\u0648\u0627\u0639\u062f","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 30, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":54236,"url":"https:\/\/engeg.com\/b\/2025\/09\/14\/%d8%ad%d8%a7%d8%b3%d8%a8%d8%a9-%d8%a7%d9%84%d8%ad%d8%af%d9%8a%d8%af-%d8%a8%d8%a7%d9%84%d9%85%d9%88%d9%82%d8%b9\/","url_meta":{"origin":55756,"position":3},"title":"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u062d\u062f\u064a\u062f \u0628\u0627\u0644\u0645\u0648\u0642\u0639","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 14, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":52641,"url":"https:\/\/engeg.com\/b\/2025\/08\/29\/%d8%ad%d8%a7%d8%b3%d8%a8%d9%87-%d8%a7%d9%84%d8%a7%d8%b3%d8%a7%d8%b3-%d9%85%d8%b9-%d8%a7%d9%84%d8%aa%d8%ad%d9%84%d9%8a%d9%84-%d8%ac\/","url_meta":{"origin":55756,"position":4},"title":"\u062d\u0627\u0633\u0628\u0647 \u0627\u0644\u0627\u0633\u0627\u0633 \u0645\u0639 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u062c","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 29, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":52724,"url":"https:\/\/engeg.com\/b\/2025\/08\/31\/%d8%b5%d8%a8-%d9%a3\/","url_meta":{"origin":55756,"position":5},"title":"\u0635\u0628 \u0663","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 31, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%ad%d8%b3%d8%a7%d8%a8%d8%a7%d8%aa-%d8%aa%d9%87%d9%85%d9%83-%d9%81%d9%8a-%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d9%88%d8%b7%d9%86\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/55756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/comments?post=55756"}],"version-history":[{"count":1,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/55756\/revisions"}],"predecessor-version":[{"id":55757,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/55756\/revisions\/55757"}],"wp:attachment":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/media?parent=55756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/categories?post=55756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/tags?post=55756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}