{"id":2548,"date":"2024-07-31T16:53:26","date_gmt":"2024-07-31T12:53:26","guid":{"rendered":"https:\/\/ibtekarlabs.com\/forms\/%d8%a7%d9%84%d8%a8%d8%a7%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9\/"},"modified":"2025-03-20T19:27:42","modified_gmt":"2025-03-20T15:27:42","slug":"%d8%a7%d9%84%d8%a8%d8%a7%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9","status":"publish","type":"forms","link":"https:\/\/ibtekarlabs.com\/ar\/\u0627\u0644\u0646\u0645\u0627\u0630\u062c\/%d8%a7%d9%84%d8%a8%d8%a7%d9%82%d8%a7%d8%aa-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9\/","title":{"rendered":"\u0627\u0644\u0628\u0627\u0642\u0627\u062a"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column]<form enctype=\"multipart\/form-data\" id=\"2545\" class=\"ajax-form\" onsubmit=\"event.preventDefault();\"><input type=\"hidden\" name=\"ibtekarlabs_form_submit\" value=\"1\" \/><input type=\"hidden\" name=\"id\" value=\"2545\" \/><div class=\"row\"><div class=\"col-12 mb-3\" id=\"field-package-title-form\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"package-title-form\" name=\"Package\"  readonly>\n                    <label for=\"package-title-form\">\u0627\u0644\u0628\u0627\u0642\u0629<\/label>\n                <\/div>\n            <\/div><div class=\"col-12 mb-3\" id=\"field-name\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" required >\n                    <label for=\"name\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\n                <\/div>\n            <\/div><div class=\"col-12 mb-3\">\n                <div class=\"form-floating\">\n                    <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" required>\n                    <label for=\"email\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n                <\/div>\n            <\/div>    <div class=\"col-12 mb-3\">\n        <div class=\"input-group phone\">\n            <label for=\"phone\" class=\"col-form-label\">\u0647\u0627\u062a\u0641:<\/label>\n            <input id=\"phone_display\" type=\"tel\" class=\"form-control\"> <!-- User Types Here -->\n            <input type=\"hidden\" id=\"phone\" name=\"phone\"> <!-- Hidden Field for Submission -->\n        <\/div>\n    <\/div>\n<script>\nwindow.addEventListener(\"load\", function () {\n    var ar_tel_json_data = null;\n\n    function initializeIntlTelInput() {\n        const input = document.querySelector(\"#phone_display\");\n        if (!input) {\n            return;\n        }\n\n        const itiOptions = {\n            i18n: ar_tel_json_data,            separateDialCode: true,\n            countryOrder: [\"ae\", \"sa\", \"om\", \"kw\", \"qa\", \"bh\"],\n            initialCountry: \"auto\",\n            geoIpLookup: function (callback) {\n                fetch(\"https:\/\/ipapi.co\/json\")\n                    .then((res) => res.json())\n                    .then((data) => callback(data.country_code))\n                    .catch(() => callback(\"ae\"));\n            },\n            utilsScript: \"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@latest\/build\/js\/utils.js\",\n        };\n\n        if (ar_tel_json_data) {\n            itiOptions.customData = ar_tel_json_data;\n        }\n\n        const iti = window.intlTelInput(input, itiOptions);\n        window.iti = iti;\n\n        iti.promise\n            .then(() => console.log(\"utils.js loaded successfully.\"))\n            .catch((error) => console.error(\"Error loading utils.js:\", error));\n\n        input.addEventListener(\"input\", function () {\n            const rawValue = input.value.trim();\n            if (rawValue) {\n                validatePhoneNumber(input, iti);\n            } else {\n                input.classList.remove(\"is-invalid\", \"is-valid\");\n            }\n        });\n\n        input.addEventListener(\"countrychange\", function () {\n            const rawValue = input.value.trim();\n            if (rawValue) {\n                validatePhoneNumber(input, iti);\n            } else {\n                input.classList.remove(\"is-invalid\", \"is-valid\");\n            }\n        });\n    }\n\n    function validatePhoneNumber(input, iti) {\n        const rawValue = input.value.trim();\n        const countryData = iti.getSelectedCountryData();\n        const fullNumber = rawValue ? `+${countryData.dialCode}${rawValue}` : \"\";\n\n        try {\n            const parsedNumber = libphonenumber.parsePhoneNumberFromString(fullNumber, countryData.iso2);\n\n            if (parsedNumber && parsedNumber.isValid()) {\n                input.classList.remove(\"is-invalid\");\n                input.classList.add(\"is-valid\");\n\n                \/\/ Set the hidden input field value with full number\n                document.querySelector(\"#phone\").value = parsedNumber.formatInternational();\n                return true;\n            } else {\n                input.classList.remove(\"is-valid\");\n                input.classList.add(\"is-invalid\");\n                document.querySelector(\"#phone\").value = \"\"; \/\/ Clear hidden field on invalid input\n                return false;\n            }\n        } catch (error) {\n            input.classList.remove(\"is-valid\");\n            input.classList.add(\"is-invalid\");\n            document.querySelector(\"#phone\").value = \"\"; \/\/ Clear hidden field\n            return false;\n        }\n    }\n\n    function handleArabicLocalization(callback) {\n                jQuery.ajax({\n            url: customIntlTelInputData.jsonUrl,\n            dataType: 'json',\n        })\n            .done(function (data) {\n                ar_tel_json_data = data;\n                callback();\n            })\n            .fail(function (xhr, status, error) {\n                \/\/console.warn(\"Arabic localization data not loaded:\", error);\n                callback();\n            });\n            }\n\n    const phoneInput = document.querySelector(\"#phone_display\");\n    if (phoneInput) {\n        const observer = new IntersectionObserver(function (entries, observer) {\n            entries.forEach(function (entry) {\n                if (entry.isIntersecting) {\n                    observer.unobserve(entry.target);\n                    handleArabicLocalization(initializeIntlTelInput);\n                }\n            });\n        });\n\n        observer.observe(phoneInput);\n    }\n});\n<\/script>\n    <div class=\"col-12 mb-3\" id=\"field-company\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"company\" name=\"company\"  >\n                    <label for=\"company\">\u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629<\/label>\n                <\/div>\n            <\/div><div class=\"col-12 mb-3\" id=\"field-remarks\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"remarks\" name=\"remarks\"  rows=\"3\"><\/textarea>\n                    <label for=\"remarks\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/label>\n                <\/div>\n            <\/div><\/div><div class=\"cf-turnstile mb-3\" data-sitekey=\"0x4AAAAAAB6JNV8jszg8BEgh\" data-callback=\"onTurnstileSuccess\" data-error-callback=\"onTurnstileError\" data-form-id=\"2545\"><\/div><button type=\"submit\" class=\"btn btn-primary \" data-text=\"\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644 ...\">\u0625\u0631\u0633\u0627\u0644<\/button><div id=\"form-messages\" class=\"mt-3\"><\/div><\/form><span class=\"captcha-notice\" style=\"font-size: 0.8rem; color: #666; margin-top: 10px;\">This site is protected by Cloudflare Turnstile.<\/span>[\/vc_column][\/vc_row]<\/p>\r\n<\/div>","protected":false},"featured_media":0,"menu_order":0,"template":"","meta":[],"class_list":["post-2548","forms","type-forms","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/forms\/2548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/forms"}],"about":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/types\/forms"}],"wp:attachment":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/media?parent=2548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}