\u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635 <\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary-color: #0073aa;\r\n --light-gray: #f4f4f4;\r\n --dark-gray: #555;\r\n --danger-color: #d9534f;\r\n --success-color: #5cb85c;\r\n --section-border: #e0e0e0;\r\n }\r\n body {\r\n direction: rtl;\r\n font-family: 'Cairo', sans-serif;\r\n background-color: var(--light-gray);\r\n }\r\n .contract-container {\r\n max-width: 900px;\r\n margin: 20px auto;\r\n padding: 25px;\r\n border: 1px solid #ddd;\r\n background-color: #f9f9f9;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n }\r\n .input-section {\r\n background-color: #fff;\r\n padding: 20px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n border: 1px solid var(--section-border);\r\n }\r\n .input-section h3 {\r\n margin-top: 0;\r\n color: #333;\r\n border-bottom: 2px solid var(--primary-color);\r\n padding-bottom: 10px;\r\n margin-bottom: 20px;\r\n }\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 15px 20px;\r\n }\r\n .form-grid label {\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n color: var(--dark-gray);\r\n font-size: 14px;\r\n }\r\n .form-grid input, .form-grid textarea {\r\n width: 100%;\r\n padding: 8px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n }\r\n .contract-output {\r\n background-color: #fff;\r\n padding: 30px;\r\n border: 1px solid var(--section-border);\r\n line-height: 1.9;\r\n font-size: 16px;\r\n }\r\n .contract-output h3, .contract-output h4 {\r\n text-align: center;\r\n font-weight: 700;\r\n margin: 20px 0 10px;\r\n }\r\n .user-data {\r\n font-weight: 700;\r\n color: var(--primary-color);\r\n background-color: #eaf6ff;\r\n padding: 2px 5px;\r\n border-radius: 3px;\r\n }\r\n .clause {\r\n position: relative;\r\n padding: 10px 5px;\r\n margin-bottom: 5px;\r\n border-left: 3px solid transparent;\r\n transition: background-color 0.2s, border-left 0.2s;\r\n }\r\n .clause.editable:hover {\r\n background-color: #f7f7f7;\r\n border-left: 3px solid var(--primary-color);\r\n }\r\n .clause-content { cursor: pointer; }\r\n .clause-actions {\r\n position: absolute;\r\n left: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n opacity: 0;\r\n transition: opacity 0.2s;\r\n background-color: #fff;\r\n padding: 5px;\r\n border-radius: 5px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n z-index: 10;\r\n }\r\n .clause.editable:hover .clause-actions { opacity: 1; }\r\n .clause-actions button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 18px;\r\n padding: 5px;\r\n color: var(--danger-color);\r\n }\r\n .clause-editor {\r\n width: 100%;\r\n min-height: 80px;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n padding: 10px;\r\n border: 1px dashed var(--primary-color);\r\n box-sizing: border-box;\r\n }\r\n .action-buttons {\r\n text-align: center;\r\n margin-top: 30px;\r\n padding: 20px;\r\n background-color: #fff;\r\n border-radius: 8px;\r\n }\r\n .action-buttons button {\r\n background-color: var(--primary-color);\r\n color: #fff;\r\n border: none;\r\n padding: 12px 25px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n margin: 5px 10px;\r\n transition: background-color 0.3s;\r\n }\r\n .action-buttons button.whatsapp { background-color: #25d366; }\r\n .action-buttons button.clear { background-color: var(--danger-color); }\r\n .add-clause-button {\r\n display: block;\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 20px;\r\n background-color: var(--success-color);\r\n color: #fff;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n text-align: center;\r\n }\r\n .add-clause-button:hover { opacity: 0.9; }\r\n\r\n @media print {\r\n body * { visibility: hidden; }\r\n .contract-output, .contract-output * { visibility: visible; }\r\n .contract-output {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n font-size: 12pt;\r\n }\r\n .user-data {\r\n color: #000 !important;\r\n background-color: transparent !important;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n .clause-actions, .action-buttons, .input-section, .add-clause-button { display: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"contract-container\">\r\n <div class=\"input-section\">\r\n <h3>\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 (\u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635 \u0644\u0637\u0631\u0641 \u062b\u0627\u0644\u062b)<\/h3>\r\n <div class=\"form-grid\">\r\n \r\n <div><label for=\"principalName\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0643\u0644 (\u0627\u0644\u0628\u0627\u0626\u0639):<\/label><input type=\"text\" id=\"principalName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"principalId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0645\u0648\u0643\u0644:<\/label><input type=\"text\" id=\"principalId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"principalAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0643\u0644:<\/label><input type=\"text\" id=\"principalAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"agentName\">\u0627\u0633\u0645 \u0627\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"agentId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"agentAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"beneficiaryName\">\u0627\u0633\u0645 \u0627\u0644\u0645\u062a\u0646\u0627\u0632\u0644 \u0625\u0644\u064a\u0647 (\u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f):<\/label><input type=\"text\" id=\"beneficiaryName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"beneficiaryId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0645\u0633\u062a\u0641\u064a\u062f:<\/label><input type=\"text\" id=\"beneficiaryId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"beneficiaryAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f:<\/label><input type=\"text\" id=\"beneficiaryAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"propertyCity\">\u0627\u0644\u0645\u062f\u064a\u0646\u0629:<\/label><input type=\"text\" id=\"propertyCity\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyDistrict\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629\/\u0627\u0644\u062d\u064a:<\/label><input type=\"text\" id=\"propertyDistrict\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"authorityName\">\u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0627\u0628\u0639 \u0644\u0647:<\/label><input type=\"text\" id=\"authorityName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyNumber\">\u0631\u0642\u0645 \u0642\u0637\u0639\u0629 \u0627\u0644\u0623\u0631\u0636:<\/label><input type=\"text\" id=\"propertyNumber\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyArea\">\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636 (\u06452):<\/label><input type=\"text\" id=\"propertyArea\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"sharePercentage\">\u0646\u0633\u0628\u0629 \u0627\u0644\u062d\u0635\u0629:<\/label><input type=\"text\" id=\"sharePercentage\" oninput=\"updateAndSave()\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-buttons\" id=\"top-action-buttons\">\r\n <button onclick=\"printContract()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629<\/button>\r\n <button class=\"whatsapp\" onclick=\"shareOnWhatsApp()\">\u0648\u062b\u0642 \u0648\u0634\u0627\u0631\u0643 \u062c\u0645\u064a\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0642\u062f \u0639\u0644\u064a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\r\n <button class=\"clear\" onclick=\"clearAllData()\">\ud83d\uddd1\ufe0f \u0645\u0633\u062d \u0627\u0644\u0643\u0644<\/button>\r\n <\/div>\r\n\r\n <div class=\"contract-output\" id=\"contract-output\"><\/div>\r\n\r\n <div class=\"action-buttons\" id=\"bottom-action-buttons\">\r\n <button onclick=\"printContract()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629<\/button>\r\n <button class=\"whatsapp\" onclick=\"shareOnWhatsApp()\">\u0648\u062b\u0642 \u0648\u0634\u0627\u0631\u0643 \u062c\u0645\u064a\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0642\u062f \u0639\u0644\u064a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const formFields = ['principalName', 'principalId', 'principalAddress', 'agentName', 'agentId', 'agentAddress', 'beneficiaryName', 'beneficiaryId', 'beneficiaryAddress', 'propertyCity', 'propertyDistrict', 'authorityName', 'propertyNumber', 'propertyArea', 'sharePercentage'];\r\n\r\n const initialClauses = [\r\n {\r\n id: \"intro\",\r\n type: \"fixed\",\r\n content: `<h3>\u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635<\/h3>\r\n <p>\u0627\u0646\u0647 \u0641\u064a \u064a\u0648\u0645 <span class=\"user-data\" data-key=\"contractDateFormatted\"><\/span><br>\r\n \u0623\u0645\u0627\u0645\u0646\u0627 \u0646\u062d\u0646 \/ ..................................................<br><br>\r\n \u062d\u0636\u0631 \u0627\u0644\u0633\u064a\u062f \/ <span class=\"user-data\" data-key=\"principalName\"><\/span><br>\r\n \u0627\u0644\u062c\u0646\u0633\u064a\u0629: \u0645\u0635\u0631\u064a, \u0628\u0637\u0627\u0642\u0629 \u0631\u0642\u0645 \u0642\u0648\u0645\u064a: <span class=\"user-data\" data-key=\"principalId\"><\/span><br>\r\n \u0627\u0644\u0639\u0646\u0648\u0627\u0646: <span class=\"user-data\" data-key=\"principalAddress\"><\/span><br>\r\n (\u0637\u0631\u0641 \u0623\u0648\u0644 \u2013 \u0645\u0648\u0643\u0644)<br><br>\r\n \u0648\u0642\u0631\u0631 \u0623\u0646\u0647 \u0648\u0643\u0644 \u0639\u0646\u0647 \/ <span class=\"user-data\" data-key=\"agentName\"><\/span><br>\r\n \u0631\u0642\u0645 \u0642\u0648\u0645\u064a: <span class=\"user-data\" data-key=\"agentId\"><\/span>, \u0627\u0644\u0645\u0642\u064a\u0645\/\u0629 \u0641\u064a: <span class=\"user-data\" data-key=\"agentAddress\"><\/span><br>\r\n (\u0637\u0631\u0641 \u062b\u0627\u0646\u064a \u2013 \u0648\u0643\u064a\u0644)<\/p><hr>`\r\n },\r\n {\r\n id: \"clause_1\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0645\u0648\u0636\u0648\u0639 \u0627\u0644\u062a\u0648\u0643\u064a\u0644\",\r\n content: `\u0648\u0643\u0644\u0647\u0627 \u0641\u064a \u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0646\u064a\u0627\u0628\u0629 \u0639\u0646\u0647 \u0641\u064a \u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644 \u0639\u0646 \u062d\u0635\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 <span class=\"user-data\" data-key=\"sharePercentage\"><\/span> \u0641\u0642\u0637 \u0645\u0646 \u0642\u0637\u0639\u0629 \u0627\u0644\u0627\u0631\u0636 \u0631\u0642\u0645 (<span class=\"user-data\" data-key=\"propertyNumber\"><\/span>) \u0628\u0645\u0646\u0637\u0642\u0629 (<span class=\"user-data\" data-key=\"propertyDistrict\"><\/span>) \u0628\u0645\u0633\u0637\u062d \u0627\u062c\u0645\u0627\u0644\u064a \u0648\u0642\u062f\u0631\u0647 (<span class=\"user-data\" data-key=\"propertyArea\"><\/span> \u06452) \u0648\u0645\u0627 \u0639\u0644\u064a\u0647\u0627 \u0645\u0646 \u0645\u0628\u0627\u0646\u064a \u0628\u0645\u062f\u064a\u0646\u0629 <span class=\"user-data\" data-key=\"propertyCity\"><\/span> \u0648\u0627\u0644\u062a\u0627\u0628\u0639\u0629 (\u0644\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629) \u0644\u0635\u0627\u0644\u062d \u0627\u0644\u0633\u064a\u062f \/ <span class=\"user-data\" data-key=\"beneficiaryName\"><\/span> \u0628\u0637\u0627\u0642\u0629 \u0631\u0642\u0645 \u0642\u0648\u0645\u064a \/ <span class=\"user-data\" data-key=\"beneficiaryId\"><\/span> \u0628\u0639\u0646\u0648\u0627\u0646 <span class=\"user-data\" data-key=\"beneficiaryAddress\"><\/span>. \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u062d\u0642 \u0627\u0644\u062d\u0636\u0648\u0631 \u0646\u064a\u0627\u0628\u0629 \u0639\u0646\u0647 \u0627\u0645\u0627\u0645 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0627\u0645\u0627\u0645 \u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062f\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u0645\u062a\u0639\u0644\u0642\u0629 \u0628\u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644.`\r\n },\r\n {\r\n id: \"clause_2\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0635\u0644\u0627\u062d\u064a\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629\",\r\n content: `\u0648\u0643\u0630\u0644\u0643 \u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0644\u0628\u064a\u0627\u0646 \u0627\u0644\u0645\u0627\u0644\u064a \u0648\u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a \u0645\u0646 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0631\u062e\u0635\u0629 \u0627\u0644\u0645\u0628\u0627\u0646\u064a \u0648\u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0627 \u0648\u062a\u0639\u062f\u064a\u0644\u0647\u0645 \u0628\u0639\u062f \u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644 \u0648\u0627\u0633\u062a\u0644\u0627\u0645\u0647\u0645 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062a\u0635\u0627\u0631\u064a\u062d \u0627\u0644\u062d\u0641\u0631 \u0648\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u062a\u0627\u0645\u064a\u0646 \u0627\u0644\u062d\u0641\u0631 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0631\u062e\u0635\u0629 \u0627\u0644\u0647\u062f\u0645 \u0648\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0627\u062a \u0648\u062f\u0641\u0639 \u0643\u0627\u0641\u0629 \u0627\u0644\u0627\u0642\u0633\u0627\u0637 \u0648\u0639\u0645\u0644 \u0642\u0631\u0627\u0631 \u0627\u0644\u0636\u0645 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0629 \u0648\u062f\u0641\u0639 \u0631\u0633\u0648\u0645 \u0627\u0644\u062a\u0639\u0644\u064a\u0629 \u0648\u0632\u064a\u0627\u062f\u0629 \u063a\u0631\u0641 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u0636\u0645 \u0648\u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0639\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0645. \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0639\u0644\u064a \u0637\u0644\u0628\u0627\u062a \u0627\u0644\u062a\u0635\u0627\u0644\u062d \u0641\u064a \u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0627\u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0628\u062f\u0644 \u0641\u0627\u0642\u062f \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u0648\u0631\u0627\u0642 \u0648\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0647 \u0628\u0627\u0644\u0642\u0637\u0639\u0647 \u0648\u062f\u0641\u0639 \u0627\u064a \u0631\u0633\u0648\u0645 \u0645\u062a\u0639\u0644\u0642\u0647 \u0628\u0627\u0644\u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0648\u0627\u0644\u063a\u0631\u0627\u0645\u0627\u062a. \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0644\u0627\u0631\u0636 \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0645\u062d\u0636\u0631 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0639\u0644\u064a\u0647 \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u062e\u0637\u0627\u0631 \u0627\u0644\u062a\u062e\u0635\u064a\u0635 \u0645\u0646 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u062c\u0648\u0627\u0628 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u062a\u0639\u0627\u0642\u062f \u0639\u0644\u064a\u0647 \u0648\u062a\u0642\u062f\u064a\u0645 \u0637\u0644\u0628 \u062a\u0631\u0643\u064a\u0628 \u0639\u062f\u0627\u062f\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621. \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u062a\u0645\u0627\u0645 \u0627\u062c\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0647 \u0641\u064a <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0641\u064a \u0643\u0627\u0641\u0629 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0647 \u0627\u0648 \u063a\u064a\u0631 \u062d\u0643\u0648\u0645\u064a\u0629. \u0648\u0645\u062e\u0627\u0637\u0628\u0629 \u0643\u0627\u0641\u0629 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0645\u062b\u0644 \u0627\u0644\u0645\u0631\u0627\u0641\u0642 \u0648\u0634\u0631\u0643\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0634\u0631\u0643\u0629 \u0627\u0644\u0645\u064a\u0627\u0629 \u0648\u0627\u0644\u062a\u0644\u064a\u0641\u0648\u0646 \u0648\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0637\u0628\u064a\u0639\u064a \u0648\u0627\u0644\u0635\u0631\u0641 \u0627\u0644\u0635\u062d\u064a \u0648\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0627\u0644\u0645\u062a\u0639\u0644\u0642\u0629 \u0628\u0642\u0637\u0639\u0629 \u0627\u0644\u0627\u0631\u0636 \u0627\u0644\u0645\u0630\u0643\u0648\u0631\u0629 \u0645\u0646 \u0627\u064a \u062c\u0647\u0629 \u062d\u0643\u0648\u0645\u064a\u0629 \u0623\u0648 \u063a\u064a\u0631 \u062d\u0643\u0648\u0645\u064a\u0629 \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u0644\u0645\u062e\u0627\u0637\u0628\u0629 \u0628\u0637\u0644\u0628 \u0631\u062f \u0627\u0644\u062a\u0623\u0645\u064a\u0646 \u0628\u062c\u0647\u0627\u0632 \u0645\u0634\u0631\u0648\u0639\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0647 (\u0627\u0644\u0634\u0631\u0643\u0629 \u0627\u0644\u0645\u0635\u0631\u064a\u0629 \u0644\u0644\u062a\u0639\u062f\u064a\u0646 \u0648\u0627\u062f\u0627\u0631\u0629 \u0648\u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u0645\u062d\u0627\u062c\u0631 \u0648\u0627\u0644\u0645\u0644\u0627\u062d\u0627\u062a).`\r\n },\r\n {\r\n id: \"clause_3\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0634\u0631\u0648\u0637 \u062e\u0627\u0635\u0629\",\r\n content: \"\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u062a\u0648\u0643\u064a\u0644 \u0627\u0644\u063a\u064a\u0631 \u0641\u064a \u0643\u0644 \u0627\u0648 \u0628\u0639\u0636 \u0645\u0627 \u0630\u0643\u0631 \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u0645\u0636\u0627\u0621 \u0627\u0644\u0627\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0630\u0644\u0643\u060c \u0648\u0644\u064a\u0633 \u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0628\u064a\u0639 \u0627\u0644\u0627\u0631\u0636 \u0644\u0646\u0641\u0633\u0647 \u0627\u0648 \u0644\u0644\u063a\u064a\u0631.\"\r\n },\r\n {\r\n id: \"final\",\r\n type: \"fixed\",\r\n content: `<br><br><table style=\"width:100%; text-align:center;\">\r\n <tr><td style=\"width:50%;\"><strong>\u0627\u0644\u0637\u0631\u0641 \u0627\u0644\u0623\u0648\u0644 (\u0627\u0644\u0645\u0648\u0643\u0644)<\/strong><\/td><td style=\"width:50%;\"><strong>\u0627\u0644\u0645\u0648\u062b\u0642<\/strong><\/td><\/tr>\r\n <tr><td><br><br>\u0627\u0644\u062a\u0648\u0642\u064a\u0639: ............................<\/td><td><br><br>............................<\/td><\/tr>\r\n <\/table>`\r\n }\r\n ];\r\n\r\n let contractData = {};\r\n let clauses = [];\r\n\r\n function renderContract() {\r\n const container = document.getElementById('contract-output');\r\n container.innerHTML = '';\r\n clauses.forEach(clause => {\r\n const clauseDiv = document.createElement('div');\r\n clauseDiv.id = clause.id;\r\n clauseDiv.className = `clause ${clause.type === 'fixed' ? '' : 'editable'}`;\r\n let htmlContent = '';\r\n if (clause.type === 'fixed') {\r\n htmlContent = clause.content;\r\n } else {\r\n htmlContent = `<h4>${clause.title || ''}<\/h4><div class=\"clause-content\" onclick=\"editClause('${clause.id}')\">${clause.content}<\/div><div class=\"clause-actions\"><button onclick=\"deleteClause('${clause.id}')\" title=\"\u062d\u0630\u0641 \u0627\u0644\u0628\u0646\u062f\">\ud83d\uddd1\ufe0f<\/button><\/div>`;\r\n }\r\n clauseDiv.innerHTML = htmlContent;\r\n container.appendChild(clauseDiv);\r\n });\r\n const addButtonContainer = document.createElement('div');\r\n addButtonContainer.style.textAlign = 'center';\r\n const addButton = document.createElement('button');\r\n addButton.className = 'add-clause-button';\r\n addButton.textContent = '\u2795 \u0625\u0636\u0627\u0641\u0629 \u0628\u0646\u062f \u062c\u062f\u064a\u062f';\r\n addButton.onclick = addClause;\r\n addButtonContainer.appendChild(addButton);\r\n container.appendChild(addButtonContainer);\r\n updateDynamicValues();\r\n }\r\n\r\n function updateDynamicValues() {\r\n const displayData = { ...contractData };\r\n const date = new Date();\r\n displayData.contractDateFormatted = `${date.toLocaleDateString('ar-EG', { weekday: 'long' })} \u0627\u0644\u0645\u0648\u0627\u0641\u0642 ${date.toLocaleDateString('ar-EG-u-nu-latn', { day: 'numeric', month: 'long', year: 'numeric' })}`;\r\n \r\n document.querySelectorAll('.user-data').forEach(span => {\r\n const key = span.dataset.key;\r\n const value = displayData[key] || '[........]';\r\n span.innerHTML = value;\r\n });\r\n }\r\n\r\n function updateAndSave() {\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element) contractData[fieldId] = element.value;\r\n });\r\n localStorage.setItem('flexiblePOWData_empty', JSON.stringify({ formData: contractData, clauses: clauses }));\r\n updateDynamicValues();\r\n }\r\n\r\n function loadData() {\r\n const savedData = localStorage.getItem('flexiblePOWData_empty');\r\n if (savedData) {\r\n const data = JSON.parse(savedData);\r\n contractData = data.formData || {};\r\n clauses = data.clauses && data.clauses.length > 0 ? data.clauses : JSON.parse(JSON.stringify(initialClauses));\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element && contractData[fieldId]) {\r\n element.value = contractData[fieldId];\r\n } else if (element) {\r\n element.value = ''; \/\/ Ensure fields are empty if not in saved data\r\n }\r\n });\r\n } else {\r\n clauses = JSON.parse(JSON.stringify(initialClauses));\r\n \/\/ All fields will be empty by default as 'value' attribute is removed\r\n }\r\n renderContract();\r\n }\r\n\r\n function editClause(clauseId) {\r\n const clause = clauses.find(c => c.id === clauseId);\r\n if (!clause || clause.type === 'fixed') return;\r\n const clauseDiv = document.getElementById(clauseId);\r\n const contentDiv = clauseDiv.querySelector('.clause-content');\r\n if (!contentDiv || clauseDiv.querySelector('.clause-editor')) return;\r\n const originalHtml = contentDiv.innerHTML;\r\n const editor = document.createElement('textarea');\r\n editor.className = 'clause-editor';\r\n editor.value = originalHtml.replace(\/<br\\s*\\\/?>\/gi, \"\\n\").replace(\/<span class=\"user-data\"[^>]*>.*?<\\\/span>\/g, match => `[${match.match(\/data-key=\"([^\"]+)\"\/)[1]}]`);\r\n contentDiv.style.display = 'none';\r\n clauseDiv.insertBefore(editor, contentDiv);\r\n editor.focus();\r\n const saveChanges = () => {\r\n let newContent = editor.value.replace(\/\\n\/g, \"<br>\");\r\n newContent = newContent.replace(\/\\[([^\\]]+)\\]\/g, (match, key) => `<span class=\"user-data\" data-key=\"${key}\"><\/span>`);\r\n clause.content = newContent;\r\n clauseDiv.removeChild(editor);\r\n contentDiv.innerHTML = clause.content;\r\n contentDiv.style.display = 'block';\r\n updateAndSave();\r\n };\r\n editor.addEventListener('blur', saveChanges);\r\n editor.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' && e.ctrlKey) saveChanges();\r\n else if (e.key === 'Escape') {\r\n clauseDiv.removeChild(editor);\r\n contentDiv.style.display = 'block';\r\n }\r\n });\r\n }\r\n\r\n function deleteClause(clauseId) {\r\n if (confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0628\u0646\u062f\u061f')) {\r\n clauses = clauses.filter(c => c.id !== clauseId);\r\n renderContract();\r\n updateAndSave();\r\n }\r\n }\r\n\r\n function addClause() {\r\n const newClause = { id: 'clause_' + Date.now(), type: 'editable', isNumbered: false, title: '\u0628\u0646\u062f \u0625\u0636\u0627\u0641\u064a', content: '\u0627\u0643\u062a\u0628 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0646\u062f \u0647\u0646\u0627... (\u0627\u0646\u0642\u0631 \u0644\u0644\u062a\u0639\u062f\u064a\u0644)' };\r\n const finalClauseIndex = clauses.findIndex(c => c.id === 'final');\r\n clauses.splice(finalClauseIndex, 0, newClause);\r\n renderContract();\r\n updateAndSave();\r\n }\r\n\r\n function clearAllData() {\r\n if (confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0623\u0646\u0643 \u062a\u0631\u064a\u062f \u0645\u0633\u062d \u062c\u0645\u064a\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0645\u0633\u062a\u0646\u062f \u0627\u0644\u0623\u0635\u0644\u064a\u061f')) {\r\n localStorage.removeItem('flexiblePOWData_empty');\r\n \/\/ Clear the form fields and contract data object\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element) element.value = '';\r\n });\r\n contractData = {};\r\n \/\/ Re-render with initial clauses\r\n clauses = JSON.parse(JSON.stringify(initialClauses));\r\n renderContract();\r\n \/\/ Also clear the storage\r\n localStorage.removeItem('flexiblePOWData_empty');\r\n }\r\n }\r\n\r\n function printContract() { window.print(); }\r\n\r\n function shareOnWhatsApp() {\r\n \/\/ This function remains the same\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', loadData);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/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,"jetpack_post_was_ever_published":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[24126],"tags":[],"class_list":["post-54452","post","type-post","status-publish","format-standard","hentry","category-24126"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":54448,"url":"https:\/\/engeg.com\/b\/2025\/09\/29\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%aa%d9%86%d8%a7%d8%b2%d9%84-%d9%84%d8%b7%d8%b1%d9%81-%d8%a7%d9%84%d9%85%d8%b4%d8%aa%d8%b1%d9%8a\/","url_meta":{"origin":54452,"position":0},"title":"\u062a\u0648\u0643\u064a\u0644 \u062a\u0646\u0627\u0632\u0644 \u0644\u0637\u0631\u0641 \u0627\u0644\u0645\u0634\u062a\u0631\u064a","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 29, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52768,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%b1%d8%b3%d9%85%d9%8a-%d8%b9%d8%a7%d9%85\/","url_meta":{"origin":54452,"position":1},"title":"\u062a\u0648\u0643\u064a\u0644 \u0631\u0633\u0645\u064a \u0639\u0627\u0645 \u0628\u0627\u0644\u0625\u062f\u0627\u0631\u0629","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52773,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%b1%d8%b3%d9%85%d9%8a-%d8%b9%d8%a7%d9%85-2\/","url_meta":{"origin":54452,"position":2},"title":"\u062a\u0648\u0643\u064a\u0644 \u0631\u0633\u0645\u064a \u0639\u0627\u0645 \u0642\u0646\u0635\u0644\u064a\u0629","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52801,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d9%85%d8%b4%d8%a7%d8%b1%d9%83%d9%87\/","url_meta":{"origin":54452,"position":3},"title":"\u0639\u0642\u062f \u0645\u0634\u0627\u0631\u0643\u0647","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52761,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d8%a7%d9%84%d8%b3%d8%a8%d8%a7%d9%83%d9%87\/","url_meta":{"origin":54452,"position":4},"title":"\u0639\u0642\u062f \u0627\u0644\u0633\u0628\u0627\u0643\u0647","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52753,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d8%a7%d8%b3%d8%a7%d9%86%d8%b3%d9%8a%d8%b1-%d9%a2\/","url_meta":{"origin":54452,"position":5},"title":"\u0639\u0642\u062f \u0627\u0633\u0627\u0646\u0633\u064a\u0631 \u0662","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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\/54452","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=54452"}],"version-history":[{"count":1,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/54452\/revisions"}],"predecessor-version":[{"id":54453,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/54452\/revisions\/54453"}],"wp:attachment":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/media?parent=54452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/categories?post=54452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/tags?post=54452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635 <\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary-color: #0073aa;\r\n --light-gray: #f4f4f4;\r\n --dark-gray: #555;\r\n --danger-color: #d9534f;\r\n --success-color: #5cb85c;\r\n --section-border: #e0e0e0;\r\n }\r\n body {\r\n direction: rtl;\r\n font-family: 'Cairo', sans-serif;\r\n background-color: var(--light-gray);\r\n }\r\n .contract-container {\r\n max-width: 900px;\r\n margin: 20px auto;\r\n padding: 25px;\r\n border: 1px solid #ddd;\r\n background-color: #f9f9f9;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n }\r\n .input-section {\r\n background-color: #fff;\r\n padding: 20px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n border: 1px solid var(--section-border);\r\n }\r\n .input-section h3 {\r\n margin-top: 0;\r\n color: #333;\r\n border-bottom: 2px solid var(--primary-color);\r\n padding-bottom: 10px;\r\n margin-bottom: 20px;\r\n }\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 15px 20px;\r\n }\r\n .form-grid label {\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n color: var(--dark-gray);\r\n font-size: 14px;\r\n }\r\n .form-grid input, .form-grid textarea {\r\n width: 100%;\r\n padding: 8px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n }\r\n .contract-output {\r\n background-color: #fff;\r\n padding: 30px;\r\n border: 1px solid var(--section-border);\r\n line-height: 1.9;\r\n font-size: 16px;\r\n }\r\n .contract-output h3, .contract-output h4 {\r\n text-align: center;\r\n font-weight: 700;\r\n margin: 20px 0 10px;\r\n }\r\n .user-data {\r\n font-weight: 700;\r\n color: var(--primary-color);\r\n background-color: #eaf6ff;\r\n padding: 2px 5px;\r\n border-radius: 3px;\r\n }\r\n .clause {\r\n position: relative;\r\n padding: 10px 5px;\r\n margin-bottom: 5px;\r\n border-left: 3px solid transparent;\r\n transition: background-color 0.2s, border-left 0.2s;\r\n }\r\n .clause.editable:hover {\r\n background-color: #f7f7f7;\r\n border-left: 3px solid var(--primary-color);\r\n }\r\n .clause-content { cursor: pointer; }\r\n .clause-actions {\r\n position: absolute;\r\n left: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n opacity: 0;\r\n transition: opacity 0.2s;\r\n background-color: #fff;\r\n padding: 5px;\r\n border-radius: 5px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n z-index: 10;\r\n }\r\n .clause.editable:hover .clause-actions { opacity: 1; }\r\n .clause-actions button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 18px;\r\n padding: 5px;\r\n color: var(--danger-color);\r\n }\r\n .clause-editor {\r\n width: 100%;\r\n min-height: 80px;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n padding: 10px;\r\n border: 1px dashed var(--primary-color);\r\n box-sizing: border-box;\r\n }\r\n .action-buttons {\r\n text-align: center;\r\n margin-top: 30px;\r\n padding: 20px;\r\n background-color: #fff;\r\n border-radius: 8px;\r\n }\r\n .action-buttons button {\r\n background-color: var(--primary-color);\r\n color: #fff;\r\n border: none;\r\n padding: 12px 25px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n margin: 5px 10px;\r\n transition: background-color 0.3s;\r\n }\r\n .action-buttons button.whatsapp { background-color: #25d366; }\r\n .action-buttons button.clear { background-color: var(--danger-color); }\r\n .add-clause-button {\r\n display: block;\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 20px;\r\n background-color: var(--success-color);\r\n color: #fff;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n text-align: center;\r\n }\r\n .add-clause-button:hover { opacity: 0.9; }\r\n\r\n @media print {\r\n body * { visibility: hidden; }\r\n .contract-output, .contract-output * { visibility: visible; }\r\n .contract-output {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n font-size: 12pt;\r\n }\r\n .user-data {\r\n color: #000 !important;\r\n background-color: transparent !important;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n .clause-actions, .action-buttons, .input-section, .add-clause-button { display: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"contract-container\">\r\n <div class=\"input-section\">\r\n <h3>\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 (\u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635 \u0644\u0637\u0631\u0641 \u062b\u0627\u0644\u062b)<\/h3>\r\n <div class=\"form-grid\">\r\n \r\n <div><label for=\"principalName\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0643\u0644 (\u0627\u0644\u0628\u0627\u0626\u0639):<\/label><input type=\"text\" id=\"principalName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"principalId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0645\u0648\u0643\u0644:<\/label><input type=\"text\" id=\"principalId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"principalAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0643\u0644:<\/label><input type=\"text\" id=\"principalAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"agentName\">\u0627\u0633\u0645 \u0627\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"agentId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"agentAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0648\u0643\u064a\u0644:<\/label><input type=\"text\" id=\"agentAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"beneficiaryName\">\u0627\u0633\u0645 \u0627\u0644\u0645\u062a\u0646\u0627\u0632\u0644 \u0625\u0644\u064a\u0647 (\u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f):<\/label><input type=\"text\" id=\"beneficiaryName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"beneficiaryId\">\u0631\u0642\u0645 \u0642\u0648\u0645\u064a \u0644\u0644\u0645\u0633\u062a\u0641\u064a\u062f:<\/label><input type=\"text\" id=\"beneficiaryId\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"beneficiaryAddress\">\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0633\u062a\u0641\u064a\u062f:<\/label><input type=\"text\" id=\"beneficiaryAddress\" oninput=\"updateAndSave()\"><\/div>\r\n \r\n <div><label for=\"propertyCity\">\u0627\u0644\u0645\u062f\u064a\u0646\u0629:<\/label><input type=\"text\" id=\"propertyCity\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyDistrict\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629\/\u0627\u0644\u062d\u064a:<\/label><input type=\"text\" id=\"propertyDistrict\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"authorityName\">\u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0627\u0628\u0639 \u0644\u0647:<\/label><input type=\"text\" id=\"authorityName\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyNumber\">\u0631\u0642\u0645 \u0642\u0637\u0639\u0629 \u0627\u0644\u0623\u0631\u0636:<\/label><input type=\"text\" id=\"propertyNumber\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"propertyArea\">\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0623\u0631\u0636 (\u06452):<\/label><input type=\"text\" id=\"propertyArea\" oninput=\"updateAndSave()\"><\/div>\r\n <div><label for=\"sharePercentage\">\u0646\u0633\u0628\u0629 \u0627\u0644\u062d\u0635\u0629:<\/label><input type=\"text\" id=\"sharePercentage\" oninput=\"updateAndSave()\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-buttons\" id=\"top-action-buttons\">\r\n <button onclick=\"printContract()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629<\/button>\r\n <button class=\"whatsapp\" onclick=\"shareOnWhatsApp()\">\u0648\u062b\u0642 \u0648\u0634\u0627\u0631\u0643 \u062c\u0645\u064a\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0642\u062f \u0639\u0644\u064a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\r\n <button class=\"clear\" onclick=\"clearAllData()\">\ud83d\uddd1\ufe0f \u0645\u0633\u062d \u0627\u0644\u0643\u0644<\/button>\r\n <\/div>\r\n\r\n <div class=\"contract-output\" id=\"contract-output\"><\/div>\r\n\r\n <div class=\"action-buttons\" id=\"bottom-action-buttons\">\r\n <button onclick=\"printContract()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629<\/button>\r\n <button class=\"whatsapp\" onclick=\"shareOnWhatsApp()\">\u0648\u062b\u0642 \u0648\u0634\u0627\u0631\u0643 \u062c\u0645\u064a\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u0642\u062f \u0639\u0644\u064a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const formFields = ['principalName', 'principalId', 'principalAddress', 'agentName', 'agentId', 'agentAddress', 'beneficiaryName', 'beneficiaryId', 'beneficiaryAddress', 'propertyCity', 'propertyDistrict', 'authorityName', 'propertyNumber', 'propertyArea', 'sharePercentage'];\r\n\r\n const initialClauses = [\r\n {\r\n id: \"intro\",\r\n type: \"fixed\",\r\n content: `<h3>\u062a\u0648\u0643\u064a\u0644 \u062e\u0627\u0635<\/h3>\r\n <p>\u0627\u0646\u0647 \u0641\u064a \u064a\u0648\u0645 <span class=\"user-data\" data-key=\"contractDateFormatted\"><\/span><br>\r\n \u0623\u0645\u0627\u0645\u0646\u0627 \u0646\u062d\u0646 \/ ..................................................<br><br>\r\n \u062d\u0636\u0631 \u0627\u0644\u0633\u064a\u062f \/ <span class=\"user-data\" data-key=\"principalName\"><\/span><br>\r\n \u0627\u0644\u062c\u0646\u0633\u064a\u0629: \u0645\u0635\u0631\u064a, \u0628\u0637\u0627\u0642\u0629 \u0631\u0642\u0645 \u0642\u0648\u0645\u064a: <span class=\"user-data\" data-key=\"principalId\"><\/span><br>\r\n \u0627\u0644\u0639\u0646\u0648\u0627\u0646: <span class=\"user-data\" data-key=\"principalAddress\"><\/span><br>\r\n (\u0637\u0631\u0641 \u0623\u0648\u0644 \u2013 \u0645\u0648\u0643\u0644)<br><br>\r\n \u0648\u0642\u0631\u0631 \u0623\u0646\u0647 \u0648\u0643\u0644 \u0639\u0646\u0647 \/ <span class=\"user-data\" data-key=\"agentName\"><\/span><br>\r\n \u0631\u0642\u0645 \u0642\u0648\u0645\u064a: <span class=\"user-data\" data-key=\"agentId\"><\/span>, \u0627\u0644\u0645\u0642\u064a\u0645\/\u0629 \u0641\u064a: <span class=\"user-data\" data-key=\"agentAddress\"><\/span><br>\r\n (\u0637\u0631\u0641 \u062b\u0627\u0646\u064a \u2013 \u0648\u0643\u064a\u0644)<\/p><hr>`\r\n },\r\n {\r\n id: \"clause_1\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0645\u0648\u0636\u0648\u0639 \u0627\u0644\u062a\u0648\u0643\u064a\u0644\",\r\n content: `\u0648\u0643\u0644\u0647\u0627 \u0641\u064a \u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0646\u064a\u0627\u0628\u0629 \u0639\u0646\u0647 \u0641\u064a \u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644 \u0639\u0646 \u062d\u0635\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 <span class=\"user-data\" data-key=\"sharePercentage\"><\/span> \u0641\u0642\u0637 \u0645\u0646 \u0642\u0637\u0639\u0629 \u0627\u0644\u0627\u0631\u0636 \u0631\u0642\u0645 (<span class=\"user-data\" data-key=\"propertyNumber\"><\/span>) \u0628\u0645\u0646\u0637\u0642\u0629 (<span class=\"user-data\" data-key=\"propertyDistrict\"><\/span>) \u0628\u0645\u0633\u0637\u062d \u0627\u062c\u0645\u0627\u0644\u064a \u0648\u0642\u062f\u0631\u0647 (<span class=\"user-data\" data-key=\"propertyArea\"><\/span> \u06452) \u0648\u0645\u0627 \u0639\u0644\u064a\u0647\u0627 \u0645\u0646 \u0645\u0628\u0627\u0646\u064a \u0628\u0645\u062f\u064a\u0646\u0629 <span class=\"user-data\" data-key=\"propertyCity\"><\/span> \u0648\u0627\u0644\u062a\u0627\u0628\u0639\u0629 (\u0644\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629) \u0644\u0635\u0627\u0644\u062d \u0627\u0644\u0633\u064a\u062f \/ <span class=\"user-data\" data-key=\"beneficiaryName\"><\/span> \u0628\u0637\u0627\u0642\u0629 \u0631\u0642\u0645 \u0642\u0648\u0645\u064a \/ <span class=\"user-data\" data-key=\"beneficiaryId\"><\/span> \u0628\u0639\u0646\u0648\u0627\u0646 <span class=\"user-data\" data-key=\"beneficiaryAddress\"><\/span>. \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u062d\u0642 \u0627\u0644\u062d\u0636\u0648\u0631 \u0646\u064a\u0627\u0628\u0629 \u0639\u0646\u0647 \u0627\u0645\u0627\u0645 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0627\u0645\u0627\u0645 \u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062f\u0627\u0631\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u0645\u062a\u0639\u0644\u0642\u0629 \u0628\u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644.`\r\n },\r\n {\r\n id: \"clause_2\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0635\u0644\u0627\u062d\u064a\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629\",\r\n content: `\u0648\u0643\u0630\u0644\u0643 \u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0644\u0628\u064a\u0627\u0646 \u0627\u0644\u0645\u0627\u0644\u064a \u0648\u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a \u0645\u0646 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0631\u0627\u0646\u064a\u0629 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0631\u062e\u0635\u0629 \u0627\u0644\u0645\u0628\u0627\u0646\u064a \u0648\u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0627 \u0648\u062a\u0639\u062f\u064a\u0644\u0647\u0645 \u0628\u0639\u062f \u0627\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0646\u0627\u0632\u0644 \u0648\u0627\u0633\u062a\u0644\u0627\u0645\u0647\u0645 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062a\u0635\u0627\u0631\u064a\u062d \u0627\u0644\u062d\u0641\u0631 \u0648\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u062a\u0627\u0645\u064a\u0646 \u0627\u0644\u062d\u0641\u0631 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0631\u062e\u0635\u0629 \u0627\u0644\u0647\u062f\u0645 \u0648\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0631\u0633\u0648\u0645\u0627\u062a \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0627\u062a \u0648\u062f\u0641\u0639 \u0643\u0627\u0641\u0629 \u0627\u0644\u0627\u0642\u0633\u0627\u0637 \u0648\u0639\u0645\u0644 \u0642\u0631\u0627\u0631 \u0627\u0644\u0636\u0645 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0629 \u0648\u062f\u0641\u0639 \u0631\u0633\u0648\u0645 \u0627\u0644\u062a\u0639\u0644\u064a\u0629 \u0648\u0632\u064a\u0627\u062f\u0629 \u063a\u0631\u0641 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u0636\u0645 \u0648\u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0639\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0645. \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0639\u0644\u064a \u0637\u0644\u0628\u0627\u062a \u0627\u0644\u062a\u0635\u0627\u0644\u062d \u0641\u064a \u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0627\u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0628\u062f\u0644 \u0641\u0627\u0642\u062f \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u0648\u0631\u0627\u0642 \u0648\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0647 \u0628\u0627\u0644\u0642\u0637\u0639\u0647 \u0648\u062f\u0641\u0639 \u0627\u064a \u0631\u0633\u0648\u0645 \u0645\u062a\u0639\u0644\u0642\u0647 \u0628\u0627\u0644\u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0648\u0627\u0644\u063a\u0631\u0627\u0645\u0627\u062a. \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0644\u0627\u0631\u0636 \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0645\u062d\u0636\u0631 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0648\u0642\u064a\u0639 \u0639\u0644\u064a\u0647 \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u062e\u0637\u0627\u0631 \u0627\u0644\u062a\u062e\u0635\u064a\u0635 \u0645\u0646 <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0648\u0627\u0633\u062a\u0644\u0627\u0645 \u062c\u0648\u0627\u0628 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u062a\u0639\u0627\u0642\u062f \u0639\u0644\u064a\u0647 \u0648\u062a\u0642\u062f\u064a\u0645 \u0637\u0644\u0628 \u062a\u0631\u0643\u064a\u0628 \u0639\u062f\u0627\u062f\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621. \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u062a\u0645\u0627\u0645 \u0627\u062c\u0631\u0627\u0621\u0627\u062a \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0647 \u0641\u064a <span class=\"user-data\" data-key=\"authorityName\"><\/span> \u0648\u0641\u064a \u0643\u0627\u0641\u0629 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u062d\u0643\u0648\u0645\u064a\u0647 \u0627\u0648 \u063a\u064a\u0631 \u062d\u0643\u0648\u0645\u064a\u0629. \u0648\u0645\u062e\u0627\u0637\u0628\u0629 \u0643\u0627\u0641\u0629 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0645\u062b\u0644 \u0627\u0644\u0645\u0631\u0627\u0641\u0642 \u0648\u0634\u0631\u0643\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0634\u0631\u0643\u0629 \u0627\u0644\u0645\u064a\u0627\u0629 \u0648\u0627\u0644\u062a\u0644\u064a\u0641\u0648\u0646 \u0648\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0637\u0628\u064a\u0639\u064a \u0648\u0627\u0644\u0635\u0631\u0641 \u0627\u0644\u0635\u062d\u064a \u0648\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0627\u0644\u0645\u062a\u0639\u0644\u0642\u0629 \u0628\u0642\u0637\u0639\u0629 \u0627\u0644\u0627\u0631\u0636 \u0627\u0644\u0645\u0630\u0643\u0648\u0631\u0629 \u0645\u0646 \u0627\u064a \u062c\u0647\u0629 \u062d\u0643\u0648\u0645\u064a\u0629 \u0623\u0648 \u063a\u064a\u0631 \u062d\u0643\u0648\u0645\u064a\u0629 \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u0644\u0645\u062e\u0627\u0637\u0628\u0629 \u0628\u0637\u0644\u0628 \u0631\u062f \u0627\u0644\u062a\u0623\u0645\u064a\u0646 \u0628\u062c\u0647\u0627\u0632 \u0645\u0634\u0631\u0648\u0639\u0627\u062a \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0647 (\u0627\u0644\u0634\u0631\u0643\u0629 \u0627\u0644\u0645\u0635\u0631\u064a\u0629 \u0644\u0644\u062a\u0639\u062f\u064a\u0646 \u0648\u0627\u062f\u0627\u0631\u0629 \u0648\u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u0645\u062d\u0627\u062c\u0631 \u0648\u0627\u0644\u0645\u0644\u0627\u062d\u0627\u062a).`\r\n },\r\n {\r\n id: \"clause_3\",\r\n type: \"editable\",\r\n isNumbered: false,\r\n title: \"\u0634\u0631\u0648\u0637 \u062e\u0627\u0635\u0629\",\r\n content: \"\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u062a\u0648\u0643\u064a\u0644 \u0627\u0644\u063a\u064a\u0631 \u0641\u064a \u0643\u0644 \u0627\u0648 \u0628\u0639\u0636 \u0645\u0627 \u0630\u0643\u0631 \u0648\u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0627\u0645\u0636\u0627\u0621 \u0627\u0644\u0627\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0630\u0644\u0643\u060c \u0648\u0644\u064a\u0633 \u0644\u0644\u0648\u0643\u064a\u0644 \u0627\u0644\u062d\u0642 \u0641\u064a \u0628\u064a\u0639 \u0627\u0644\u0627\u0631\u0636 \u0644\u0646\u0641\u0633\u0647 \u0627\u0648 \u0644\u0644\u063a\u064a\u0631.\"\r\n },\r\n {\r\n id: \"final\",\r\n type: \"fixed\",\r\n content: `<br><br><table style=\"width:100%; text-align:center;\">\r\n <tr><td style=\"width:50%;\"><strong>\u0627\u0644\u0637\u0631\u0641 \u0627\u0644\u0623\u0648\u0644 (\u0627\u0644\u0645\u0648\u0643\u0644)<\/strong><\/td><td style=\"width:50%;\"><strong>\u0627\u0644\u0645\u0648\u062b\u0642<\/strong><\/td><\/tr>\r\n <tr><td><br><br>\u0627\u0644\u062a\u0648\u0642\u064a\u0639: ............................<\/td><td><br><br>............................<\/td><\/tr>\r\n <\/table>`\r\n }\r\n ];\r\n\r\n let contractData = {};\r\n let clauses = [];\r\n\r\n function renderContract() {\r\n const container = document.getElementById('contract-output');\r\n container.innerHTML = '';\r\n clauses.forEach(clause => {\r\n const clauseDiv = document.createElement('div');\r\n clauseDiv.id = clause.id;\r\n clauseDiv.className = `clause ${clause.type === 'fixed' ? '' : 'editable'}`;\r\n let htmlContent = '';\r\n if (clause.type === 'fixed') {\r\n htmlContent = clause.content;\r\n } else {\r\n htmlContent = `<h4>${clause.title || ''}<\/h4><div class=\"clause-content\" onclick=\"editClause('${clause.id}')\">${clause.content}<\/div><div class=\"clause-actions\"><button onclick=\"deleteClause('${clause.id}')\" title=\"\u062d\u0630\u0641 \u0627\u0644\u0628\u0646\u062f\">\ud83d\uddd1\ufe0f<\/button><\/div>`;\r\n }\r\n clauseDiv.innerHTML = htmlContent;\r\n container.appendChild(clauseDiv);\r\n });\r\n const addButtonContainer = document.createElement('div');\r\n addButtonContainer.style.textAlign = 'center';\r\n const addButton = document.createElement('button');\r\n addButton.className = 'add-clause-button';\r\n addButton.textContent = '\u2795 \u0625\u0636\u0627\u0641\u0629 \u0628\u0646\u062f \u062c\u062f\u064a\u062f';\r\n addButton.onclick = addClause;\r\n addButtonContainer.appendChild(addButton);\r\n container.appendChild(addButtonContainer);\r\n updateDynamicValues();\r\n }\r\n\r\n function updateDynamicValues() {\r\n const displayData = { ...contractData };\r\n const date = new Date();\r\n displayData.contractDateFormatted = `${date.toLocaleDateString('ar-EG', { weekday: 'long' })} \u0627\u0644\u0645\u0648\u0627\u0641\u0642 ${date.toLocaleDateString('ar-EG-u-nu-latn', { day: 'numeric', month: 'long', year: 'numeric' })}`;\r\n \r\n document.querySelectorAll('.user-data').forEach(span => {\r\n const key = span.dataset.key;\r\n const value = displayData[key] || '[........]';\r\n span.innerHTML = value;\r\n });\r\n }\r\n\r\n function updateAndSave() {\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element) contractData[fieldId] = element.value;\r\n });\r\n localStorage.setItem('flexiblePOWData_empty', JSON.stringify({ formData: contractData, clauses: clauses }));\r\n updateDynamicValues();\r\n }\r\n\r\n function loadData() {\r\n const savedData = localStorage.getItem('flexiblePOWData_empty');\r\n if (savedData) {\r\n const data = JSON.parse(savedData);\r\n contractData = data.formData || {};\r\n clauses = data.clauses && data.clauses.length > 0 ? data.clauses : JSON.parse(JSON.stringify(initialClauses));\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element && contractData[fieldId]) {\r\n element.value = contractData[fieldId];\r\n } else if (element) {\r\n element.value = ''; \/\/ Ensure fields are empty if not in saved data\r\n }\r\n });\r\n } else {\r\n clauses = JSON.parse(JSON.stringify(initialClauses));\r\n \/\/ All fields will be empty by default as 'value' attribute is removed\r\n }\r\n renderContract();\r\n }\r\n\r\n function editClause(clauseId) {\r\n const clause = clauses.find(c => c.id === clauseId);\r\n if (!clause || clause.type === 'fixed') return;\r\n const clauseDiv = document.getElementById(clauseId);\r\n const contentDiv = clauseDiv.querySelector('.clause-content');\r\n if (!contentDiv || clauseDiv.querySelector('.clause-editor')) return;\r\n const originalHtml = contentDiv.innerHTML;\r\n const editor = document.createElement('textarea');\r\n editor.className = 'clause-editor';\r\n editor.value = originalHtml.replace(\/<br\\s*\\\/?>\/gi, \"\\n\").replace(\/<span class=\"user-data\"[^>]*>.*?<\\\/span>\/g, match => `[${match.match(\/data-key=\"([^\"]+)\"\/)[1]}]`);\r\n contentDiv.style.display = 'none';\r\n clauseDiv.insertBefore(editor, contentDiv);\r\n editor.focus();\r\n const saveChanges = () => {\r\n let newContent = editor.value.replace(\/\\n\/g, \"<br>\");\r\n newContent = newContent.replace(\/\\[([^\\]]+)\\]\/g, (match, key) => `<span class=\"user-data\" data-key=\"${key}\"><\/span>`);\r\n clause.content = newContent;\r\n clauseDiv.removeChild(editor);\r\n contentDiv.innerHTML = clause.content;\r\n contentDiv.style.display = 'block';\r\n updateAndSave();\r\n };\r\n editor.addEventListener('blur', saveChanges);\r\n editor.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' && e.ctrlKey) saveChanges();\r\n else if (e.key === 'Escape') {\r\n clauseDiv.removeChild(editor);\r\n contentDiv.style.display = 'block';\r\n }\r\n });\r\n }\r\n\r\n function deleteClause(clauseId) {\r\n if (confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0628\u0646\u062f\u061f')) {\r\n clauses = clauses.filter(c => c.id !== clauseId);\r\n renderContract();\r\n updateAndSave();\r\n }\r\n }\r\n\r\n function addClause() {\r\n const newClause = { id: 'clause_' + Date.now(), type: 'editable', isNumbered: false, title: '\u0628\u0646\u062f \u0625\u0636\u0627\u0641\u064a', content: '\u0627\u0643\u062a\u0628 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0646\u062f \u0647\u0646\u0627... (\u0627\u0646\u0642\u0631 \u0644\u0644\u062a\u0639\u062f\u064a\u0644)' };\r\n const finalClauseIndex = clauses.findIndex(c => c.id === 'final');\r\n clauses.splice(finalClauseIndex, 0, newClause);\r\n renderContract();\r\n updateAndSave();\r\n }\r\n\r\n function clearAllData() {\r\n if (confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0623\u0646\u0643 \u062a\u0631\u064a\u062f \u0645\u0633\u062d \u062c\u0645\u064a\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0645\u0633\u062a\u0646\u062f \u0627\u0644\u0623\u0635\u0644\u064a\u061f')) {\r\n localStorage.removeItem('flexiblePOWData_empty');\r\n \/\/ Clear the form fields and contract data object\r\n formFields.forEach(fieldId => {\r\n const element = document.getElementById(fieldId);\r\n if (element) element.value = '';\r\n });\r\n contractData = {};\r\n \/\/ Re-render with initial clauses\r\n clauses = JSON.parse(JSON.stringify(initialClauses));\r\n renderContract();\r\n \/\/ Also clear the storage\r\n localStorage.removeItem('flexiblePOWData_empty');\r\n }\r\n }\r\n\r\n function printContract() { window.print(); }\r\n\r\n function shareOnWhatsApp() {\r\n \/\/ This function remains the same\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', loadData);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/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,"jetpack_post_was_ever_published":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[24126],"tags":[],"class_list":["post-54452","post","type-post","status-publish","format-standard","hentry","category-24126"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":54448,"url":"https:\/\/engeg.com\/b\/2025\/09\/29\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%aa%d9%86%d8%a7%d8%b2%d9%84-%d9%84%d8%b7%d8%b1%d9%81-%d8%a7%d9%84%d9%85%d8%b4%d8%aa%d8%b1%d9%8a\/","url_meta":{"origin":54452,"position":0},"title":"\u062a\u0648\u0643\u064a\u0644 \u062a\u0646\u0627\u0632\u0644 \u0644\u0637\u0631\u0641 \u0627\u0644\u0645\u0634\u062a\u0631\u064a","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 29, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52768,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%b1%d8%b3%d9%85%d9%8a-%d8%b9%d8%a7%d9%85\/","url_meta":{"origin":54452,"position":1},"title":"\u062a\u0648\u0643\u064a\u0644 \u0631\u0633\u0645\u064a \u0639\u0627\u0645 \u0628\u0627\u0644\u0625\u062f\u0627\u0631\u0629","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52773,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%aa%d9%88%d9%83%d9%8a%d9%84-%d8%b1%d8%b3%d9%85%d9%8a-%d8%b9%d8%a7%d9%85-2\/","url_meta":{"origin":54452,"position":2},"title":"\u062a\u0648\u0643\u064a\u0644 \u0631\u0633\u0645\u064a \u0639\u0627\u0645 \u0642\u0646\u0635\u0644\u064a\u0629","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52801,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d9%85%d8%b4%d8%a7%d8%b1%d9%83%d9%87\/","url_meta":{"origin":54452,"position":3},"title":"\u0639\u0642\u062f \u0645\u0634\u0627\u0631\u0643\u0647","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52761,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d8%a7%d9%84%d8%b3%d8%a8%d8%a7%d9%83%d9%87\/","url_meta":{"origin":54452,"position":4},"title":"\u0639\u0642\u062f \u0627\u0644\u0633\u0628\u0627\u0643\u0647","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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":52753,"url":"https:\/\/engeg.com\/b\/2025\/09\/01\/%d8%b9%d9%82%d8%af-%d8%a7%d8%b3%d8%a7%d9%86%d8%b3%d9%8a%d8%b1-%d9%a2\/","url_meta":{"origin":54452,"position":5},"title":"\u0639\u0642\u062f \u0627\u0633\u0627\u0646\u0633\u064a\u0631 \u0662","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 1, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a "\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646"","block_context":{"text":"\u0639\u0642\u0648\u062f \u0648\u062a\u0648\u0643\u064a\u0644\u0627\u062a \u0644\u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646","link":"https:\/\/engeg.com\/b\/category\/%d8%b9%d9%82%d9%88%d8%af-%d9%88%d8%aa%d9%88%d9%83%d9%8a%d9%84%d8%a7%d8%aa-%d9%84%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\/54452","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=54452"}],"version-history":[{"count":1,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/54452\/revisions"}],"predecessor-version":[{"id":54453,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/54452\/revisions\/54453"}],"wp:attachment":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/media?parent=54452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/categories?post=54452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/tags?post=54452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}