{"id":5223,"date":"2024-02-22T08:21:57","date_gmt":"2024-02-22T08:21:57","guid":{"rendered":"https:\/\/www.medicate.ly\/?page_id=5223"},"modified":"2024-03-19T11:55:53","modified_gmt":"2024-03-19T11:55:53","slug":"customers","status":"publish","type":"page","link":"https:\/\/www.medicate.ly\/?page_id=5223","title":{"rendered":"customers"},"content":{"rendered":"
<\/div><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>

\u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0637\u0628\u064a\u0629<\/span><\/span><\/h1><\/header>
<\/span><\/span><\/span><\/span><\/div><\/div>
\u0645\u0632\u0648\u062f\u064a \u0627\u0644\u062e\u062f\u0645\u0629 \u0645\u0646 \u0645\u0633\u062a\u0634\u0641\u0627\u062a \u0645\u0635\u062d\u0627\u062a \u0639\u064a\u0627\u062f\u0627\u062a \u0623\u0633\u0646\u0627\u0646 \u0635\u064a\u062f\u0644\u064a\u0627\u062a
\r\n\u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0639\u0644\u0627\u062c \u0627\u0644\u0637\u0628\u064a\u0639\u064a \u0628\u0635\u0631\u064a\u0627\u062a \u0633\u0645\u0639\u064a\u0627\u062a \u062a\u0635\u0648\u064a\u0631 \u0637\u0628\u064a \u0648\u0645\u062e\u062a\u0628\u0631\u0627\u062a \u062a\u062d\u062f\u064a\u062f \u0646\u0648\u0639 \u0627\u0644\u0645\u0631\u0636 \u0648\u0627\u0644\u062a\u062e\u0635\u0635 \u0627\u0644\u0645\u0637\u0644\u0648\u0628
\r\n\u0648\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062e\u0628\u0631\u0647 \u0627\u0644\u0637\u0628\u064a\u0629 \u0648\u0627\u0644\u0639\u0644\u0645\u064a\u0629
\r\n<\/div><\/header>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
\"https:\/\/www.medicate.ly\/wp-content\/uploads\/2022\/11\/hero_image_contact_responsive.png\"<\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
\n\n \n \n \n Document<\/title>\n <style>\n .container {\n padding: 10px;\n border: 2px solid #e9e9e9;\n background-color: #f9f9f9;\n width: 90%;\n margin: 0 auto;\n box-sizing: border-box;\n }\n\n .tools {\n margin-bottom: 20px;\n }\n\n .filters-container,\n .inputs-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 10px;\n }\n\n .form-group {\n flex: 1 1 45%; \/* Adjust width as needed *\/\n }\n\n .inputs-container input,\n .filters-container select {\n width: 100%;\n }\n\n .table-container {\n overflow-x: auto;\n }\n\n .scroll-table {\n width: 100%;\n border-collapse: collapse;\n }\n\n .scroll-table th,\n .scroll-table td {\n padding: 8px;\n border: 1px solid #ccc;\n }\n\n table td {\n color: rgb(10, 10, 10);\n }\n table tr:nth-child(odd) {\n background-color: rgb(252, 255, 252);\n }\n table tr:nth-child(even) {\n background-color: rgb(6, 81, 139);\n }\n table tr:nth-child(even) td {\n color: white;\n }\n\n .pagination-div {\n margin: 2rem 0;\n display: flex;\n justify-content: center;\n }\n\n .pagination-div a {\n background-color: rgb(6, 81, 139);\n color: white;\n padding: 0.5rem;\n margin-right: 5px;\n text-decoration: none;\n border-radius: 3px;\n }\n\n .pagination-div a.active {\n background-color: rgb(92, 92, 92);\n }\n\n .disabled-link {\n pointer-events: none;\n color: gray;\n text-decoration: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .box {\n margin-bottom: 10px;\n }\n\n .primary-button {\n background-color: #007bff;\n color: #fff;\n border: none;\n padding: 10px 20px;\n border-radius: 4px;\n font-size: 16px;\n cursor: pointer;\n }\n\n @media screen and (max-width: 768px) {\n .form-group {\n flex: 1 1 100%;\n }\n }\n <\/style>\n <\/head>\n <body>\n <br \/><br \/>\n <div class=\"container\">\n <div class=\"tools\">\n <div class=\"filters-container\">\n <div class=\"form-group box\" style=\"text-align: right\">\n <label for=\"type\" style=\"text-align: right\">\u0627\u0644\u0646\u0648\u0639<\/label>\n <select id=\"type\">\n <option value=\"\">-- \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u0625\u062e\u062a\u064a\u0627\u0631 --<\/option>\n <option value=\"\u0639\u064a\u0627\u062f\u0629 \u0623\u0633\u0646\u0627\u0646\">\u0639\u064a\u0627\u062f\u0629 \u0623\u0633\u0646\u0627\u0646<\/option>\n <option value=\"\u0645\u0635\u062d\u0629\">\u0645\u0635\u062d\u0629<\/option>\n <option value=\"\u0635\u064a\u062f\u0644\u064a\u0629\">\u0635\u064a\u062f\u0644\u064a\u0629<\/option>\n <option value=\"\u0645\u0631\u0643\u0632 \u062a\u0635\u0648\u064a\u0631 \u0637\u0628\u064a\">\u0645\u0631\u0643\u0632 \u062a\u0635\u0648\u064a\u0631 \u0637\u0628\u064a<\/option>\n <option value=\"\u0645\u062e\u062a\u0628\u0631 \u062a\u062d\u0627\u0644\u064a\u0644\">\u0645\u062e\u062a\u0628\u0631 \u062a\u062d\u0627\u0644\u064a\u0644<\/option>\n <option value=\"\u0645\u0631\u0643\u0632 \u0628\u0635\u0631\u064a\u0627\u062a\">\u0645\u0631\u0643\u0632 \u0628\u0635\u0631\u064a\u0627\u062a<\/option>\n <option value=\"\u0645\u0631\u0643\u0632 \u0633\u0645\u0639\u064a\u0627\u062a\">\u0645\u0631\u0643\u0632 \u0633\u0645\u0639\u064a\u0627\u062a<\/option>\n <option value=\"\u0645\u0631\u0643\u0632 \u0639\u0644\u0627\u062c \u0637\u0628\u064a\u0639\u064a\">\u0645\u0631\u0643\u0632 \u0639\u0644\u0627\u062c \u0637\u0628\u064a\u0639\u064a<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group box\" style=\"text-align: right\">\n <label for=\"country\">\u0627\u0644\u0628\u0644\u062f<\/label>\n <select id=\"country\">\n <option value=\"\">-- \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u0625\u062e\u062a\u064a\u0627\u0631 --<\/option>\n <option value=\"\u0644\u064a\u0628\u064a\u0627\">\u0644\u064a\u0628\u064a\u0627<\/option>\n <!-- Add other options here -->\n <\/select>\n <\/div>\n <\/div>\n <div class=\"inputs-container\">\n <div class=\"form-group box\" style=\"text-align: right\">\n <label for=\"name\">\u0625\u0633\u0645 \u0645\u0632\u0648\u062f \u0627\u0644\u062e\u062f\u0645\u0629<\/label>\n <input type=\"text\" id=\"name\" placeholder=\"\u0625\u0633\u0645 \u0645\u0632\u0648\u062f \u0627\u0644\u062e\u062f\u0645\u0629\" \/>\n <\/div>\n <div class=\"form-group box\" style=\"text-align: right\">\n <label for=\"city\" style=\"text-align: right\">\u0627\u0644\u0645\u062f\u064a\u0646\u0629<\/label>\n <input type=\"text\" id=\"city\" placeholder=\"\u0627\u0644\u0645\u062f\u064a\u0646\u0629\" \/>\n <\/div>\n <\/div>\n <button type=\"submit\" id=\"search-button\">\u0628\u062d\u062b<\/button>\n <\/div>\n<\/div>\n<br>\n <div class=\"table-container\">\n <table class=\"my-table scroll-table\">\n <thead>\n <tr>\n <th>#<\/th>\n <th>\u0645\u0632\u0648\u062f \u0627\u0644\u062e\u062f\u0645\u0629<\/th>\n <th>\u0627\u0644\u0646\u0648\u0639<\/th>\n <th>\u0627\u0644\u0645\u062f\u064a\u0646\u0629<\/th>\n <th>\u0627\u0644\u0639\u0646\u0648\u0627\u0646<\/th>\n <th>\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641<\/th>\n <th>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <div class=\"pagination-div\"><\/div>\n<\/div>\n <script>\n async function getData() {\n \/\/ Get the query string from the URL\n const queryString = window.location.search;\n\n \/\/ Create a new URLSearchParams object from the query string\n const queryParams = new URLSearchParams(queryString);\n\n \/\/ Initialize an empty object to store query parameters\n const queryParamsObject = {};\n\n \/\/ Loop through each query parameter and add it to the object\n for (const [key, value] of queryParams.entries()) {\n if (key == \"page_number\") {\n queryParamsObject[\"page\"] = value;\n } else if (key == \"service_provider_name\") {\n queryParamsObject[\"name\"] = value;\n } else {\n queryParamsObject[key] = value;\n }\n }\n\n const response = await fetch(\n `https:\/\/medicateint.com\/customerAppAPI\/serviceProvidersIndex?${new URLSearchParams(\n queryParamsObject\n )}`\n );\n if (!response.ok) {\n return;\n }\n const jsonData = await response.json();\n\n const tableData = jsonData.data;\n const theContainerDivElement = document.querySelector(\".the-container\");\n \/\/ theContainerDivElement.innerHTML = JSON.stringify(jsonData)\n const theTableBody = document.querySelector(\".my-table tbody\");\n tableData.forEach((todo) => {\n const newTrElement = document.createElement(\"tr\");\n const idTdElement = document.createElement(\"td\");\n idTdElement.textContent = todo.id;\n const servierProviderNameElement = document.createElement(\"td\");\n const serviceProviderLinkElement = document.createElement(\"a\");\n const theLinkHref = `https:\/\/www.medicate.ly\/?page_id=5299&service_provider_id=${todo.id}`;\n serviceProviderLinkElement.setAttribute(\"href\", theLinkHref);\n serviceProviderLinkElement.textContent = todo.name;\n servierProviderNameElement.appendChild(serviceProviderLinkElement);\n const typeTdElement = document.createElement(\"td\");\n typeTdElement.textContent = todo.type;\n const cityTdElement = document.createElement(\"td\");\n cityTdElement.textContent = todo.city.name;\n const addressTdElement = document.createElement(\"td\");\n addressTdElement.textContent = todo.address;\n const phoneNumberTdElement = document.createElement(\"td\");\n phoneNumberTdElement.textContent = todo.phone_number;\n const emailTdElement = document.createElement(\"td\");\n emailTdElement.textContent = todo.email;\n newTrElement.append(\n idTdElement,\n servierProviderNameElement,\n typeTdElement,\n cityTdElement,\n addressTdElement,\n phoneNumberTdElement,\n emailTdElement\n );\n theTableBody.appendChild(newTrElement);\n });\n\n paginate(jsonData);\n }\n getData();\n \/\/ logic for pagination div\n function paginate(data) {\n \/\/ Get the query string from the URL\n const queryString = window.location.search;\n\n \/\/ Create a new URLSearchParams object from the query string\n const queryParams = new URLSearchParams(queryString);\n\n \/\/ Initialize an empty object to store query parameters\n const queryParamsObject = {};\n\n \/\/ Loop through each query parameter and add it to the object\n for (const [key, value] of queryParams.entries()) {\n queryParamsObject[key] = value;\n }\n\n const paginationDivElement = document.querySelector(\".pagination-div\");\n const currentPage = data.current_page;\n const lastPage = data.last_page;\n let pages = [1, 2, currentPage, lastPage - 1, lastPage];\n pages = pages.filter(\n (page) => page >= 1 && page <= lastPage && page !== 0\n );\n pages = pages.sort((a, b) => a - b);\n pages = Array.from(new Set(pages));\n\n \/\/ previous page link\n const previousPageLink = document.createElement(\"a\");\n previousPageLink.textContent = \"\u0627\u0644\u0633\u0627\u0628\u0642\";\n previousPageLink.setAttribute(\n \"href\",\n `?${new URLSearchParams({\n ...queryParamsObject,\n page_number: currentPage - 1,\n })}`\n );\n if (currentPage == 1) {\n previousPageLink.classList.add(\"disabled-link\");\n }\n paginationDivElement.append(previousPageLink);\n\n pages.map((pageNumber) => {\n const pageLinkElement = document.createElement(\"a\");\n pageLinkElement.textContent = pageNumber;\n pageLinkElement.setAttribute(\n \"href\",\n `?${new URLSearchParams({\n ...queryParamsObject,\n page_number: pageNumber,\n })}`\n );\n if (currentPage == pageNumber) {\n pageLinkElement.classList.add(\"active\", \"disabled-link\");\n }\n\n paginationDivElement.append(pageLinkElement);\n });\n\n \/\/ next page link\n const nextPageLink = document.createElement(\"a\");\n nextPageLink.textContent = \"\u0627\u0644\u062a\u0627\u0644\u064a\";\n nextPageLink.setAttribute(\n \"href\",\n `?${new URLSearchParams({\n ...queryParamsObject,\n page_number: currentPage + 1,\n })}`\n );\n if (currentPage == lastPage) {\n nextPageLink.classList.add(\"disabled-link\");\n }\n paginationDivElement.append(nextPageLink);\n }\n\n function selectingTypeHandler() {\n const selectTypeElement = document.querySelector(\"select#type\");\n const valueOfType = getValueFromQueryParamKey(\"type\");\n console.log(\"the value of type\", valueOfType);\n if (valueOfType) {\n selectTypeElement.value = valueOfType;\n }\n selectTypeElement.addEventListener(\"change\", (e) => {\n const theOptionSelectValue = e.target.value;\n let newUrl = \"\";\n if (theOptionSelectValue == \"\") {\n newUrl = deleteQueryParamKey({\n currentUrl: window.location.href,\n key: \"type\",\n });\n } else {\n newUrl = setNewKeyWithTheSameUrl({\n currentUrl: window.location.href,\n key: \"type\",\n value: theOptionSelectValue,\n });\n }\n newUrl = deleteQueryParamKey({\n currentUrl: newUrl,\n key: \"page_number\",\n });\n goToNewHrefUrl(newUrl);\n });\n }\n selectingTypeHandler();\n\n function setNewKeyWithTheSameUrl({ currentUrl, key, value }) {\n \/\/ Get the current URL\n\n \/\/ Create a URL object from the current URL\n const url = new URL(currentUrl);\n\n \/\/ Update or add query parameter based on selected option\n url.searchParams.set(key, value);\n return url.toString();\n }\n\n function getValueFromQueryParamKey(key) {\n \/\/ Get the current URL\n const currentUrl = window.location.href;\n \/\/ Create a URL object from the current URL\n const url = new URL(currentUrl);\n return url.searchParams.get(key);\n }\n\n function deleteQueryParamKey({ currentUrl, key }) {\n console.log(\"the current url\", currentUrl);\n \/\/ Create a URL object from the current URL\n const url = new URL(currentUrl);\n\n \/\/ Get the URLSearchParams object from the URL\n const searchParams = url.searchParams;\n\n \/\/ Remove the query parameter by key\n searchParams.delete(key);\n\n \/\/ Construct the new URL with the updated query parameters\n const newUrl =\n url.origin + url.pathname + \"?\" + searchParams.toString();\n return newUrl.toString();\n }\n\n function goToNewHrefUrl(url) {\n window.location.href = url;\n }\n\n \/\/ the country select handling\n function countrySelectingHandler() {\n const selectCountryElement = document.querySelector(\"select#country\");\n const countryValueFromQueryParam = getValueFromQueryParamKey(\"country\");\n if (countryValueFromQueryParam) {\n selectCountryElement.value = countryValueFromQueryParam;\n }\n selectCountryElement.addEventListener(\"change\", (e) => {\n const theValueOfSelectedCountry = e.target.value;\n let newUrl = \"\";\n if (theValueOfSelectedCountry == \"\") {\n newUrl = deleteQueryParamKey({\n currentUrl: window.location.href,\n key: \"country\",\n });\n } else {\n newUrl = setNewKeyWithTheSameUrl({\n currentUrl: window.location.href,\n key: \"country\",\n value: theValueOfSelectedCountry,\n });\n }\n newUrl = deleteQueryParamKey({\n currentUrl: newUrl,\n key: \"page_number\",\n });\n goToNewHrefUrl(newUrl);\n });\n }\n countrySelectingHandler();\n\n const serviceProviderNameInputElement =\n document.querySelector(\"input#name\");\n const cityInputElement = document.querySelector(\"input#city\");\n\n function serviceProviderNameMutatorWithGettingTheValue() {\n const serviceProviderNameValueFromQueryParam =\n getValueFromQueryParamKey(\"service_provider_name\");\n if (serviceProviderNameValueFromQueryParam) {\n serviceProviderNameInputElement.value =\n serviceProviderNameValueFromQueryParam;\n }\n }\n\n function cityHandler() {\n const cityValueFromQueryParam = getValueFromQueryParamKey(\"city\");\n if (cityValueFromQueryParam) {\n cityInputElement.value = cityValueFromQueryParam;\n }\n }\n\n function buttonSubmitHandler() {\n const submitButtonElement = document.querySelector(\n \"button#search-button\"\n );\n submitButtonElement.addEventListener(\"click\", (e) => {\n const serviceProviderNameValue =\n serviceProviderNameInputElement.value;\n const cityValue = cityInputElement.value;\n console.log(serviceProviderNameInputElement.value);\n let newUrl = window.location.href;\n if (serviceProviderNameValue) {\n newUrl = setNewKeyWithTheSameUrl({\n currentUrl: newUrl,\n key: \"service_provider_name\",\n value: serviceProviderNameValue,\n });\n } else {\n newUrl = deleteQueryParamKey({\n currentUrl: newUrl,\n key: \"service_provider_name\",\n });\n }\n \/\/ goToNewHrefUrl(newUrl);\n if (cityValue) {\n newUrl = setNewKeyWithTheSameUrl({\n currentUrl: newUrl,\n key: \"city\",\n value: cityValue,\n });\n } else {\n newUrl = deleteQueryParamKey({\n currentUrl: newUrl,\n key: \"city\",\n });\n }\n newUrl = deleteQueryParamKey({\n currentUrl: newUrl,\n key: \"page_number\",\n });\n console.log(\"the new url\", newUrl);\n goToNewHrefUrl(newUrl);\n });\n }\n serviceProviderNameMutatorWithGettingTheValue();\n cityHandler();\n buttonSubmitHandler();\n <\/script>\n <\/body>\n<\/html>\n<\/div><div data-bb-version=\"4.6.1\" class=\"bt_bb_separator_v2 bt_bb_border_style_none bt_bb_top_spacing_large bt_bb_bottom_spacing_none bt_bb_border_thickness_1 bt_bb_icon_size_normal bt_bb_text_size_normal bt_bb_separator_v2_without_content\" data-bt-override-class=\"{"bt_bb_top_spacing_":{"current_class":"bt_bb_top_spacing_large","xxl":"large"},"bt_bb_bottom_spacing_":{"current_class":"bt_bb_bottom_spacing_none","xxl":"none"},"bt_bb_border_thickness_":{"current_class":"bt_bb_border_thickness_1","xxl":"1"},"bt_bb_icon_size_":{"current_class":"bt_bb_icon_size_normal","xxl":"normal"},"bt_bb_text_size_":{"current_class":"bt_bb_text_size_normal","xxl":"normal"}}\"><div class=\"bt_bb_separator_v2_inner\"><span class=\"bt_bb_separator_v2_inner_before\"><\/span><span class=\"bt_bb_separator_v2_inner_content\"><span data-ico-=\"\" class=\"bt_bb_icon_holder\"><\/span><\/span><span class=\"bt_bb_separator_v2_inner_after\"><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><!-- cell_inner --><\/div><!-- cell --><\/div><!-- port --><\/section><section data-bb-version=\"4.6.1\" id=\"bt_bb_section69fc82929b7a1\" class=\"bt_bb_section bt_bb_layout_boxed_1200\" data-bt-override-class=\"null\"><div class=\"bt_bb_port\"><div class=\"bt_bb_cell\"><div class=\"bt_bb_cell_inner\"><\/div><!-- cell_inner --><\/div><!-- cell --><\/div><!-- port --><\/section><section data-bb-version=\"4.6.1\" id=\"bt_bb_section69fc82929b861\" class=\"bt_bb_section bt_bb_layout_boxed_1200\" data-bt-override-class=\"null\"><div class=\"bt_bb_port\"><div class=\"bt_bb_cell\"><div class=\"bt_bb_cell_inner\"><div class=\"bt_bb_row_wrapper\"><div class=\"bt_bb_row\" data-bt-override-class=\"{}\"><div data-bb-version=\"4.6.1\" class=\"bt_bb_column col-xxl-12 col-xl-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 bt_bb_vertical_align_top bt_bb_align_left bt_bb_padding_normal bt_bb_border_thickness_2px\" data-width=\"12\" data-bt-override-class=\"{}\"><div class=\"bt_bb_column_content\"><div class=\"bt_bb_column_content_inner\"><div class=\"bt_bb_raw_content\"><script src='nprogress.js'><\/script>\n<link rel='stylesheet' href='nprogress.css'\/><\/div><\/div><\/div><\/div><\/div><\/div><\/div><!-- cell_inner --><\/div><!-- cell --><\/div><!-- port --><\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5223","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/pages\/5223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.medicate.ly\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5223"}],"version-history":[{"count":43,"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/pages\/5223\/revisions"}],"predecessor-version":[{"id":5639,"href":"https:\/\/www.medicate.ly\/index.php?rest_route=\/wp\/v2\/pages\/5223\/revisions\/5639"}],"wp:attachment":[{"href":"https:\/\/www.medicate.ly\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}