{"id":39,"date":"2025-07-08T09:52:26","date_gmt":"2025-07-08T09:52:26","guid":{"rendered":"https:\/\/testing.ly\/aman\/?page_id=39"},"modified":"2025-07-11T12:22:00","modified_gmt":"2025-07-11T12:22:00","slug":"request-support","status":"publish","type":"page","link":"https:\/\/aoadlibya.org\/en\/request-support\/","title":{"rendered":"Request support"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"39\" class=\"elementor elementor-39\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10ba8b0a e-flex e-con-boxed e-con e-parent\" data-id=\"10ba8b0a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-282eade elementor-widget elementor-widget-heading\" data-id=\"282eade\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Request support<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-272cea8 e-con-full e-flex e-con e-parent\" data-id=\"272cea8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a4315f elementor-widget elementor-widget-html\" data-id=\"0a4315f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"request-support-form-wrapper\">\n  <form class=\"request-support-form\" id=\"contactForm\" onsubmit=\"return submitForm(event)\" action=\"\">\n    <h2>Request support<\/h2>\n    <div id=\"request-support-form-loader\" style=\"display: none; text-align:center; color:#555;\">\n      <p>Loading options...<\/p>\n    <\/div>\n    <div>\n      <label for=\"name\">Name:<\/label>\n      <input class=\"support-input\" type=\"text\" id=\"name\" name=\"name\" required \/>\n    <\/div>\n\n    <div>\n      <label for=\"phone\">Phone Number:<\/label>\n      <input class=\"support-input\" type=\"tel\" id=\"phone\" name=\"phone\" required pattern=\"^[0-9]{10,15}$\" \/>\n    <\/div>\n\n    <div>\n      <label for=\"type\">Type:<\/label>\n      <select id=\"type\" class=\"support-input\" required><\/select>\n    <\/div>\n\n    <div>\n      <label for=\"place\">Location<\/label>\n      <select id=\"place\" class=\"support-input\" required><\/select>\n    <\/div>\n\n    <div>\n      <label for=\"city\">City:<\/label>\n      <select id=\"city\" class=\"support-input\" required><\/select>\n    <\/div>\n    \n    <div>\n      <label for=\"additional_info\">Additional Notes:<\/label>\n      <textarea class=\"support-input\" id=\"additional_info\" name=\"additional_info\" rows=\"4\"><\/textarea>\n    <\/div>\n    \n    <button type=\"submit\">Send<\/button>\n    <p id=\"formMessage\" style=\"color: green; margin-top: 10px;\"><\/p>\n  <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/section>\n\n<script>\n  \/\/ Load and populate selects when the page loads\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const loader = document.getElementById(\"request-support-form-loader\");\n    loader.style.display = \"block\"; \n    fetch(\"https:\/\/wisteria-helix.sadeem-factory.com\/api\/v1\/categories?paginate=9999\",{medhotd:\"GET\"})\n      .then((res) => res.json())\n      .then((data) => {\n        populateSelect(\"type\", data.data, 1);\n        populateSelect(\"place\", data.data, 2);\n        populateSelect(\"city\", data.data, 3);\n      })\n      .catch((err) => {\n        console.error(\"Error loading categories:\", err);\n        alert(\"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0644\u0627\u062d\u0642\u0627\u064b.\");\n      }).finally(()=>{\n        loader.style.display = \"none\"; \n      })\n  });\n\n  \/\/ Helper function to populate select inputs\n  function populateSelect(selectId, data, parentId) {\n    const select = document.getElementById(selectId);\n    \/\/ select.innerHTML = `<option value=\"\">\u0627\u062e\u062a\u0631 ${selectId}<\/option>`; \/\/ default option\n\n    const filtered = data.filter((item) => item.parent_id === parentId);\n\n    filtered.forEach((item) => {\n      const option = document.createElement(\"option\");\n      option.value = item.id;           \/\/ send this value\n      option.textContent = `${item.name?.ar} | ${item.name?.en} `;   \/\/ show this in the UI\n      select.appendChild(option);\n    });\n  }\n\n  \/\/ Submit form handler\n  function submitForm(event) {\n    event.preventDefault();\n\n  const name = document.getElementById(\"name\").value.trim();\n  const phone = document.getElementById(\"phone\").value.trim();\n  const type_id = document.getElementById(\"type\").value;\n  const place_id = document.getElementById(\"place\").value;\n  const city_id = document.getElementById(\"city\").value;\n  const additional_info = document.getElementById(\"additional_info\").value.trim();\n  const messageBox = document.getElementById(\"formMessage\");\n\n    \/\/ Phone validation\n    const phoneRegex = \/^[0-9]{10,15}$\/;\n    if (!phoneRegex.test(phone)) {\n      messageBox.style.color = \"red\";\n      messageBox.textContent = \"\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0631\u0642\u0645 \u0647\u0627\u062a\u0641 \u0635\u062d\u064a\u062d (10 \u0625\u0644\u0649 15 \u0631\u0642\u0645\u064b\u0627).\";\n      return false;\n    }\n\n    \/\/ Basic validation for selects (optional)\n    if (!type_id || !place_id || !city_id) {\n      messageBox.style.color = \"red\";\n      messageBox.textContent = \"\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0646\u0648\u0639 \u0648\u0627\u0644\u0645\u0643\u0627\u0646 \u0648\u0627\u0644\u0645\u062f\u064a\u0646\u0629.\";\n      return false;\n    }\n\n    \/\/ Submit form data\n    fetch(\"https:\/\/wisteria-helix.sadeem-factory.com\/api\/v1\/reports\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application\/json\",\n      },\n      body: JSON.stringify({\n        name,\n        phone,\n        type_id,\n        place_id,\n        city_id,\n        additional_info,\n        reported_at:new Date().toLocaleString()\n      }),\n    })\n      .then((res) => {\n        if (res.ok) {\n          messageBox.style.color = \"green\";\n          messageBox.textContent = \"\u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0628\u0646\u062c\u0627\u062d!\";\n          document.getElementById(\"contactForm\").reset(); \/\/ reset form\n        } else {\n          throw new Error(\"Submission failed\");\n        }\n      })\n      .catch(() => {\n        messageBox.style.color = \"red\";\n        messageBox.textContent = \"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.\";\n      });\n\n    return false;\n  }\n<\/script>\n\n\n\n<style>\n.request-support-form-wrapper{\n    padding:64px;\n    background:#f9f9f9;\n}\n.request-support-form-wrapper h2 {\n    font-size:50px;\n    font-weight:300;\n}\n.request-support-form {\n    width:100%;\n    max-width:800px;\n    margin:auto;\n    \n    display:flex;\n    flex-direction:column;\n    gap:16px;\n}\n    .support-input{\n        display:block;\n        width:100%;\n        min-width:100%;\n    }\n    #request-support-form-loader {\n  font-size: 16px;\n  padding: 10px;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0637\u0644\u0628 \u062f\u0639\u0645 \u0637\u0644\u0628 \u062f\u0639\u0645 \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a&#8230; \u0627\u0644\u0627\u0633\u0645: \u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641: \u0627\u0644\u0646\u0648\u0639: \u0627\u0644\u0645\u0643\u0627\u0646: \u0627\u0644\u0645\u062f\u064a\u0646\u0629: \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629: \u0627\u0631\u0633\u0627\u0644<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","inline_featured_image":false,"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":50,"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":392,"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/pages\/39\/revisions\/392"}],"wp:attachment":[{"href":"https:\/\/aoadlibya.org\/en\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}