{"id":1435,"date":"2025-06-24T10:23:41","date_gmt":"2025-06-24T10:23:41","guid":{"rendered":"https:\/\/pvksa.com\/elementskit-content\/dynamic-content-widget-362bad1-a5354a6\/"},"modified":"2025-07-04T19:20:25","modified_gmt":"2025-07-04T19:20:25","slug":"dynamic-content-widget-362bad1-a5354a6","status":"publish","type":"elementskit_content","link":"https:\/\/pvco.sa\/en\/elementskit-content\/dynamic-content-widget-362bad1-a5354a6\/","title":{"rendered":"dynamic-content-widget-362bad1-a5354a6"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"1435\" class=\"elementor elementor-1435\" data-elementor-post-type=\"elementskit_content\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-426aec1 e-con-full e-flex e-con e-parent\" data-id=\"426aec1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-6530592 e-con-full e-flex e-con e-child\" data-id=\"6530592\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8bb1aa6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"8bb1aa6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \ud83c\udfe0 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0642\u0631\u0636 \u0627\u0644\u0639\u0642\u0627\u0631\u064a -->\n<div class=\"calculator-container\">\n  <h3 class=\"section-title\">Real State  Loan Simulator<\/h3>\n\n  <div class=\"input-section\">\n    <label for=\"propertyValue\">Property Value:<\/label>\n    <div class=\"input-with-icon\">\n      <input type=\"number\" id=\"propertyValue\" value=\"550000\" \/>\n      <img decoding=\"async\" src=\"https:\/\/pvco.sa\/wp-content\/uploads\/2025\/06\/Saudi_Riyal_Symbol-1.webp\" alt=\"\u0631\u064a\u0627\u0644\" class=\"sar-icon\" \/>\n    <\/div>\n  <\/div>\n\n  <div class=\"input-section\">\n    <label for=\"monthlyIncome\">Monthly Income:<\/label>\n    <div class=\"input-with-icon\">\n      <input type=\"number\" id=\"monthlyIncome\" value=\"12000\" \/>\n      <img decoding=\"async\" src=\"https:\/\/pvco.sa\/wp-content\/uploads\/2025\/06\/Saudi_Riyal_Symbol-1.webp\" alt=\"\u0631\u064a\u0627\u0644\" class=\"sar-icon\" \/>\n    <\/div>\n  <\/div>\n\n  <div class=\"input-section\">\n    <label for=\"downPayment\">Down Payment Percentage (%):<\/label>\n    <div class=\"input-with-icon\">\n      <input type=\"number\" id=\"downPayment\" value=\"2000\" \/>\n      <img decoding=\"async\" src=\"https:\/\/pvco.sa\/wp-content\/uploads\/2025\/06\/Saudi_Riyal_Symbol-1.webp\" alt=\"\u0631\u064a\u0627\u0644\" class=\"sar-icon\" \/>\n    <\/div>\n  <\/div>\n\n  <div class=\"input-section\">\n    <label for=\"loanTerm\">Repayment Period:<\/label>\n    <div class=\"input-with-icon\">\n      <input type=\"number\" id=\"loanTerm\" value=\"20\" \/>\n      <span>Year<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"input-section\">\n    <label for=\"interestRate\">Annual Interest Rate (%):<\/label>\n    <div class=\"input-with-icon\">\n      <input type=\"number\" id=\"interestRate\" value=\"3.5\" step=\"0.1\" \/>\n      <span>%<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"results-summary\">\n    <h3>Simulation Results:<\/h3>\n    <ul>\n      <li>\ud83d\udcb0 <strong>Loan Amount:<\/strong> <span id=\"loanAmount\"><\/span><\/li>\n      <li>\ud83e\uddfe <strong>Monthly Installment:<\/strong> <span id=\"monthlyInstallment\"><\/span><\/li>\n      <li>\ud83d\udcc8 <strong>Total Interest Cost:<\/strong> <span id=\"totalInterest\"><\/span><\/li>\n      <li>\ud83d\udcca <strong>Monthly Income Deduction Percentage:<\/strong> <span id=\"deductionRatio\"><\/span>%<\/li>\n    <\/ul>\n    <div class=\"deduction-status\" id=\"deductionStatus\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- \u2705 CSS -->\n<style>\n.calculator-container {\n  direction: rtl;\n  font-family: 'Cairo', sans-serif;\n  background-color: #ffffff;\n  padding: 25px;\n  border-radius: 14px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  max-width: 600px;\n  margin: 40px auto;\n  border: 1px solid #e0e0e0;\n}\n\n.section-title {\n  font-size: 26px;\n  text-align: center;\n  color: #2e7d32;\n  margin-bottom: 25px;\n  font-weight: bold;\n  background: linear-gradient(to right, #e8f5e9, #ffffff);\n  padding: 10px;\n  border-radius: 8px;\n  box-shadow: inset 0 0 4px rgba(0,0,0,0.05);\n  transition: all 0.4s ease;\n}\n\n.section-title:hover {\n  color: #1a237e;\n  transform: scale(1.03);\n}\n\n.input-section {\n  margin-bottom: 14px;\n}\n\n.input-section label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 6px;\n  color: #37474f;\n}\n\n.input-with-icon {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.input-with-icon input {\n  flex: 1;\n  padding: 8px 10px;\n  border-radius: 8px;\n  border: 1px solid #ccc;\n  font-size: 15px;\n}\n\n.sar-icon {\n  width: 20px;\n  height: 20px;\n  object-fit: contain;\n  opacity: 0.9;\n}\n\n.results-summary {\n  background-color: #f1f8e9;\n  border-right: 5px solid #689f38;\n  padding: 20px;\n  border-radius: 12px;\n  margin-top: 30px;\n}\n\n.results-summary h3 {\n  font-size: 18px;\n  margin-bottom: 10px;\n  color: #33691e;\n}\n\n.results-summary ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.results-summary li {\n  font-size: 15px;\n  margin-bottom: 8px;\n  line-height: 1.6;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.results-summary li:hover {\n  background-color: #e8f5e9;\n  padding: 4px 6px;\n  border-radius: 6px;\n}\n\n.results-summary strong {\n  color: #2e7d32;\n}\n\n.deduction-status {\n  margin-top: 15px;\n  font-weight: bold;\n  text-align: center;\n  font-size: 15px;\n}\n\n\/* \ud83c\udfaf Responsive *\/\n@media (max-width: 600px) {\n  .calculator-container {\n    padding: 15px;\n    width: 100%;\n    box-sizing: border-box;\n    border-radius: 12px;\n    margin: 0 auto;\n  }\n\n  .section-title {\n    font-size: 22px;\n    padding: 8px;\n  }\n\n  .input-section label {\n    font-size: 14px;\n  }\n\n  .input-with-icon input {\n    font-size: 14px;\n    padding: 8px;\n  }\n\n  .results-summary {\n    padding: 15px;\n  }\n\n  .results-summary h3 {\n    font-size: 16px;\n  }\n\n  .results-summary li {\n    font-size: 14px;\n  }\n\n  .deduction-status {\n    font-size: 14px;\n  }\n\n  .sar-icon {\n    width: 18px;\n    height: 18px;\n  }\n}\n<\/style>\n\n<!-- \u2705 JavaScript -->\n<script>\nfunction calculateLoan() {\n  const propertyValue = +document.getElementById('propertyValue').value || 0;\n  const income = +document.getElementById('monthlyIncome').value || 1;\n  const downPayment = +document.getElementById('downPayment').value || 0;\n  const years = +document.getElementById('loanTerm').value || 1;\n  const rate = +document.getElementById('interestRate').value \/ 100 || 0;\n\n  const loanAmount = propertyValue - downPayment;\n  const months = years * 12;\n  const monthlyRate = rate \/ 12;\n\n  const installment = loanAmount * monthlyRate \/ (1 - Math.pow(1 + monthlyRate, -months));\n  const totalInterest = (installment * months) - loanAmount;\n  const deduction = (installment \/ income) * 100;\n\n  const sarIcon = '<img decoding=\"async\" src=\"https:\/\/pvco.sa\/wp-content\/uploads\/2025\/06\/Saudi_Riyal_Symbol-1.webp\" alt=\"SAR\" class=\"sar-icon\" \/>';\n\n  document.getElementById('loanAmount').innerHTML = loanAmount.toLocaleString() + ' ' + sarIcon;\n  document.getElementById('monthlyInstallment').innerHTML = installment.toFixed(2).toLocaleString() + ' ' + sarIcon;\n  document.getElementById('totalInterest').innerHTML = totalInterest.toFixed(2).toLocaleString() + ' ' + sarIcon;\n  document.getElementById('deductionRatio').textContent = deduction.toFixed(1);\n\n  const deductionStatus = document.getElementById(\"deductionStatus\");\n  if (deduction < 25) {\n    deductionStatus.textContent = \"\ud83d\udfe2 \u0645\u0645\u062a\u0627\u0632: \u0627\u0644\u0639\u0628\u0621 \u0627\u0644\u0645\u0627\u0644\u064a \u0645\u0646\u062e\u0641\u0636\";\n    deductionStatus.style.color = \"#2e7d32\";\n  } else if (deduction < 40) {\n    deductionStatus.textContent = \"\ud83d\udfe1 \u0645\u062a\u0648\u0633\u0637: \u0631\u0627\u062c\u0639 \u0627\u0644\u062a\u0632\u0627\u0645\u0627\u062a\u0643\";\n    deductionStatus.style.color = \"#f9a825\";\n  } else {\n    deductionStatus.textContent = \"\ud83d\udd34 \u0645\u0631\u062a\u0641\u0639: \u062e\u0637\u0631! \u0623\u0639\u062f \u0627\u0644\u062a\u0641\u0643\u064a\u0631\";\n    deductionStatus.style.color = \"#c62828\";\n  }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  document.querySelectorAll('input').forEach(input => {\n    input.addEventListener('input', calculateLoan);\n  });\n  calculateLoan();\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"author":1,"parent":0,"template":"elementor_canvas","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-1435","elementskit_content","type-elementskit_content","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/elementskit-content\/1435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/elementskit-content"}],"about":[{"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/types\/elementskit_content"}],"author":[{"embeddable":true,"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":75,"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/elementskit-content\/1435\/revisions"}],"predecessor-version":[{"id":1940,"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/elementskit-content\/1435\/revisions\/1940"}],"wp:attachment":[{"href":"https:\/\/pvco.sa\/en\/wp-json\/wp\/v2\/media?parent=1435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}