\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Cairo', sans-serif;\n background: #0a0a0a;\n color: #333;\n min-height: 100vh;\n padding: 0;\n }\n\n .header {\n background: #000;\n color: white;\n padding: 40px 20px;\n text-align: center;\n border-bottom: 2px solid #945d34;\n }\n\n .header h1 {\n font-size: 48px;\n margin-bottom: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n }\n\n .header p {\n font-size: 16px;\n opacity: 0.9;\n color: #999;\n }\n\n .container {\n max-width: 1400px;\n margin: 30px auto;\n padding: 0 20px;\n }\n\n .main-content {\n background: white;\n border-radius: 4px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n\n .tabs {\n display: flex;\n gap: 0;\n background: #f5f5f5;\n border-bottom: 1px solid #ddd;\n padding: 0;\n }\n\n .tab-button {\n flex: 1;\n padding: 18px 20px;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n transition: all 0.3s;\n border-bottom: 3px solid transparent;\n position: relative;\n }\n\n .tab-button:hover {\n background: #f9f9f9;\n color: #333;\n }\n\n .tab-button.active {\n color: #945d34;\n border-bottom-color: #945d34;\n background: white;\n }\n\n .tab-content {\n display: none;\n padding: 40px;\n }\n\n .tab-content.active {\n display: block;\n animation: fadeIn 0.4s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n h2 {\n color: #000;\n margin-bottom: 30px;\n font-size: 28px;\n font-weight: 700;\n letter-spacing: 0.5px;\n }\n\n h3 {\n color: #333;\n margin: 30px 0 20px;\n font-size: 18px;\n font-weight: 600;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n }\n\n label {\n font-weight: 600;\n margin-bottom: 8px;\n color: #333;\n font-size: 14px;\n }\n\n input {\n padding: 12px 15px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n background: white;\n }\n\n input:focus {\n outline: none;\n border-color: #945d34;\n box-shadow: 0 0 0 3px rgba(232, 33, 39, 0.1);\n background: #fafafa;\n }\n\n .info-box {\n background: #f5f5f5;\n border-left: 4px solid #945d34;\n padding: 20px;\n border-radius: 4px;\n margin-bottom: 30px;\n color: #333;\n font-size: 14px;\n }\n\n .info-box strong {\n color: #945d34;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 30px 0;\n background: white;\n }\n\n th {\n background: #000;\n color: white;\n padding: 15px;\n text-align: right;\n font-weight: 600;\n border-bottom: 2px solid #945d34;\n }\n\n td {\n padding: 12px 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n\n tr:hover {\n background: #fafafa;\n }\n\n .btn-add {\n background: #000;\n color: white;\n padding: 12px 24px;\n border: 2px solid #945d34;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n margin-bottom: 20px;\n }\n\n .btn-add:hover {\n background: #945d34;\n color: white;\n }\n\n .btn-delete {\n background: #945d34;\n color: white;\n padding: 6px 12px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n }\n\n .btn-delete:hover {\n background: #c41a1f;\n }\n\n .summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin: 30px 0;\n }\n\n .summary-item {\n background: #000;\n padding: 20px;\n border-radius: 4px;\n color: white;\n text-align: center;\n border-top: 3px solid #945d34;\n transition: all 0.3s;\n }\n\n .summary-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(232, 33, 39, 0.2);\n }\n\n .summary-value {\n font-size: 32px;\n font-weight: 700;\n margin: 10px 0;\n color: #945d34;\n }\n\n .summary-label {\n font-size: 12px;\n opacity: 0.9;\n }\n\n .btn-calculate {\n width: 100%;\n background: #945d34;\n color: white;\n padding: 16px;\n border: none;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n margin-top: 20px;\n letter-spacing: 1px;\n }\n\n .btn-calculate:hover {\n background: #c41a1f;\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(232, 33, 39, 0.3);\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n\n .result-card {\n background: #f5f5f5;\n padding: 20px;\n border-radius: 4px;\n text-align: center;\n border-top: 3px solid #945d34;\n transition: all 0.3s;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n }\n\n .result-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n background: white;\n }\n\n .result-value {\n font-size: 36px;\n font-weight: 700;\n margin: 10px 0;\n color: #945d34;\n }\n\n .result-label {\n font-size: 12px;\n color: #666;\n font-weight: 600;\n }\n\n .quote-section {\n background: #f5f5f5;\n padding: 30px;\n border-radius: 4px;\n margin: 20px 0;\n border-left: 4px solid #945d34;\n }\n\n .quote-item {\n display: flex;\n justify-content: space-between;\n padding: 12px 0;\n border-bottom: 1px solid #ddd;\n font-weight: 500;\n }\n\n .quote-item:last-child {\n border-bottom: none;\n }\n\n .quote-total {\n display: flex;\n justify-content: space-between;\n padding: 20px;\n background: #000;\n color: white;\n border-radius: 4px;\n margin-top: 20px;\n font-size: 18px;\n font-weight: 700;\n border-top: 3px solid #945d34;\n }\n\n .btn-print {\n width: 100%;\n background: #945d34;\n color: white;\n padding: 14px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n font-size: 16px;\n font-family: 'Cairo', sans-serif;\n margin-top: 20px;\n transition: all 0.3s;\n letter-spacing: 0.5px;\n }\n\n .btn-print:hover {\n background: #c41a1f;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(232, 33, 39, 0.3);\n }\n\n .empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #999;\n }\n\n .consumption {\n color: #945d34;\n font-weight: 600;\n }\n\n .footer {\n text-align: center;\n color: white;\n margin-top: 40px;\n padding: 20px;\n background: #000;\n border-top: 2px solid #945d34;\n }\n\n @media (max-width: 768px) {\n .header h1 {\n font-size: 32px;\n }\n\n .tab-content {\n padding: 20px;\n }\n\n .results-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .tabs {\n flex-wrap: wrap;\n }\n\n .tab-button {\n flex: 1;\n min-width: 80px;\n padding: 12px;\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <h1>\u2600\ufe0f \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629<\/h1>\n <p>\u0646\u0638\u0627\u0645 \u0623\u0648\u0641 \u062c\u0631\u064a\u062f \u0645\u062a\u0642\u062f\u0645 \u0644\u062d\u0633\u0627\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/p>\n <\/div>\n\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"tabs\">\n <button class=\"tab-button active\" onclick=\"openTab(event, 'tab1')\">\ud83d\udcca \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab2')\">\u26a1 \u0627\u0644\u0646\u062a\u0627\u0626\u062c<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab3')\">\ud83d\udcb0 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab4')\">\ud83d\udcc4 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/button>\n <\/div>\n\n \n <div id=\"tab1\" class=\"tab-content active\">\n <h2>\ud83d\udcca \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/h2>\n\n <div class=\"info-box\">\n <strong>\ud83d\udca1 \u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0623\u062f\u062e\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u062b\u0645 \u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"\n <\/div>\n\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <input type=\"text\" id=\"projectName\" value=\"\u0645\u0646\u0632\u0644 \u0639\u0627\u0626\u0644\u064a\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0627\u0644\u0645\u0648\u0642\u0639<\/label>\n <input type=\"text\" id=\"location\" value=\"\u0627\u0644\u0642\u0627\u0647\u0631\u0629\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0645\u0648\u0642\u0639\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0634\u0645\u0633 \u0627\u0644\u064a\u0648\u0645\u064a\u0629<\/label>\n <input type=\"number\" id=\"sunHours\" value=\"4.5\" step=\"0.1\" min=\"1\" max=\"8\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0623\u064a\u0627\u0645 \u0627\u0644\u0627\u0633\u062a\u0642\u0644\u0627\u0644\u064a\u0629<\/label>\n <input type=\"number\" id=\"autonomyDays\" value=\"3\" step=\"1\" min=\"1\" max=\"7\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0639\u0645\u0642 \u0627\u0644\u062a\u0641\u0631\u064a\u063a %<\/label>\n <input type=\"number\" id=\"depthOfDischarge\" value=\"80\" step=\"5\" min=\"50\" max=\"90\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 %<\/label>\n <input type=\"number\" id=\"systemEfficiency\" value=\"85\" step=\"5\" min=\"70\" max=\"95\">\n <\/div>\n <\/div>\n\n <h3>\u26a1 \u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/h3>\n\n <button class=\"btn-add\" onclick=\"addLoadRow()\">\u2795 \u0625\u0636\u0627\u0641\u0629 \u062c\u0647\u0627\u0632 \u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/button>\n\n <table>\n <thead>\n <tr>\n <th>\u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0627\u0632<\/th>\n <th>\u0627\u0644\u0642\u0648\u0629 (\u0648\u0627\u062a)<\/th>\n <th>\u0627\u0644\u0639\u062f\u062f<\/th>\n <th>\u0627\u0644\u0633\u0627\u0639\u0627\u062a<\/th>\n <th>\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643<\/th>\n <th>\u0625\u062c\u0631\u0627\u0621<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loadsBody\"><\/tbody>\n <\/table>\n\n <div class=\"summary\" id=\"loadsSummary\"><\/div>\n\n <button class=\"btn-calculate\" onclick=\"calculate()\">\ud83d\udd04 \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/button>\n <\/div>\n\n \n <div id=\"tab2\" class=\"tab-content\">\n <h2>\u26a1 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h2>\n <div id=\"resultsContent\" class=\"empty-state\">\n <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"tab3\" class=\"tab-content\">\n <h2>\ud83d\udcb0 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/h2>\n <div class=\"form-grid\" id=\"pricesContainer\"><\/div>\n <\/div>\n\n \n <div id=\"tab4\" class=\"tab-content\">\n <h2>\ud83d\udcc4 \u0639\u0631\u0636 \u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/h2>\n <div id=\"quoteContent\" class=\"empty-state\">\n <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n <p>\ud83c\udf1e \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 - \u0623\u0648\u0641 \u062c\u0631\u064a\u062f | \u0645\u0635\u0631 2026<\/p>\n <\/div>\n\n <script>\n let loadCounter = 0;\n let prices = {\n '\u0644\u0648\u062d \u0634\u0645\u0633\u064a 400 \u0648\u0627\u062a': 29000,\n '\u0628\u0637\u0627\u0631\u064a\u0629 \u0644\u064a\u062b\u064a\u0648\u0645 10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a': 165000,\n '\u0627\u0646\u0641\u0631\u062a\u0631 5 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a': 28000,\n '\u0643\u0627\u0628\u0644\u0627\u062a': 2000,\n '\u062d\u0645\u0627\u064a\u0629': 3000,\n '\u062a\u0631\u0643\u064a\u0628': 8000\n };\n let designData = null;\n\n window.addEventListener('DOMContentLoaded', function() {\n initializePrices();\n addDefaultLoads();\n updateLoadsSummary();\n });\n\n function openTab(evt, tabName) {\n const tabContents = document.querySelectorAll('.tab-content');\n tabContents.forEach(tab => tab.classList.remove('active'));\n \n const tabButtons = document.querySelectorAll('.tab-button');\n tabButtons.forEach(btn => btn.classList.remove('active'));\n \n document.getElementById(tabName).classList.add('active');\n evt.currentTarget.classList.add('active');\n }\n\n function initializePrices() {\n const container = document.getElementById('pricesContainer');\n container.innerHTML = '';\n \n for (let [name, price] of Object.entries(prices)) {\n const group = document.createElement('div');\n group.className = 'form-group';\n group.innerHTML = `\n <label>${name}<\/label>\n <input type=\"number\" value=\"${price}\" onchange=\"prices['${name}'] = parseFloat(this.value)\">\n `;\n container.appendChild(group);\n }\n }\n\n function addDefaultLoads() {\n const loads = [\n {name: '\u062a\u0643\u064a\u064a\u0641', power: 2500, qty: 1, hours: 8},\n {name: '\u062b\u0644\u0627\u062c\u0629', power: 500, qty: 1, hours: 24},\n {name: '\u0625\u0636\u0627\u0621\u0629', power: 100, qty: 10, hours: 6}\n ];\n loads.forEach(load => addLoadRowWithData(load.name, load.power, load.qty, load.hours));\n }\n\n function addLoadRowWithData(name, power, qty, hours) {\n const tbody = document.getElementById('loadsBody');\n const id = loadCounter++;\n const row = document.createElement('tr');\n row.id = 'load-' + id;\n row.innerHTML = `\n <td><input type=\"text\" value=\"${name}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${power}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${qty}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${hours}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td class=\"consumption\">0<\/td>\n <td><button class=\"btn-delete\" onclick=\"deleteRow(${id})\">\u062d\u0630\u0641<\/button><\/td>\n `;\n tbody.appendChild(row);\n }\n\n function addLoadRow() {\n addLoadRowWithData('', 0, 1, 0);\n updateLoadsSummary();\n }\n\n function deleteRow(id) {\n const row = document.getElementById('load-' + id);\n if (row) {\n row.remove();\n updateLoadsSummary();\n }\n }\n\n function updateLoadsSummary() {\n let totalPower = 0;\n let totalConsumption = 0;\n \n document.querySelectorAll('#loadsBody tr').forEach(row => {\n const inputs = row.querySelectorAll('input');\n const power = parseFloat(inputs[1].value) || 0;\n const qty = parseFloat(inputs[2].value) || 1;\n const hours = parseFloat(inputs[3].value) || 0;\n \n const consumption = power * qty * hours;\n totalPower += power * qty;\n totalConsumption += consumption;\n \n row.querySelector('.consumption').textContent = consumption.toLocaleString('ar-EG');\n });\n \n const totalKW = (totalConsumption \/ 1000).toFixed(2);\n \n const summaryHTML = `\n <div class=\"summary-item\">\n <div class=\"summary-value\">${totalPower.toLocaleString('ar-EG')}<\/div>\n <div class=\"summary-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0642\u0648\u0629<\/div>\n <\/div>\n <div class=\"summary-item\">\n <div class=\"summary-value\">${totalKW}<\/div>\n <div class=\"summary-label\">\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643 \u0627\u0644\u064a\u0648\u0645\u064a<\/div>\n <\/div>\n `;\n \n document.getElementById('loadsSummary').innerHTML = summaryHTML;\n }\n\n function calculate() {\n const projectName = document.getElementById('projectName').value;\n const location = document.getElementById('location').value;\n const sunHours = parseFloat(document.getElementById('sunHours').value);\n const autonomyDays = parseFloat(document.getElementById('autonomyDays').value);\n const depthOfDischarge = parseFloat(document.getElementById('depthOfDischarge').value);\n const systemEfficiency = parseFloat(document.getElementById('systemEfficiency').value);\n \n let totalConsumption = 0;\n document.querySelectorAll('#loadsBody tr').forEach(row => {\n const inputs = row.querySelectorAll('input');\n const power = parseFloat(inputs[1].value) || 0;\n const qty = parseFloat(inputs[2].value) || 1;\n const hours = parseFloat(inputs[3].value) || 0;\n totalConsumption += power * qty * hours;\n });\n \n const dailyKW = totalConsumption \/ 1000;\n \n if (dailyKW === 0) {\n alert('\u0623\u0636\u0641 \u0623\u062d\u0645\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0623\u0648\u0644\u0627\u064b!');\n return;\n }\n \n const batteryCapacity = dailyKW * autonomyDays * ((100 - depthOfDischarge) \/ 100);\n const panelPower = dailyKW \/ (sunHours * 0.85);\n const panelCount = Math.ceil(panelPower \/ 0.4);\n const inverterPower = panelPower * 1.25;\n const recommendedInverter = inverterPower <= 3 ? 3 : (inverterPower <= 5 ? 5 : (inverterPower <= 10 ? 10 : 15));\n const batteryCount = Math.ceil(batteryCapacity \/ 10);\n \n designData = {\n projectName, location, dailyKW,\n batteryCapacity, panelPower, panelCount,\n inverterPower, recommendedInverter, batteryCount\n };\n \n const html = `\n <div class=\"results-grid\">\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629<\/div>\n <div class=\"result-value\">${dailyKW.toFixed(2)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0633\u0639\u0629 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629<\/div>\n <div class=\"result-value\">${batteryCapacity.toFixed(1)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0642\u0648\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u062d<\/div>\n <div class=\"result-value\">${panelPower.toFixed(2)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0639\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u062d<\/div>\n <div class=\"result-value\">${panelCount}<\/div>\n <div class=\"result-label\">\u0644\u0648\u062d (400 \u0648\u0627\u062a)<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0627\u0646\u0641\u0631\u062a\u0631<\/div>\n <div class=\"result-value\">${inverterPower.toFixed(1)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0639\u062f\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a<\/div>\n <div class=\"result-value\">${batteryCount}<\/div>\n <div class=\"result-label\">\u0648\u062d\u062f\u0629<\/div>\n <\/div>\n <\/div>\n \n <div class=\"quote-section\">\n <h3>\ud83d\udcca \u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\n <p style=\"margin: 10px 0;\">\u2713 <strong>${panelCount} \u0644\u0648\u062d \u0634\u0645\u0633\u064a<\/strong> (400 \u0648\u0627\u062a = ${panelPower.toFixed(1)} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a)<\/p>\n <p style=\"margin: 10px 0;\">\u2713 <strong>${batteryCount} \u0628\u0637\u0627\u0631\u064a\u0629<\/strong> (10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629 = ${batteryCapacity.toFixed(1)} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629)<\/p>\n <p style=\"margin: 10px 0;\">\u2713 <strong>\u0627\u0646\u0641\u0631\u062a\u0631 ${recommendedInverter} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/strong><\/p>\n <\/div>\n `;\n \n document.getElementById('resultsContent').innerHTML = html;\n updateQuoteDisplay();\n \n \/\/ Switch to results tab\n const tabButtons = document.querySelectorAll('.tab-button');\n const tabContents = document.querySelectorAll('.tab-content');\n tabContents.forEach(t => t.classList.remove('active'));\n tabButtons.forEach(b => b.classList.remove('active'));\n document.getElementById('tab2').classList.add('active');\n tabButtons[1].classList.add('active');\n }\n\n function updateQuoteDisplay() {\n if (!designData) return;\n \n const {projectName, location, panelCount, batteryCount, panelPower} = designData;\n \n let html = `\n <div class=\"quote-section\">\n <h3>\ud83c\udfe0 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h3>\n <p><strong>\u0627\u0644\u0645\u0634\u0631\u0648\u0639:<\/strong> ${projectName}<\/p>\n <p><strong>\u0627\u0644\u0645\u0648\u0642\u0639:<\/strong> ${location}<\/p>\n <\/div>\n \n <div class=\"quote-section\">\n <h3>\ud83d\udccb \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a<\/h3>\n `;\n \n let total = 0;\n \n const items = [\n {name: '\u0623\u0644\u0648\u0627\u062d \u0634\u0645\u0633\u064a\u0629', qty: panelCount, price: prices['\u0644\u0648\u062d \u0634\u0645\u0633\u064a 400 \u0648\u0627\u062a']},\n {name: '\u0628\u0637\u0627\u0631\u064a\u0627\u062a \u0644\u064a\u062b\u064a\u0648\u0645', qty: batteryCount, price: prices['\u0628\u0637\u0627\u0631\u064a\u0629 \u0644\u064a\u062b\u064a\u0648\u0645 10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a']},\n {name: '\u0627\u0646\u0641\u0631\u062a\u0631', qty: 1, price: prices['\u0627\u0646\u0641\u0631\u062a\u0631 5 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a']},\n {name: '\u0643\u0627\u0628\u0644\u0627\u062a', qty: panelPower, price: prices['\u0643\u0627\u0628\u0644\u0627\u062a']},\n {name: '\u062d\u0645\u0627\u064a\u0629', qty: 1, price: prices['\u062d\u0645\u0627\u064a\u0629']},\n {name: '\u062a\u0631\u0643\u064a\u0628', qty: panelPower, price: prices['\u062a\u0631\u0643\u064a\u0628']}\n ];\n \n items.forEach(item => {\n const itemTotal = item.qty * item.price;\n total += itemTotal;\n html += `\n <div class=\"quote-item\">\n <span>${item.name} (${item.qty.toFixed(0)})<\/span>\n <span>${itemTotal.toLocaleString('ar-EG')} \u062c<\/span>\n <\/div>\n `;\n });\n \n html += `\n <div class=\"quote-total\">\n <span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a:<\/span>\n <span>${total.toLocaleString('ar-EG')} \u062c<\/span>\n <\/div>\n <\/div>\n \n <button class=\"btn-print\" onclick=\"printQuote()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629 \u0627\u0644\u0639\u0631\u0636<\/button>\n `;\n \n document.getElementById('quoteContent').innerHTML = html;\n }\n\n function printQuote() {\n window.print();\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u2600\ufe0f \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0646\u0638\u0627\u0645 \u0623\u0648\u0641 \u062c\u0631\u064a\u062f \u0645\u062a\u0642\u062f\u0645 … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-117240","page","type-page","status-publish","hentry"],"ase":null,"_links":{"self":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/comments?post=117240"}],"version-history":[{"count":10,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240\/revisions"}],"predecessor-version":[{"id":117251,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240\/revisions\/117251"}],"wp:attachment":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/media?parent=117240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Cairo', sans-serif;\n background: #0a0a0a;\n color: #333;\n min-height: 100vh;\n padding: 0;\n }\n\n .header {\n background: #000;\n color: white;\n padding: 40px 20px;\n text-align: center;\n border-bottom: 2px solid #945d34;\n }\n\n .header h1 {\n font-size: 48px;\n margin-bottom: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n }\n\n .header p {\n font-size: 16px;\n opacity: 0.9;\n color: #999;\n }\n\n .container {\n max-width: 1400px;\n margin: 30px auto;\n padding: 0 20px;\n }\n\n .main-content {\n background: white;\n border-radius: 4px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n }\n\n .tabs {\n display: flex;\n gap: 0;\n background: #f5f5f5;\n border-bottom: 1px solid #ddd;\n padding: 0;\n }\n\n .tab-button {\n flex: 1;\n padding: 18px 20px;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n transition: all 0.3s;\n border-bottom: 3px solid transparent;\n position: relative;\n }\n\n .tab-button:hover {\n background: #f9f9f9;\n color: #333;\n }\n\n .tab-button.active {\n color: #945d34;\n border-bottom-color: #945d34;\n background: white;\n }\n\n .tab-content {\n display: none;\n padding: 40px;\n }\n\n .tab-content.active {\n display: block;\n animation: fadeIn 0.4s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n h2 {\n color: #000;\n margin-bottom: 30px;\n font-size: 28px;\n font-weight: 700;\n letter-spacing: 0.5px;\n }\n\n h3 {\n color: #333;\n margin: 30px 0 20px;\n font-size: 18px;\n font-weight: 600;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n }\n\n label {\n font-weight: 600;\n margin-bottom: 8px;\n color: #333;\n font-size: 14px;\n }\n\n input {\n padding: 12px 15px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n background: white;\n }\n\n input:focus {\n outline: none;\n border-color: #945d34;\n box-shadow: 0 0 0 3px rgba(232, 33, 39, 0.1);\n background: #fafafa;\n }\n\n .info-box {\n background: #f5f5f5;\n border-left: 4px solid #945d34;\n padding: 20px;\n border-radius: 4px;\n margin-bottom: 30px;\n color: #333;\n font-size: 14px;\n }\n\n .info-box strong {\n color: #945d34;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 30px 0;\n background: white;\n }\n\n th {\n background: #000;\n color: white;\n padding: 15px;\n text-align: right;\n font-weight: 600;\n border-bottom: 2px solid #945d34;\n }\n\n td {\n padding: 12px 15px;\n border-bottom: 1px solid #f0f0f0;\n }\n\n tr:hover {\n background: #fafafa;\n }\n\n .btn-add {\n background: #000;\n color: white;\n padding: 12px 24px;\n border: 2px solid #945d34;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n margin-bottom: 20px;\n }\n\n .btn-add:hover {\n background: #945d34;\n color: white;\n }\n\n .btn-delete {\n background: #945d34;\n color: white;\n padding: 6px 12px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n }\n\n .btn-delete:hover {\n background: #c41a1f;\n }\n\n .summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin: 30px 0;\n }\n\n .summary-item {\n background: #000;\n padding: 20px;\n border-radius: 4px;\n color: white;\n text-align: center;\n border-top: 3px solid #945d34;\n transition: all 0.3s;\n }\n\n .summary-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(232, 33, 39, 0.2);\n }\n\n .summary-value {\n font-size: 32px;\n font-weight: 700;\n margin: 10px 0;\n color: #945d34;\n }\n\n .summary-label {\n font-size: 12px;\n opacity: 0.9;\n }\n\n .btn-calculate {\n width: 100%;\n background: #945d34;\n color: white;\n padding: 16px;\n border: none;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n font-family: 'Cairo', sans-serif;\n transition: all 0.3s;\n margin-top: 20px;\n letter-spacing: 1px;\n }\n\n .btn-calculate:hover {\n background: #c41a1f;\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(232, 33, 39, 0.3);\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n\n .result-card {\n background: #f5f5f5;\n padding: 20px;\n border-radius: 4px;\n text-align: center;\n border-top: 3px solid #945d34;\n transition: all 0.3s;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n }\n\n .result-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n background: white;\n }\n\n .result-value {\n font-size: 36px;\n font-weight: 700;\n margin: 10px 0;\n color: #945d34;\n }\n\n .result-label {\n font-size: 12px;\n color: #666;\n font-weight: 600;\n }\n\n .quote-section {\n background: #f5f5f5;\n padding: 30px;\n border-radius: 4px;\n margin: 20px 0;\n border-left: 4px solid #945d34;\n }\n\n .quote-item {\n display: flex;\n justify-content: space-between;\n padding: 12px 0;\n border-bottom: 1px solid #ddd;\n font-weight: 500;\n }\n\n .quote-item:last-child {\n border-bottom: none;\n }\n\n .quote-total {\n display: flex;\n justify-content: space-between;\n padding: 20px;\n background: #000;\n color: white;\n border-radius: 4px;\n margin-top: 20px;\n font-size: 18px;\n font-weight: 700;\n border-top: 3px solid #945d34;\n }\n\n .btn-print {\n width: 100%;\n background: #945d34;\n color: white;\n padding: 14px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n font-size: 16px;\n font-family: 'Cairo', sans-serif;\n margin-top: 20px;\n transition: all 0.3s;\n letter-spacing: 0.5px;\n }\n\n .btn-print:hover {\n background: #c41a1f;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(232, 33, 39, 0.3);\n }\n\n .empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #999;\n }\n\n .consumption {\n color: #945d34;\n font-weight: 600;\n }\n\n .footer {\n text-align: center;\n color: white;\n margin-top: 40px;\n padding: 20px;\n background: #000;\n border-top: 2px solid #945d34;\n }\n\n @media (max-width: 768px) {\n .header h1 {\n font-size: 32px;\n }\n\n .tab-content {\n padding: 20px;\n }\n\n .results-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .tabs {\n flex-wrap: wrap;\n }\n\n .tab-button {\n flex: 1;\n min-width: 80px;\n padding: 12px;\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <h1>\u2600\ufe0f \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629<\/h1>\n <p>\u0646\u0638\u0627\u0645 \u0623\u0648\u0641 \u062c\u0631\u064a\u062f \u0645\u062a\u0642\u062f\u0645 \u0644\u062d\u0633\u0627\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/p>\n <\/div>\n\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"tabs\">\n <button class=\"tab-button active\" onclick=\"openTab(event, 'tab1')\">\ud83d\udcca \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab2')\">\u26a1 \u0627\u0644\u0646\u062a\u0627\u0626\u062c<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab3')\">\ud83d\udcb0 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/button>\n <button class=\"tab-button\" onclick=\"openTab(event, 'tab4')\">\ud83d\udcc4 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/button>\n <\/div>\n\n \n <div id=\"tab1\" class=\"tab-content active\">\n <h2>\ud83d\udcca \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/h2>\n\n <div class=\"info-box\">\n <strong>\ud83d\udca1 \u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0623\u062f\u062e\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u062b\u0645 \u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"\n <\/div>\n\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <input type=\"text\" id=\"projectName\" value=\"\u0645\u0646\u0632\u0644 \u0639\u0627\u0626\u0644\u064a\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0627\u0644\u0645\u0648\u0642\u0639<\/label>\n <input type=\"text\" id=\"location\" value=\"\u0627\u0644\u0642\u0627\u0647\u0631\u0629\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0644\u0645\u0648\u0642\u0639\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0634\u0645\u0633 \u0627\u0644\u064a\u0648\u0645\u064a\u0629<\/label>\n <input type=\"number\" id=\"sunHours\" value=\"4.5\" step=\"0.1\" min=\"1\" max=\"8\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0623\u064a\u0627\u0645 \u0627\u0644\u0627\u0633\u062a\u0642\u0644\u0627\u0644\u064a\u0629<\/label>\n <input type=\"number\" id=\"autonomyDays\" value=\"3\" step=\"1\" min=\"1\" max=\"7\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0639\u0645\u0642 \u0627\u0644\u062a\u0641\u0631\u064a\u063a %<\/label>\n <input type=\"number\" id=\"depthOfDischarge\" value=\"80\" step=\"5\" min=\"50\" max=\"90\">\n <\/div>\n <div class=\"form-group\">\n <label>\u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 %<\/label>\n <input type=\"number\" id=\"systemEfficiency\" value=\"85\" step=\"5\" min=\"70\" max=\"95\">\n <\/div>\n <\/div>\n\n <h3>\u26a1 \u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629<\/h3>\n\n <button class=\"btn-add\" onclick=\"addLoadRow()\">\u2795 \u0625\u0636\u0627\u0641\u0629 \u062c\u0647\u0627\u0632 \u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/button>\n\n <table>\n <thead>\n <tr>\n <th>\u0627\u0633\u0645 \u0627\u0644\u062c\u0647\u0627\u0632<\/th>\n <th>\u0627\u0644\u0642\u0648\u0629 (\u0648\u0627\u062a)<\/th>\n <th>\u0627\u0644\u0639\u062f\u062f<\/th>\n <th>\u0627\u0644\u0633\u0627\u0639\u0627\u062a<\/th>\n <th>\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643<\/th>\n <th>\u0625\u062c\u0631\u0627\u0621<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"loadsBody\"><\/tbody>\n <\/table>\n\n <div class=\"summary\" id=\"loadsSummary\"><\/div>\n\n <button class=\"btn-calculate\" onclick=\"calculate()\">\ud83d\udd04 \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/button>\n <\/div>\n\n \n <div id=\"tab2\" class=\"tab-content\">\n <h2>\u26a1 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h2>\n <div id=\"resultsContent\" class=\"empty-state\">\n <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"tab3\" class=\"tab-content\">\n <h2>\ud83d\udcb0 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/h2>\n <div class=\"form-grid\" id=\"pricesContainer\"><\/div>\n <\/div>\n\n \n <div id=\"tab4\" class=\"tab-content\">\n <h2>\ud83d\udcc4 \u0639\u0631\u0636 \u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/h2>\n <div id=\"quoteContent\" class=\"empty-state\">\n <p>\u0623\u062f\u062e\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0636\u063a\u0637 \"\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\"<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n <p>\ud83c\udf1e \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 - \u0623\u0648\u0641 \u062c\u0631\u064a\u062f | \u0645\u0635\u0631 2026<\/p>\n <\/div>\n\n <script>\n let loadCounter = 0;\n let prices = {\n '\u0644\u0648\u062d \u0634\u0645\u0633\u064a 400 \u0648\u0627\u062a': 29000,\n '\u0628\u0637\u0627\u0631\u064a\u0629 \u0644\u064a\u062b\u064a\u0648\u0645 10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a': 165000,\n '\u0627\u0646\u0641\u0631\u062a\u0631 5 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a': 28000,\n '\u0643\u0627\u0628\u0644\u0627\u062a': 2000,\n '\u062d\u0645\u0627\u064a\u0629': 3000,\n '\u062a\u0631\u0643\u064a\u0628': 8000\n };\n let designData = null;\n\n window.addEventListener('DOMContentLoaded', function() {\n initializePrices();\n addDefaultLoads();\n updateLoadsSummary();\n });\n\n function openTab(evt, tabName) {\n const tabContents = document.querySelectorAll('.tab-content');\n tabContents.forEach(tab => tab.classList.remove('active'));\n \n const tabButtons = document.querySelectorAll('.tab-button');\n tabButtons.forEach(btn => btn.classList.remove('active'));\n \n document.getElementById(tabName).classList.add('active');\n evt.currentTarget.classList.add('active');\n }\n\n function initializePrices() {\n const container = document.getElementById('pricesContainer');\n container.innerHTML = '';\n \n for (let [name, price] of Object.entries(prices)) {\n const group = document.createElement('div');\n group.className = 'form-group';\n group.innerHTML = `\n <label>${name}<\/label>\n <input type=\"number\" value=\"${price}\" onchange=\"prices['${name}'] = parseFloat(this.value)\">\n `;\n container.appendChild(group);\n }\n }\n\n function addDefaultLoads() {\n const loads = [\n {name: '\u062a\u0643\u064a\u064a\u0641', power: 2500, qty: 1, hours: 8},\n {name: '\u062b\u0644\u0627\u062c\u0629', power: 500, qty: 1, hours: 24},\n {name: '\u0625\u0636\u0627\u0621\u0629', power: 100, qty: 10, hours: 6}\n ];\n loads.forEach(load => addLoadRowWithData(load.name, load.power, load.qty, load.hours));\n }\n\n function addLoadRowWithData(name, power, qty, hours) {\n const tbody = document.getElementById('loadsBody');\n const id = loadCounter++;\n const row = document.createElement('tr');\n row.id = 'load-' + id;\n row.innerHTML = `\n <td><input type=\"text\" value=\"${name}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${power}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${qty}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td><input type=\"number\" value=\"${hours}\" onchange=\"updateLoadsSummary()\" style=\"width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;\"><\/td>\n <td class=\"consumption\">0<\/td>\n <td><button class=\"btn-delete\" onclick=\"deleteRow(${id})\">\u062d\u0630\u0641<\/button><\/td>\n `;\n tbody.appendChild(row);\n }\n\n function addLoadRow() {\n addLoadRowWithData('', 0, 1, 0);\n updateLoadsSummary();\n }\n\n function deleteRow(id) {\n const row = document.getElementById('load-' + id);\n if (row) {\n row.remove();\n updateLoadsSummary();\n }\n }\n\n function updateLoadsSummary() {\n let totalPower = 0;\n let totalConsumption = 0;\n \n document.querySelectorAll('#loadsBody tr').forEach(row => {\n const inputs = row.querySelectorAll('input');\n const power = parseFloat(inputs[1].value) || 0;\n const qty = parseFloat(inputs[2].value) || 1;\n const hours = parseFloat(inputs[3].value) || 0;\n \n const consumption = power * qty * hours;\n totalPower += power * qty;\n totalConsumption += consumption;\n \n row.querySelector('.consumption').textContent = consumption.toLocaleString('ar-EG');\n });\n \n const totalKW = (totalConsumption \/ 1000).toFixed(2);\n \n const summaryHTML = `\n <div class=\"summary-item\">\n <div class=\"summary-value\">${totalPower.toLocaleString('ar-EG')}<\/div>\n <div class=\"summary-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0642\u0648\u0629<\/div>\n <\/div>\n <div class=\"summary-item\">\n <div class=\"summary-value\">${totalKW}<\/div>\n <div class=\"summary-label\">\u0627\u0644\u0627\u0633\u062a\u0647\u0644\u0627\u0643 \u0627\u0644\u064a\u0648\u0645\u064a<\/div>\n <\/div>\n `;\n \n document.getElementById('loadsSummary').innerHTML = summaryHTML;\n }\n\n function calculate() {\n const projectName = document.getElementById('projectName').value;\n const location = document.getElementById('location').value;\n const sunHours = parseFloat(document.getElementById('sunHours').value);\n const autonomyDays = parseFloat(document.getElementById('autonomyDays').value);\n const depthOfDischarge = parseFloat(document.getElementById('depthOfDischarge').value);\n const systemEfficiency = parseFloat(document.getElementById('systemEfficiency').value);\n \n let totalConsumption = 0;\n document.querySelectorAll('#loadsBody tr').forEach(row => {\n const inputs = row.querySelectorAll('input');\n const power = parseFloat(inputs[1].value) || 0;\n const qty = parseFloat(inputs[2].value) || 1;\n const hours = parseFloat(inputs[3].value) || 0;\n totalConsumption += power * qty * hours;\n });\n \n const dailyKW = totalConsumption \/ 1000;\n \n if (dailyKW === 0) {\n alert('\u0623\u0636\u0641 \u0623\u062d\u0645\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0623\u0648\u0644\u0627\u064b!');\n return;\n }\n \n const batteryCapacity = dailyKW * autonomyDays * ((100 - depthOfDischarge) \/ 100);\n const panelPower = dailyKW \/ (sunHours * 0.85);\n const panelCount = Math.ceil(panelPower \/ 0.4);\n const inverterPower = panelPower * 1.25;\n const recommendedInverter = inverterPower <= 3 ? 3 : (inverterPower <= 5 ? 5 : (inverterPower <= 10 ? 10 : 15));\n const batteryCount = Math.ceil(batteryCapacity \/ 10);\n \n designData = {\n projectName, location, dailyKW,\n batteryCapacity, panelPower, panelCount,\n inverterPower, recommendedInverter, batteryCount\n };\n \n const html = `\n <div class=\"results-grid\">\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629<\/div>\n <div class=\"result-value\">${dailyKW.toFixed(2)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0633\u0639\u0629 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629<\/div>\n <div class=\"result-value\">${batteryCapacity.toFixed(1)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0642\u0648\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u062d<\/div>\n <div class=\"result-value\">${panelPower.toFixed(2)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0639\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u062d<\/div>\n <div class=\"result-value\">${panelCount}<\/div>\n <div class=\"result-label\">\u0644\u0648\u062d (400 \u0648\u0627\u062a)<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0627\u0644\u0627\u0646\u0641\u0631\u062a\u0631<\/div>\n <div class=\"result-value\">${inverterPower.toFixed(1)}<\/div>\n <div class=\"result-label\">\u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"result-label\">\u0639\u062f\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a<\/div>\n <div class=\"result-value\">${batteryCount}<\/div>\n <div class=\"result-label\">\u0648\u062d\u062f\u0629<\/div>\n <\/div>\n <\/div>\n \n <div class=\"quote-section\">\n <h3>\ud83d\udcca \u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\n <p style=\"margin: 10px 0;\">\u2713 <strong>${panelCount} \u0644\u0648\u062d \u0634\u0645\u0633\u064a<\/strong> (400 \u0648\u0627\u062a = ${panelPower.toFixed(1)} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a)<\/p>\n <p style=\"margin: 10px 0;\">\u2713 <strong>${batteryCount} \u0628\u0637\u0627\u0631\u064a\u0629<\/strong> (10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629 = ${batteryCapacity.toFixed(1)} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a\/\u0633\u0627\u0639\u0629)<\/p>\n <p style=\"margin: 10px 0;\">\u2713 <strong>\u0627\u0646\u0641\u0631\u062a\u0631 ${recommendedInverter} \u0643\u064a\u0644\u0648 \u0648\u0627\u062a<\/strong><\/p>\n <\/div>\n `;\n \n document.getElementById('resultsContent').innerHTML = html;\n updateQuoteDisplay();\n \n \/\/ Switch to results tab\n const tabButtons = document.querySelectorAll('.tab-button');\n const tabContents = document.querySelectorAll('.tab-content');\n tabContents.forEach(t => t.classList.remove('active'));\n tabButtons.forEach(b => b.classList.remove('active'));\n document.getElementById('tab2').classList.add('active');\n tabButtons[1].classList.add('active');\n }\n\n function updateQuoteDisplay() {\n if (!designData) return;\n \n const {projectName, location, panelCount, batteryCount, panelPower} = designData;\n \n let html = `\n <div class=\"quote-section\">\n <h3>\ud83c\udfe0 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h3>\n <p><strong>\u0627\u0644\u0645\u0634\u0631\u0648\u0639:<\/strong> ${projectName}<\/p>\n <p><strong>\u0627\u0644\u0645\u0648\u0642\u0639:<\/strong> ${location}<\/p>\n <\/div>\n \n <div class=\"quote-section\">\n <h3>\ud83d\udccb \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a<\/h3>\n `;\n \n let total = 0;\n \n const items = [\n {name: '\u0623\u0644\u0648\u0627\u062d \u0634\u0645\u0633\u064a\u0629', qty: panelCount, price: prices['\u0644\u0648\u062d \u0634\u0645\u0633\u064a 400 \u0648\u0627\u062a']},\n {name: '\u0628\u0637\u0627\u0631\u064a\u0627\u062a \u0644\u064a\u062b\u064a\u0648\u0645', qty: batteryCount, price: prices['\u0628\u0637\u0627\u0631\u064a\u0629 \u0644\u064a\u062b\u064a\u0648\u0645 10 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a']},\n {name: '\u0627\u0646\u0641\u0631\u062a\u0631', qty: 1, price: prices['\u0627\u0646\u0641\u0631\u062a\u0631 5 \u0643\u064a\u0644\u0648 \u0648\u0627\u062a']},\n {name: '\u0643\u0627\u0628\u0644\u0627\u062a', qty: panelPower, price: prices['\u0643\u0627\u0628\u0644\u0627\u062a']},\n {name: '\u062d\u0645\u0627\u064a\u0629', qty: 1, price: prices['\u062d\u0645\u0627\u064a\u0629']},\n {name: '\u062a\u0631\u0643\u064a\u0628', qty: panelPower, price: prices['\u062a\u0631\u0643\u064a\u0628']}\n ];\n \n items.forEach(item => {\n const itemTotal = item.qty * item.price;\n total += itemTotal;\n html += `\n <div class=\"quote-item\">\n <span>${item.name} (${item.qty.toFixed(0)})<\/span>\n <span>${itemTotal.toLocaleString('ar-EG')} \u062c<\/span>\n <\/div>\n `;\n });\n \n html += `\n <div class=\"quote-total\">\n <span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0643\u0644\u064a:<\/span>\n <span>${total.toLocaleString('ar-EG')} \u062c<\/span>\n <\/div>\n <\/div>\n \n <button class=\"btn-print\" onclick=\"printQuote()\">\ud83d\udda8\ufe0f \u0637\u0628\u0627\u0639\u0629 \u0627\u0644\u0639\u0631\u0636<\/button>\n `;\n \n document.getElementById('quoteContent').innerHTML = html;\n }\n\n function printQuote() {\n window.print();\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u2600\ufe0f \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629 \u0646\u0638\u0627\u0645 \u0623\u0648\u0641 \u062c\u0631\u064a\u062f \u0645\u062a\u0642\u062f\u0645 … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-117240","page","type-page","status-publish","hentry"],"ase":null,"_links":{"self":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/comments?post=117240"}],"version-history":[{"count":10,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240\/revisions"}],"predecessor-version":[{"id":117251,"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/pages\/117240\/revisions\/117251"}],"wp:attachment":[{"href":"https:\/\/tesla-egypt.com\/en\/wp-json\/wp\/v2\/media?parent=117240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}