{"id":52724,"date":"2025-08-31T19:18:09","date_gmt":"2025-08-31T16:18:09","guid":{"rendered":"https:\/\/engeg.com\/b\/?p=52724"},"modified":"2025-09-05T12:07:23","modified_gmt":"2025-09-05T09:07:23","slug":"%d8%b5%d8%a8-%d9%a3","status":"publish","type":"post","link":"https:\/\/engeg.com\/b\/2025\/08\/31\/%d8%b5%d8%a8-%d9%a3\/","title":{"rendered":"\u0635\u0628 \u0663"},"content":{"rendered":"\n<div class=\"calculator-output\"><!--\r\n    ================================================================\r\n    \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u062d\u0642\u0642 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 (\u0627\u0644\u0625\u0635\u062f\u0627\u0631 20.0 - \u062f\u0645\u062c \u0622\u0645\u0646 \u0644\u0644\u062d\u0627\u0633\u0628\u0629)\r\n    - \u0645\u0628\u0646\u064a \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0644\u0649 \u0643\u0648\u062f \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u0633\u062a\u0642\u0631 (16.3).\r\n    - \u0625\u0636\u0627\u0641\u0629 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0643\u0645\u064a\u0627\u062a \u0641\u064a \u0646\u0627\u0641\u0630\u0629 \u0645\u0646\u0628\u062b\u0642\u0629 (Modal) \u0645\u0639\u0632\u0648\u0644\u0629 \u062a\u0645\u0627\u0645\u064b\u0627.\r\n    - \u0647\u0630\u0627 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u064a\u0636\u0645\u0646 \u0639\u062f\u0645 \u0627\u0644\u0645\u0633\u0627\u0633 \u0628\u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0623\u0635\u0644\u064a \u0627\u0644\u0630\u064a \u064a\u0639\u0645\u0644 \u0628\u0643\u0641\u0627\u0621\u0629.\r\n    ================================================================\r\n-->\r\n\r\n<style>\r\n    \/* Your original, stable CSS styles *\/\r\n    .concrete-checklist-container { font-family:'Cairo',sans-serif; direction:rtl; background:#f9f9f9; padding:25px; border-radius:15px; border:1px solid #e0e0e0; max-width:900px; margin:20px auto; box-shadow:0 4px 12px rgba(0,0,0,0.08); }\r\n    h1,h2,h3{margin:0 0 15px;}\r\n    .checklist-header h1 { text-align:center; color:#2c3e50; }\r\n    .checklist-header p { text-align:center; color:#7f8c8d; margin-bottom:30px; }\r\n    .checklist-section { background:#fff; padding:20px; margin-bottom:25px; border-radius:10px; border:1px solid #ddd; }\r\n    .checklist-section h2 { color:#3498db; border-bottom:2px solid #ecf0f1; padding-bottom:10px; font-size:20px; }\r\n    .checklist-section h3 { color:#555; font-size:16px; margin-top:20px; }\r\n    .form-group { margin-bottom:15px; }\r\n    .form-group label { display:block; font-weight:bold; margin-bottom:6px; }\r\n    .form-group input,.form-group textarea{width:100%; padding:8px; border:1px solid #bdc3c7; border-radius:5px; box-sizing: border-box;}\r\n    .checklist-item{display:flex; justify-content:space-between; align-items: center; padding:12px; border-bottom:1px solid #ecf0f1; border-radius:8px; transition:background 0.3s;}\r\n    .status-done{background:#e8f5e9!important;} .status-not-done{background:#ffebee!important;} .status-na{background:#fff!important;}\r\n    .truck-entry { background:#f7f9fa; border:1px solid #e1e8ed; border-radius:8px; padding:15px; margin-top:15px; display:flex; flex-direction:column; gap:10px;}\r\n    .truck-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }\r\n    .truck-title strong { color:#2c3e50; }\r\n    .delete-truck-link { color: #e74c3c; font-size: 14px; font-weight: bold; cursor: pointer; text-decoration: none; }\r\n    .delete-truck-link:hover { text-decoration: underline; }\r\n    .truck-entry .row { display: flex; gap: 10px; }\r\n    .truck-entry .row > div { flex: 1; }\r\n    .truck-entry label { font-size: 14px; margin-bottom: 4px; display: block; }\r\n    .truck-entry textarea { height: 40px; resize: vertical; }\r\n    .add-truck-area { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }\r\n    .action-button { color:#fff; border:none; padding:10px 15px; border-radius:6px; cursor:pointer; text-align: center; }\r\n    #addTruckBtn{background:#9b59b6;} #addTruckBtn:hover{background:#8e44ad;}\r\n    #trucksSummary { font-size: 13px; color: #555; text-align: center; background: #ecf0f1; padding: 5px; border-radius: 4px; }\r\n    @keyframes pulse-yellow { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); } 70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(241, 196, 15, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); } }\r\n    .submit-button{display:block; width:100%; padding:15px; font-size:18px; font-weight:bold; color:#2c3e50; background:#f1c40f; border:none; border-radius:8px; cursor:pointer; text-align:center; text-decoration:none; animation: pulse-yellow 2s infinite;}\r\n    .submit-button:hover{background:#f39c12; animation-play-state: paused;}\r\n    #liveReportContainer { background: linear-gradient(135deg, #2c3e50, #34495e); color: #fff; padding: 25px; border-radius: 15px; margin-top: 30px; display: none; }\r\n    #liveReportContainer h2 { color: #3498db; text-align: center; border-bottom-color: #4a627a; }\r\n    .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }\r\n    .report-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,0.1); }\r\n    .report-card h3 { color: #ecf0f1; font-size: 16px; margin-bottom: 10px; }\r\n    .report-card p { margin: 0; font-size: 24px; font-weight: bold; color: #fff; }\r\n    .report-card p span { font-size: 14px; color: #bdc3c7; }\r\n    .report-card.alert p { color: #f1c40f; }\r\n    .report-final-cost { text-align: center; margin-top: 20px; background: #16a085; padding: 15px; border-radius: 10px; }\r\n    .report-final-cost h3 { color: #fff; margin: 0; }\r\n    .report-final-cost p { font-size: 28px; font-weight: bold; margin: 5px 0 0 0; }\r\n    #reportTrucksList { list-style: none; padding: 0; margin: 0; }\r\n    #reportTrucksList li { background: rgba(0,0,0,0.2); padding: 12px; border-radius: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }\r\n    #reportTrucksList .truck-main-info { font-weight: bold; font-size: 16px; }\r\n    #reportTrucksList .truck-details { display: flex; gap: 15px; font-size: 14px; color: #bdc3c7; }\r\n    #reportTrucksList .truck-details span { display: flex; align-items: center; gap: 5px; }\r\n\r\n    \/* NEW: Styles for Modal (Popup) Calculator *\/\r\n    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; display: none; justify-content: center; align-items: center; }\r\n    .modal-content { background: #fff; padding: 25px; border-radius: 15px; width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 20px rgba(0,0,0,0.3); }\r\n    .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }\r\n    .modal-header h3 { margin: 0; color: #3498db; }\r\n    .modal-close-btn { font-size: 28px; font-weight: bold; color: #aaa; cursor: pointer; border: none; background: none; }\r\n    .modal-close-btn:hover { color: #333; }\r\n    .calc-item { border: 1px solid #e0e0e0; padding: 15px; margin-top: 15px; border-radius: 8px; background: #fdfdfd; }\r\n    .calc-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }\r\n    .calc-item label { font-size: 14px; }\r\n    .calc-item-volume { margin-top: 10px; font-weight: bold; color: #27ae60; }\r\n    .calc-buttons { display: flex; gap: 10px; margin-top: 20px; }\r\n    .calc-buttons button { flex: 1; padding: 10px; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 14px; }\r\n    #addCalcItemBtn { background: #2980b9; }\r\n    #confirmCalcBtn { background: #27ae60; }\r\n    .calc-summary-table { width: 100%; border-collapse: collapse; margin-top: 15px; text-align: center; }\r\n    .calc-summary-table th, .calc-summary-table td { padding: 8px; border: 1px solid #ddd; }\r\n    .calc-summary-table thead { background: #34495e; color: #fff; }\r\n    #calcTotalResult { margin-top: 15px; font-weight: bold; color: #c0392b; font-size: 18px; text-align: center; background: #f9e79f; padding: 10px; border-radius: 5px; }\r\n    .delete-btn { color: #e74c3c; font-size: 14px; font-weight: bold; cursor: pointer; text-decoration: none; background: none; border: none; padding: 0; }\r\n    .delete-btn:hover { text-decoration: underline; }\r\n<\/style>\r\n<div class=\"concrete-checklist-container\">\r\n    <div class=\"checklist-header\">\r\n        <h1>\ud83d\udccb \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u062d\u0642\u0642 \u0648\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0635\u0628<\/h1>\r\n        <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629\u060c \u0648\u0627\u0644\u0646\u0638\u0627\u0645 \u0633\u064a\u062d\u0633\u0628 \u0644\u0643 \u0627\u0644\u0628\u0627\u0642\u064a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0644\u0645\u0646\u0639 \u0627\u0644\u0647\u062f\u0631.<\/p>\r\n    <\/div>\r\n\r\n    <form id=\"concreteForm\">\r\n        <div class=\"checklist-section\"><h2>\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2><div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639:<\/label><input type=\"text\" name=\"projectName\"><\/div><div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0641:<\/label><input type=\"text\" name=\"supervisorName\"><\/div><div class=\"form-group\"><label>\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0635\u0628\u0629:<\/label><input type=\"date\" name=\"pourDate\"><\/div><div class=\"form-group\"><label>\u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0645\u0635\u0628\u0648\u0628:<\/label><input type=\"text\" name=\"pourElement\"><\/div><\/div>\r\n        \r\n        <div class=\"checklist-section\">\r\n            <h2>\u2699\ufe0f \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629 \u0648\u0627\u0644\u062d\u0627\u0633\u0628\u0629<\/h2>\r\n            <div class=\"form-group\" style=\"border: 2px solid #27ae60; padding: 10px; border-radius: 8px;\">\r\n                <label for=\"requiredQuantity\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0644\u0644\u0635\u0628\u0629 (\u0645\u00b3):<\/label>\r\n                <input type=\"number\" name=\"requiredQuantity\" value=\"0\" placeholder=\"\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u0633\u0648\u0628\u0629 \u0645\u0646 \u0627\u0644\u0644\u0648\u062d\u0627\u062a\">\r\n            <\/div>\r\n            \r\n            <!-- NEW: Button to open the modal calculator -->\r\n            <div class=\"form-group\">\r\n                <button type=\"button\" id=\"openCalcModalBtn\" class=\"action-button\" style=\"background-color: #34495e;\">\ud83e\uddf1 \u0641\u062a\u062d \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0643\u0645\u064a\u0627\u062a<\/button>\r\n            <\/div>\r\n\r\n            <div class=\"form-group\"><label>\u0625\u062c\u0647\u0627\u062f \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629:<\/label><input type=\"text\" name=\"slumpValue\" value=\"400 \u0643\u062c\u0645\/\u0633\u0645\u00b2\"><\/div>\r\n            <div class=\"form-group\"><label>\u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631 (\u062c\u0646\u064a\u0647):<\/label><input type=\"number\" name=\"pricePerM3\" value=\"0\"><\/div>\r\n            <div class=\"form-group\"><label>\u0633\u0639\u0631 \u0627\u0644\u0628\u0627\u0645\u0628 (\u062c\u0646\u064a\u0647):<\/label><input type=\"number\" name=\"pricePump\" value=\"0\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"checklist-section\">\r\n            <h2>\ud83d\ude9a \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/h2>\r\n            <div id=\"trucksContainer\"><\/div>\r\n            <div class=\"add-truck-area\">\r\n                <button type=\"button\" id=\"addTruckBtn\" class=\"action-button\">+ \u062a\u0633\u062c\u064a\u0644 \u0648\u0635\u0648\u0644 \u0633\u064a\u0627\u0631\u0629<\/button>\r\n                <div id=\"trucksSummary\">\u0627\u0644\u0648\u0627\u0635\u0644: 0.00 \u0645\u00b3 | \u0627\u0644\u0645\u062a\u0628\u0642\u064a: 0.00 \u0645\u00b3<\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"checklist-section\"><h2>\u2705 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u062d\u0642\u0642<\/h2><!-- Checklist items are unchanged --><h3>\ud83d\udd39 \u0642\u0628\u0644 \u0627\u0644\u0635\u0628<\/h3><div class=\"checklist-item\"><span>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062e\u0644\u0637\u0629 \u0648\u0627\u0644\u0645\u0648\u0627\u062f<\/span><div><label><input type=\"radio\" name=\"q1\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q1\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q1\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u0644\u0634\u062f\u0629 \u0627\u0644\u062e\u0634\u0628\u064a\u0629<\/span><div><label><input type=\"radio\" name=\"q2\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q2\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q2\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062a\u0633\u0644\u064a\u062d \u0648\u0627\u0644\u0628\u0633\u0643\u0648\u062a<\/span><div><label><input type=\"radio\" name=\"q3\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q3\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q3\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0639\u062f\u0627\u062a \u0648\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u0645\u064a\u0627\u0647<\/span><div><label><input type=\"radio\" name=\"q4\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q4\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q4\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><h3>\ud83d\udd39 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0635\u0628<\/h3><div class=\"checklist-item\"><span>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0647\u0628\u0648\u0637 (Slump Test)<\/span><div><label><input type=\"radio\" name=\"q5\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q5\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q5\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0647\u0632\u0627\u0632 \u0627\u0644\u0645\u064a\u0643\u0627\u0646\u064a\u0643\u064a<\/span><div><label><input type=\"radio\" name=\"q6\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q6\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q6\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0639\u062f\u0645 \u0648\u062c\u0648\u062f \u0641\u0648\u0627\u0635\u0644 \u0628\u0627\u0631\u062f\u0629<\/span><div><label><input type=\"radio\" name=\"q7\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q7\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q7\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0645\u0646\u0639 \u0625\u0636\u0627\u0641\u0629 \u0645\u064a\u0627\u0647 \u0639\u0644\u0649 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629<\/span><div><label><input type=\"radio\" name=\"q8\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q8\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q8\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><h3>\ud83d\udd39 \u0628\u0639\u062f \u0627\u0644\u0635\u0628<\/h3><div class=\"checklist-item\"><span>\u062a\u0633\u0648\u064a\u0629 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u062a\u0634\u0637\u064a\u0628<\/span><div><label><input type=\"radio\" name=\"q9\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q9\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q9\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0627\u0644\u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0645\u0633\u062a\u0645\u0631\u0629<\/span><div><label><input type=\"radio\" name=\"q10\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q10\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q10\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629<\/span><div><label><input type=\"radio\" name=\"q11\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q11\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q11\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><div class=\"checklist-item\"><span>\u0623\u062e\u0630 \u0645\u0643\u0639\u0628\u0627\u062a \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/span><div><label><input type=\"radio\" name=\"q12\" value=\"\u062a\u0645\"> \u062a\u0645<\/label><label><input type=\"radio\" name=\"q12\" value=\"\u0644\u0645 \u064a\u062a\u0645\"> \u0644\u0645 \u064a\u062a\u0645<\/label><label><input type=\"radio\" name=\"q12\" value=\"\u0644\u0627 \u064a\u0646\u0637\u0628\u0642\" checked> \u0644\u0627 \u064a\u0646\u0637\u0628\u0642<\/label><\/div><\/div><\/div>\r\n        \r\n        <a id=\"sendReportButton\" class=\"submit-button\" href=\"#\">\ud83d\udce4 \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u062a\u0642\u0631\u064a\u0631 \u0648\u0625\u0631\u0633\u0627\u0644\u0647 \u0648\u0627\u062a\u0633\u0627\u0628<\/a>\r\n    <\/form>\r\n\r\n    <!-- Live Report Dashboard -->\r\n    <div id=\"liveReportContainer\">\r\n        <h2>\ud83d\udcca \u062a\u0642\u0631\u064a\u0631\u0643 \u0627\u0644\u0645\u0628\u0627\u0634\u0631<\/h2>\r\n        <div class=\"report-grid\">\r\n            <div class=\"report-card\" id=\"remainingCard\"><h3>\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629<\/h3><p id=\"reportRemainingM3\">0.00 <span>\u0645\u00b3<\/span><\/p><\/div>\r\n            <div class=\"report-card\"><h3>\u0625\u062c\u0645\u0627\u0644\u064a \u0645\u0627 \u062a\u0645 \u0635\u0628\u0647<\/h3><p id=\"reportTotalM3\">0.00 <span>\u0645\u00b3<\/span><\/p><\/div>\r\n            <div class=\"report-card\"><h3>\u0639\u062f\u062f \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/h3><p id=\"reportTotalTrucks\">0<\/p><\/div>\r\n            <div class=\"report-card\"><h3>\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u062d\u0642\u0642<\/h3><p id=\"reportChecklistStatus\">0 \/ 12<\/p><\/div>\r\n        <\/div>\r\n        <div class=\"report-card\" style=\"margin-top: 20px;\">\r\n            <h3>\u0645\u0644\u062e\u0635 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/h3>\r\n            <ul id=\"reportTrucksList\"><li style=\"text-align:center; display:block;\">\u0644\u0645 \u064a\u062a\u0645 \u062a\u0633\u062c\u064a\u0644 \u0623\u064a \u0633\u064a\u0627\u0631\u0627\u062a \u0628\u0639\u062f.<\/li><\/ul>\r\n        <\/div>\r\n        <div id=\"reportFinalCost\" class=\"report-final-cost\">\r\n            <h3>\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<\/h3><p>0.00 <span>\u062c\u0646\u064a\u0647<\/span><\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- NEW: Modal Structure for the Calculator -->\r\n    <div id=\"calculatorModal\" class=\"modal-overlay\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>\ud83e\uddf1 \u062d\u0627\u0633\u0628\u0629 \u0643\u0645\u064a\u0627\u062a \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629<\/h3>\r\n                <button id=\"closeCalcModalBtn\" class=\"modal-close-btn\">&times;<\/button>\r\n            <\/div>\r\n            <div id=\"calcItemsContainer\"><\/div>\r\n            <div class=\"calc-buttons\">\r\n                <button type=\"button\" id=\"addCalcItemBtn\">\u2795 \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0635\u0631<\/button>\r\n                <button type=\"button\" id=\"confirmCalcBtn\">\u2705 \u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0648\u0625\u063a\u0644\u0627\u0642<\/button>\r\n            <\/div>\r\n            <div id=\"calcSummaryContainer\" style=\"margin-top: 20px;\"><\/div>\r\n            <div id=\"calcTotalResult\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a = 0.00 \u0645\u00b3<\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', ()=>{\r\n    \/\/ --- Main App Elements (Your stable code) ---\r\n    const form = document.getElementById('concreteForm');\r\n    const trucksContainer = document.getElementById('trucksContainer');\r\n    const addTruckBtn = document.getElementById('addTruckBtn');\r\n    const formId = 'concreteFormData_v16.3'; \/\/ Using your stable version key\r\n\r\n    \/\/ --- Main App Functions (Your stable code, UNCHANGED) ---\r\n    function saveState() {\r\n        const data = {};\r\n        form.querySelectorAll('input, textarea').forEach(el => {\r\n            if (el.type === 'radio') { if (el.checked) data[el.name] = el.value; } \r\n            else { data[el.name] = el.value; }\r\n        });\r\n        data.trucks = [];\r\n        trucksContainer.querySelectorAll('.truck-entry').forEach(div => {\r\n            data.trucks.push({\r\n                num: div.querySelector('.truckNum').value,\r\n                time: div.querySelector('.truckTime').value,\r\n                m3: div.querySelector('.truckM3').value,\r\n                note: div.querySelector('.truckNote').value,\r\n            });\r\n        });\r\n        localStorage.setItem(formId, JSON.stringify(data));\r\n        updateLiveReport();\r\n    }\r\n\r\n    function loadState() {\r\n        const data = JSON.parse(localStorage.getItem(formId));\r\n        if (!data) {\r\n            form.pourDate.value = new Date().toISOString().split('T')[0];\r\n            updateLiveReport();\r\n            return;\r\n        }\r\n        form.querySelectorAll('input, textarea').forEach(el => {\r\n            if (data[el.name] !== undefined) {\r\n                if (el.type === 'radio') { if (el.value === data[el.name]) el.checked = true; } \r\n                else { el.value = data[el.name]; }\r\n            }\r\n        });\r\n        if (data.trucks) { data.trucks.forEach(truck => addTruckEntry(truck)); }\r\n        updateAllColors();\r\n        updateLiveReport();\r\n    }\r\n\r\n    function addTruckEntry(data={}){\r\n        const truckCounter = trucksContainer.children.length + 1;\r\n        const div = document.createElement('div');\r\n        div.className=\"truck-entry\";\r\n        div.innerHTML = `\r\n            <div class=\"truck-title\">\r\n                <strong>\ud83d\ude9b \u0633\u064a\u0627\u0631\u0629 ${truckCounter}<\/strong>\r\n                <a href=\"#\" class=\"delete-truck-link\">[\u062d\u0630\u0641]<\/a>\r\n            <\/div>\r\n            <div class=\"row\">\r\n                <div><label>\u0631\u0642\u0645 \u0627\u0644\u0633\u064a\u0627\u0631\u0629:<\/label><input type=\"text\" class=\"truckNum\" value=\"${data.num||''}\"><\/div>\r\n                <div><label>\u0639\u062f\u062f \u0627\u0644\u0623\u0645\u062a\u0627\u0631:<\/label><input type=\"number\" class=\"truckM3\" value=\"${data.m3||9}\"><\/div>\r\n            <\/div>\r\n            <label>\u0648\u0642\u062a \u0627\u0644\u0648\u0635\u0648\u0644:<input type=\"time\" class=\"truckTime\" value=\"${data.time||new Date().toTimeString().substring(0,5)}\"><\/label>\r\n            <label>\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<textarea class=\"truckNote\" rows=\"1\">${data.note||''}<\/textarea><\/label>\r\n        `;\r\n        trucksContainer.appendChild(div);\r\n    }\r\n\r\n    function updateAllColors() {\r\n        document.querySelectorAll('input[type=radio]:checked').forEach(r => {\r\n            const item = r.closest('.checklist-item');\r\n            item.classList.remove('status-done','status-not-done','status-na');\r\n            if(r.value===\"\u062a\u0645\") item.classList.add('status-done');\r\n            else if(r.value===\"\u0644\u0645 \u064a\u062a\u0645\") item.classList.add('status-not-done');\r\n            else item.classList.add('status-na');\r\n        });\r\n    }\r\n\r\n    function updateLiveReport() {\r\n        const reportContainer = document.getElementById('liveReportContainer');\r\n        const truckEntries = trucksContainer.querySelectorAll('.truck-entry');\r\n        \r\n        if (truckEntries.length > 0 || form.projectName.value) {\r\n            reportContainer.style.display = 'block';\r\n        } else {\r\n            reportContainer.style.display = 'none';\r\n        }\r\n\r\n        let totalM3 = 0;\r\n        truckEntries.forEach(div => { totalM3 += parseFloat(div.querySelector('.truckM3').value) || 0; });\r\n        \r\n        const requiredQuantity = parseFloat(form.requiredQuantity.value) || 0;\r\n        const remainingM3 = requiredQuantity - totalM3;\r\n        \r\n        const remainingCard = document.getElementById('remainingCard');\r\n        const reportRemainingM3 = document.getElementById('reportRemainingM3');\r\n        reportRemainingM3.innerHTML = `${remainingM3.toFixed(2)} <span>\u0645\u00b3<\/span>`;\r\n        if (remainingM3 > 0 && remainingM3 < 9) {\r\n            remainingCard.classList.add('alert');\r\n        } else {\r\n            remainingCard.classList.remove('alert');\r\n        }\r\n        document.getElementById('reportTotalM3').innerHTML = `${totalM3.toFixed(2)} <span>\u0645\u00b3<\/span>`;\r\n        \r\n        const trucksSummary = document.getElementById('trucksSummary');\r\n        trucksSummary.textContent = `\u0627\u0644\u0648\u0627\u0635\u0644: ${totalM3.toFixed(2)} \u0645\u00b3 | \u0627\u0644\u0645\u062a\u0628\u0642\u064a: ${remainingM3.toFixed(2)} \u0645\u00b3`;\r\n\r\n        const price = parseFloat(form.pricePerM3.value) || 0;\r\n        const pump = parseFloat(form.pricePump.value) || 0;\r\n        const cost = totalM3 * price + (pump > 0 ? pump : 0);\r\n        const checklistDone = document.querySelectorAll('input[name^=\"q\"][value=\"\u062a\u0645\"]:checked').length;\r\n\r\n        document.getElementById('reportTotalTrucks').textContent = truckEntries.length;\r\n        document.getElementById('reportChecklistStatus').textContent = `${checklistDone} \/ 12`;\r\n        \r\n        document.getElementById('reportFinalCost').querySelector('p').innerHTML = `${cost.toLocaleString('ar-EG')} <span>\u062c\u0646\u064a\u0647<\/span>`;\r\n\r\n        const list = document.getElementById('reportTrucksList');\r\n        list.innerHTML = '';\r\n        if (truckEntries.length > 0) {\r\n            truckEntries.forEach((div, i) => {\r\n                const num = div.querySelector('.truckNum').value || '---';\r\n                const time = div.querySelector('.truckTime').value || '---';\r\n                const m3 = (parseFloat(div.querySelector('.truckM3').value) || 0).toFixed(2);\r\n                list.innerHTML += `<li><div class=\"truck-main-info\">\ud83d\ude9b \u0633\u064a\u0627\u0631\u0629 ${i + 1} (\u0631\u0642\u0645 ${num})<\/div><div class=\"truck-details\"><span>\ud83d\udd52 ${time}<\/span><span>\ud83d\udce6 ${m3} \u0645\u00b3<\/span><\/div><\/li>`;\r\n            });\r\n        } else {\r\n            list.innerHTML = `<li style=\"text-align:center; display:block;\">\u0644\u0645 \u064a\u062a\u0645 \u062a\u0633\u062c\u064a\u0644 \u0623\u064a \u0633\u064a\u0627\u0631\u0627\u062a \u0628\u0639\u062f.<\/li>`;\r\n        }\r\n    }\r\n\r\n    \/\/ --- Main App Event Listeners (Your stable code, UNCHANGED) ---\r\n    form.addEventListener('input', saveState);\r\n    addTruckBtn.addEventListener('click', () => { \r\n        addTruckEntry(); \r\n        saveState(); \r\n    });\r\n    trucksContainer.addEventListener('click', (e) => {\r\n        if (e.target.classList.contains('delete-truck-link')) {\r\n            e.preventDefault();\r\n            e.target.closest('.truck-entry').remove();\r\n            trucksContainer.querySelectorAll('.truck-entry').forEach((div, index) => {\r\n                div.querySelector('strong').textContent = `\ud83d\ude9b \u0633\u064a\u0627\u0631\u0629 ${index + 1}`;\r\n            });\r\n            saveState();\r\n        }\r\n    });\r\n    form.addEventListener('change', (e) => {\r\n        if (e.target.type === 'radio') { updateAllColors(); saveState(); }\r\n    });\r\n    document.getElementById('sendReportButton').addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        \/\/ WhatsApp report generation logic is unchanged\r\n        let txt = `*\u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0645\u0642\u062f\u0645\u0629 \u0645\u0646 \u0645\u0648\u0642\u0639 *\u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646**\\n`;\r\n        txt += `\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u062a\u0627\u0628\u0639\u0646\u0627 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628: *+201550507700*\\n`;\r\n        txt += `-----------------------------------\\n\\n`;\r\n        txt += `\ud83d\udccb *\u062a\u0642\u0631\u064a\u0631 \u0625\u0634\u0631\u0627\u0641 \u0635\u0628\u0629 \u062e\u0631\u0633\u0627\u0646\u064a\u0629*\\n\\n`;\r\n        txt += `*\ud83c\udfd7\ufe0f \u0627\u0644\u0645\u0634\u0631\u0648\u0639:* ${form.projectName.value || '---'}\\n*\ud83d\udc77 \u0627\u0644\u0645\u0634\u0631\u0641:* ${form.supervisorName.value || '---'}\\n*\ud83d\udcc5 \u0627\u0644\u062a\u0627\u0631\u064a\u062e:* ${form.pourDate.value || '---'}\\n*\ud83d\udccc \u0627\u0644\u0639\u0646\u0635\u0631:* ${form.pourElement.value || '---'}\\n\\n`;\r\n        const requiredQty = parseFloat(form.requiredQuantity.value) || 0;\r\n        let totalM3 = 0;\r\n        trucksContainer.querySelectorAll('.truck-entry').forEach(div => { totalM3 += parseFloat(div.querySelector('.truckM3').value) || 0; });\r\n        const remainingQty = requiredQty - totalM3;\r\n        txt += `*\ud83d\udcc9 \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0635\u0628:*\\n- \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629: *${requiredQty.toFixed(2)} \u0645\u00b3*\\n- \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0648\u0627\u0635\u0644\u0629: *${totalM3.toFixed(2)} \u0645\u00b3*\\n- \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629: *${remainingQty.toFixed(2)} \u0645\u00b3*\\n\\n`;\r\n        txt += `*\u2699\ufe0f \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629:*\\n- \u0625\u062c\u0647\u0627\u062f: ${form.slumpValue.value}\\n- \u0633\u0639\u0631 \u0627\u0644\u0645\u062a\u0631: ${form.pricePerM3.value} \u062c\\n- \u0633\u0639\u0631 \u0627\u0644\u0628\u0627\u0645\u0628: ${form.pricePump.value} \u062c\\n\\n`;\r\n        const truckEntries = trucksContainer.querySelectorAll('.truck-entry');\r\n        if (truckEntries.length > 0) {\r\n            txt += `*\ud83d\ude9a \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a:*\\n`;\r\n            let currentTotalM3 = 0;\r\n            truckEntries.forEach((div, i) => {\r\n                const num = div.querySelector('.truckNum').value || '---';\r\n                const time = div.querySelector('.truckTime').value || '---';\r\n                const m3 = parseFloat(div.querySelector('.truckM3').value) || 0;\r\n                const note = div.querySelector('.truckNote').value || '';\r\n                currentTotalM3 += m3;\r\n                txt += `${i + 1}- \u0631\u0642\u0645: *${num}* | \u0648\u0642\u062a: *${time}* | *${m3.toFixed(2)} \u0645\u00b3*${note ? \" | \" + note : \"\"}\\n`;\r\n            });\r\n            const price = parseFloat(form.pricePerM3.value) || 0;\r\n            const pump = parseFloat(form.pricePump.value) || 0;\r\n            const cost = currentTotalM3 * price + (pump > 0 ? pump : 0);\r\n            txt += `\\n*\ud83d\udcca \u0645\u0644\u062e\u0635 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a:*\\n- \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u0645\u062a\u0627\u0631: *${currentTotalM3.toFixed(2)} \u0645\u00b3*\\n- \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0629: *${cost.toLocaleString('ar-EG')} \u062c\u0646\u064a\u0647*\\n\\n`;\r\n        }\r\n        txt +=\r\n<\/div>\n\n\n\n<div class=\"calculator-output\"><!DOCTYPE html>\r\n<html lang=\"ar\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u062d\u0627\u0633\u0628\u0629 \u0643\u0645\u064a\u0627\u062a \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629<\/title>\r\n    <!--\r\n        ================================================================\r\n        \u0645\u0644\u0641 (2\/2): \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0643\u0645\u064a\u0627\u062a (\u0627\u0644\u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0645\u0639 \u0627\u0644\u062d\u0641\u0638 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a)\r\n        - \u0625\u0636\u0627\u0641\u0629 \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u062d\u0641\u0638 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d (localStorage).\r\n        - \u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0646\u062f \u062a\u062d\u062f\u064a\u062b \u0623\u0648 \u0625\u0639\u0627\u062f\u0629 \u0641\u062a\u062d \u0627\u0644\u0635\u0641\u062d\u0629.\r\n        - \u0625\u0636\u0627\u0641\u0629 \u0632\u0631 \"\u0645\u0633\u062d \u0627\u0644\u0643\u0644\" \u0644\u0644\u0628\u062f\u0621 \u0645\u0646 \u062c\u062f\u064a\u062f.\r\n        ================================================================\r\n    -->\r\n    <style>\r\n        body { font-family:'Cairo',sans-serif; direction:rtl; background:#f0f2f5; }\r\n        .calculator-container { max-width:800px; margin:30px auto; padding:25px; border:1px solid #e0e0e0; border-radius:15px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.08); }\r\n        h3 { text-align:center; color:#2c3e50; margin-bottom:20px; font-size: 24px; }\r\n        .item-container { border: 1px solid #ddd; padding: 15px; margin-top: 15px; border-radius: 8px; background: #f9f9f9; }\r\n        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }\r\n        label { display:block; font-weight:bold; margin-bottom:6px; font-size: 14px; }\r\n        input { width:100%; padding:8px; border:1px solid #bdc3c7; border-radius:5px; box-sizing: border-box; }\r\n        .item-volume { margin-top:15px; font-weight:bold; color:#27ae60; font-size:15px; }\r\n        .main-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 20px; }\r\n        .main-buttons button { padding: 12px; font-size: 16px; border:none; border-radius:8px; color:#fff; cursor:pointer; }\r\n        #addItemBtn { background:#3498db; }\r\n        #copyResultBtn { background:#95a5a6; }\r\n        #shareWhatsAppBtn { background:#25D366; }\r\n        #clearAllBtn { background:#c0392b; } \/* NEW *\/\r\n        .delete-btn { margin-top:10px; background:#e74c3c; color:#fff; border:none; padding:6px 12px; border-radius:5px; cursor:pointer; }\r\n        .summary-table { width:100%; border-collapse:collapse; margin-top:25px; text-align:center; }\r\n        .summary-table th, .summary-table td { padding:10px; border:1px solid #ddd; }\r\n        .summary-table thead { background:#34495e; color:#fff; }\r\n        .total-result { margin-top:20px; font-weight:bold; color:#c0392b; font-size:22px; text-align:center; background:#fdf3e6; padding:15px; border-radius:8px; border: 2px solid #f5cba7; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"calculator-container\">\r\n  <h3>\ud83e\uddf1 \u062d\u0627\u0633\u0628\u0629 \u062d\u062c\u0645 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629 (\u0643\u0645\u0631\u0629 - \u0639\u0645\u0648\u062f - \u0628\u0644\u0627\u0637\u0629)<\/h3>\r\n\r\n  <div id=\"items\"><\/div>\r\n\r\n  <div class=\"main-buttons\">\r\n    <button id=\"addItemBtn\">\u2795 \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0635\u0631<\/button>\r\n    <button id=\"copyResultBtn\">\ud83d\udccb \u0646\u0633\u062e \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a<\/button>\r\n    <button id=\"shareWhatsAppBtn\">\u0634\u0627\u0631\u0643 \u0648\u0627\u062a\u0633\u0627\u0628<\/button>\r\n    <button id=\"clearAllBtn\">\ud83d\uddd1\ufe0f \u0645\u0633\u062d \u0627\u0644\u0643\u0644<\/button>\r\n  <\/div>\r\n  \r\n  <div id=\"summary\"><\/div>\r\n  <div id=\"result\" class=\"total-result\">\ud83d\udd39 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a = 0.00 \u0645\u00b3<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const itemsContainer = document.getElementById('items');\r\n    const storageKey = 'concreteCalculatorData_v1'; \/\/ Key for localStorage\r\n    let totalResultValue = 0;\r\n    let whatsAppMessage = '';\r\n\r\n    \/\/ --- Event Listeners ---\r\n    document.getElementById('addItemBtn').addEventListener('click', () => addItem());\r\n    document.getElementById('copyResultBtn').addEventListener('click', copyTotal);\r\n    document.getElementById('shareWhatsAppBtn').addEventListener('click', shareToWhatsApp);\r\n    document.getElementById('clearAllBtn').addEventListener('click', clearAllData);\r\n\r\n    \/\/ --- Core Functions ---\r\n    function addItem(data = {}) {\r\n        const itemId = Date.now(); \/\/ Use timestamp for a unique ID\r\n        const container = document.createElement(\"div\");\r\n        container.className = 'item-container';\r\n        container.dataset.id = itemId; \/\/ Set a data attribute for easy selection\r\n        \r\n        container.innerHTML = `\r\n            <div class=\"form-grid\">\r\n                <div>\r\n                    <label>\u0627\u0633\u0645 \u0627\u0644\u0639\u0646\u0635\u0631:<\/label>\r\n                    <input type=\"text\" name=\"name\" placeholder=\"\u0645\u062b\u0627\u0644: \u0639\u0645\u0648\u062f 1\" value=\"${data.name || ''}\">\r\n                <\/div>\r\n                <div>\r\n                    <label>\u0627\u0644\u0639\u062f\u062f:<\/label>\r\n                    <input type=\"number\" name=\"count\" value=\"${data.count || 1}\" min=\"1\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"form-grid\" style=\"margin-top: 10px;\">\r\n                <div>\r\n                    <label>\u0627\u0644\u0637\u0648\u0644 (\u0645):<\/label>\r\n                    <input type=\"number\" name=\"length\" step=\"0.01\" value=\"${data.length || ''}\">\r\n                <\/div>\r\n                <div>\r\n                    <label>\u0627\u0644\u0639\u0631\u0636 (\u0645):<\/label>\r\n                    <input type=\"number\" name=\"width\" step=\"0.01\" value=\"${data.width || ''}\">\r\n                <\/div>\r\n                <div>\r\n                    <label>\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \/ \u0627\u0644\u0633\u0645\u0643 (\u0645):<\/label>\r\n                    <input type=\"number\" name=\"height\" step=\"0.01\" value=\"${data.height || ''}\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"item-volume\">\u062d\u062c\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 = 0.00 \u0645\u00b3<\/div>\r\n            <button class=\"delete-btn\">\ud83d\uddd1 \u062d\u0630\u0641<\/button>\r\n        `;\r\n        \r\n        itemsContainer.appendChild(container);\r\n        \r\n        container.querySelector(\".delete-btn\").addEventListener('click', (e) => {\r\n            e.target.parentElement.remove();\r\n            updateTotal();\r\n        });\r\n\r\n        container.querySelectorAll(\"input\").forEach(input => {\r\n            input.addEventListener(\"input\", updateTotal);\r\n        });\r\n\r\n        updateTotal();\r\n    }\r\n\r\n    function updateTotal() {\r\n        let total = 0;\r\n        let summaryTable = `<table class=\"summary-table\"><thead><tr><th>\u0627\u0633\u0645 \u0627\u0644\u0639\u0646\u0635\u0631<\/th><th>\u0627\u0644\u0639\u062f\u062f<\/th><th>\u0627\u0644\u062d\u062c\u0645 (\u0645\u00b3)<\/th><\/tr><\/thead><tbody>`;\r\n        let reportText = `*\ud83e\uddf1 \u062a\u0642\u0631\u064a\u0631 \u062d\u0633\u0627\u0628 \u0643\u0645\u064a\u0627\u062a \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629*\\n\\n`;\r\n        const itemsData = []; \/\/ Array to hold data for saving\r\n\r\n        itemsContainer.querySelectorAll(\".item-container\").forEach(div => {\r\n            const item = {\r\n                name: div.querySelector('[name=\"name\"]').value || \"\u0628\u062f\u0648\u0646 \u0627\u0633\u0645\",\r\n                count: parseFloat(div.querySelector('[name=\"count\"]').value) || 0,\r\n                length: parseFloat(div.querySelector('[name=\"length\"]').value) || 0,\r\n                width: parseFloat(div.querySelector('[name=\"width\"]').value) || 0,\r\n                height: parseFloat(div.querySelector('[name=\"height\"]').value) || 0,\r\n            };\r\n            itemsData.push(item); \/\/ Add item data to the array for saving\r\n\r\n            const volume = item.count * item.length * item.width * item.height;\r\n            div.querySelector(\".item-volume\").innerHTML = \"\u062d\u062c\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 = \" + volume.toFixed(3) + \" \u0645\u00b3\";\r\n            total += volume;\r\n\r\n            summaryTable += `<tr><td>${item.name}<\/td><td>${item.count}<\/td><td>${volume.toFixed(3)}<\/td><\/tr>`;\r\n            reportText += `*${item.name}*:\\n- \u0627\u0644\u0639\u062f\u062f: ${item.count}\\n- \u0627\u0644\u0623\u0628\u0639\u0627\u062f: ${item.length}\u0645 \u00d7 ${item.width}\u0645 \u00d7 ${item.height}\u0645\\n- \u0627\u0644\u062d\u062c\u0645: *${volume.toFixed(3)} \u0645\u00b3*\\n\\n`;\r\n        });\r\n\r\n        summaryTable += `<\/tbody><\/table>`;\r\n        document.getElementById(\"summary\").innerHTML = itemsData.length > 0 ? summaryTable : '';\r\n        \r\n        totalResultValue = total;\r\n        document.getElementById(\"result\").innerHTML = \"\ud83d\udd39 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a = \" + total.toFixed(2) + \" \u0645\u00b3\";\r\n\r\n        if (itemsData.length > 0) {\r\n            reportText += `-------------------------\\n*\ud83d\udd39 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a = ${total.toFixed(2)} \u0645\u00b3*`;\r\n            whatsAppMessage = reportText;\r\n        } else {\r\n            whatsAppMessage = '';\r\n        }\r\n        \r\n        saveData(itemsData); \/\/ Save data to localStorage\r\n    }\r\n\r\n    function saveData(data) {\r\n        localStorage.setItem(storageKey, JSON.stringify(data));\r\n    }\r\n\r\n    function loadData() {\r\n        const data = JSON.parse(localStorage.getItem(storageKey));\r\n        if (data && data.length > 0) {\r\n            data.forEach(item => addItem(item));\r\n        }\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 \u062d\u0630\u0641 \u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0644\u0628\u062f\u0621 \u0645\u0646 \u062c\u062f\u064a\u062f\u061f')) {\r\n            itemsContainer.innerHTML = ''; \/\/ Clear visually\r\n            localStorage.removeItem(storageKey); \/\/ Clear from storage\r\n            updateTotal(); \/\/ Update totals to zero\r\n        }\r\n    }\r\n\r\n    function copyTotal() {\r\n        navigator.clipboard.writeText(totalResultValue.toFixed(2)).then(() => {\r\n            alert('\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a: ' + totalResultValue.toFixed(2));\r\n        }, () => {\r\n            alert('\u0641\u0634\u0644 \u0627\u0644\u0646\u0633\u062e');\r\n        });\r\n    }\r\n\r\n    function shareToWhatsApp() {\r\n        if (whatsAppMessage) {\r\n            const fullMessage = whatsAppMessage +\r\n                `\\n-------------------------\\n` +\r\n                `*\u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0645\u0642\u062f\u0645\u0629 \u0645\u0646 \u0645\u0648\u0642\u0639 \u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646*\\n` +\r\n                `\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u062a\u0627\u0628\u0639\u0646\u0627 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628: +201550507700`;\r\n            \r\n            const whatsappUrl = `https:\/\/wa.me\/?text=${encodeURIComponent(fullMessage)}`;\r\n            window.open(whatsappUrl, '_blank');\r\n        } else {\r\n            alert('\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0627\u0635\u0631 \u0623\u0648\u0644\u0627\u064b \u0642\u0628\u0644 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629.');\r\n        }\r\n    }\r\n\r\n    \/\/ --- Initial Load ---\r\n    loadData();\r\n});\r\n<\/script>\r\n\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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[24128],"tags":[],"class_list":["post-52724","post","type-post","status-publish","format-standard","hentry","category-24128"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":52740,"url":"https:\/\/engeg.com\/b\/2025\/08\/31\/%d9%83%d9%85%d9%8a%d8%a7%d8%aa-%d8%b5%d8%a8-%d9%a4\/","url_meta":{"origin":52724,"position":0},"title":"\u0643\u0645\u064a\u0627\u062a \u0635\u0628 \u0664","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 31, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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":52685,"url":"https:\/\/engeg.com\/b\/2025\/08\/30\/%d8%ae%d8%b1%d8%b3%d8%a7%d9%86%d9%87\/","url_meta":{"origin":52724,"position":1},"title":"\u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u062d\u0633\u0627\u0628\u0627\u062a \u0635\u0628 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629 \u0628\u0627\u0644\u0645\u0648\u0642\u0639","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 30, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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":52680,"url":"https:\/\/engeg.com\/b\/2025\/08\/30\/%d8%b5%d8%a8-%d8%a7%d9%84%d8%ae%d8%b1%d8%b3%d8%a7%d9%86%d9%87\/","url_meta":{"origin":52724,"position":2},"title":"\u0635\u0628 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0647","author":"interior","date":"\u0623\u063a\u0633\u0637\u0633 30, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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":52724,"position":3},"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 &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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":55756,"url":"https:\/\/engeg.com\/b\/2026\/01\/19\/seramek\/","url_meta":{"origin":52724,"position":4},"title":"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0633\u064a\u0631\u0627\u0645\u064a\u0643","author":"interior","date":"\u064a\u0646\u0627\u064a\u0631 19, 2026","format":false,"excerpt":"","rel":"","context":"\u0641\u064a &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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":53121,"url":"https:\/\/engeg.com\/b\/2025\/09\/07\/%d9%87%d9%8a%d9%83%d9%84-%d8%ac\/","url_meta":{"origin":52724,"position":5},"title":"\u0647\u064a\u0643\u0644 \u062c","author":"interior","date":"\u0633\u0628\u062a\u0645\u0628\u0631 7, 2025","format":false,"excerpt":"","rel":"","context":"\u0641\u064a &quot;\u062d\u0633\u0627\u0628\u0627\u062a \u062a\u0647\u0645\u0643 \u0641\u064a \u0628\u064a\u062a \u0627\u0644\u0648\u0637\u0646&quot;","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\/52724","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=52724"}],"version-history":[{"count":5,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/52724\/revisions"}],"predecessor-version":[{"id":52739,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/posts\/52724\/revisions\/52739"}],"wp:attachment":[{"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/media?parent=52724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/categories?post=52724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engeg.com\/b\/wp-json\/wp\/v2\/tags?post=52724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}