{"id":427,"date":"2025-08-20T05:05:00","date_gmt":"2025-08-20T05:05:00","guid":{"rendered":"https:\/\/vijayhydrotech.com\/staging\/?page_id=427"},"modified":"2025-08-25T16:25:39","modified_gmt":"2025-08-25T16:25:39","slug":"product-search","status":"publish","type":"page","link":"https:\/\/vijayhydrotech.com\/staging\/product-search\/","title":{"rendered":"Product Search"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">\r\n<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1756102887957{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;background-color: #f5f5f5 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1755581477218{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_text css=&#8221;&#8221;]    \r\n    <form id=\"myLogin\" method=\"post\" >\r\n        <h2 style=\"font-size: 30px;color: #069ada;text-align: center;font-family:PT Sans;font-weight:700;font-style:normal\">Login<\/h2>\r\n        <p >\r\n            <input style=\"width:100%\"   maxlength=\"50\" class=\"wpcf7-form-control wpcf7-text\" \r\n                   placeholder=\"User Name *\" type=\"text\" name=\"log\">\r\n        <\/p>\r\n        <p >\r\n            <input style=\"width:100%\"   maxlength=\"50\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" \r\n                   placeholder=\"Password *\" type=\"password\" name=\"pwd\">\r\n        <\/p>\r\n        <p>\r\n            <input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Login\" style=\"display:flex;margin-top:65px;width:100%\">\r\n        <\/p>\r\n        <!--<div id=\"invalidlogin\" style=\"display:none;color:red;\">Invalid username or password<\/div>-->\r\n        <input type=\"hidden\" name=\"my_custom_login\" value=\"1\">\r\n    <\/form>\r\n    \r\n    [\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1755758672310{margin-top: 0px !important;margin-bottom: 0px !important;border-left-width: 1px !important;padding-top: 0px !important;padding-bottom: 0px !important;border-left-style: solid !important;border-color: #d1d1d1 !important;}&#8221;][vc_custom_heading text=&#8221;Request for Access&#8221; font_container=&#8221;tag:h2|font_size:30px|text_align:center|color:%23069ada|line_height:50px&#8221; google_fonts=&#8221;font_family:PT%20Sans%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal&#8221; css=&#8221;.vc_custom_1755581372679{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f534-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"534\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/staging\/wp-json\/wp\/v2\/pages\/427#wpcf7-f534-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"534\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f534-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<P style=\"display: flex; margin-bottom: 0px; width:100%; justify-content: space-between;\"><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"Name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Name *\" value=\"\" type=\"text\" name=\"Name\" \/><\/span><span style=\"margin-left:10px;\"><span class=\"wpcf7-form-control-wrap\" data-name=\"Company\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company *\" value=\"\" type=\"text\" name=\"Company\" \/><\/span><\/span>\n<\/p>\n<P style=\"display: flex; margin-bottom: 0px; width:100%; justify-content: space-between;\"><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Email *\" value=\"\" type=\"email\" name=\"email\" \/><\/span><span style=\"margin-left:10px;\"><span class=\"wpcf7-form-control-wrap\" data-name=\"MobileNumber\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mobile Number *\" value=\"\" type=\"tel\" name=\"MobileNumber\" \/><\/span><\/span>\n<\/p>\n<P style=\"display: flex; margin-bottom: 10px; width:100%; justify-content: space-between;\"><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"City\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"City\/State *\" value=\"\" type=\"text\" name=\"City\" \/><\/span><span style=\"margin-left:10px;\"><span class=\"wpcf7-form-control-wrap\" data-name=\"Message\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Message\" value=\"\" type=\"text\" name=\"Message\" \/><\/span><\/span>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Request for Access\" style=\"display: flex; width:100%\"\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n[\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]\n    <style>\n\n    footer {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      background: #333;\n      color: #fff;\n      text-align: center;\n      padding: 10px;\n    }\n    \n    .spinner {\n      background: url('https:\/\/vijayhydrotech.com\/staging\/wp-includes\/images\/spinner.gif') no-repeat;\n      background-size: 20px 20px;\n      width: 90%;\n      height: 20px;\n      display: none; \/* hidden by default *\/\n      margin: auto;\n    }\n\n   .btn-outline {\n    display: inline-block;\n    padding: 0.4rem 0.4rem;\n    border: 2px solid #0f62fe;          \/* border line *\/\n    background: transparent;            \/* no fill *\/\n    color: #0f62fe;\n    font: 600 16px\/1.1 system-ui, sans-serif;\n    border-radius: 2px;\n    cursor: pointer;\n    transition: transform .08s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;\n   }\n\n   .btn-outline:hover {\n    background: #0f62fe;                \/* fill on hover *\/\n    color: #fff;\n   }\n\n   .btn-outline:active {\n    transform: translateY(1px);\n   }\n\n   .btn-outline:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(15, 98, 254, .25);\n   }\n\n   .spare-part {\n      display: flex;\n      align-items: flex-start;\n      margin-bottom: 0px;\n      margin-left:10px;\n    }\n\n    .pos-circle {\n      width: auto;\n      height: 20px;\n      border-radius: 40%;\n      background: lightgrey;\n      color: black;\n      text-align: center;\n      line-height: 20px;\n      font-size: 11px;\n      margin-right: 10px;\n      flex-shrink: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n    }\n\n    .part-details {\n      flex: 1;\n    }\n\n    .part-name {\n      font-weight: bold;\n      font-size: .8em;\n      color: #000000;\n    }\n\n    .part-material {\n      font-size: 0.75em;\n      color: #2c3e50;\n    }\n\n    \/* Nested children indent *\/\n    .children {\n      margin-left: 40px;\n      border-left: 2px dotted #ccc;\n      padding-left: 15px;\n      margin-top: 0px;\n    }\n\n    #generalText {\n      margin-bottom: 0x;\n      padding: 10px;\n      background: #f9f9f9;\n      border-left: 3px solid #007acc;\n    }\n\n   <\/style>\n   <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/seikichi\/tiff.js\/tiff.min.js\"><\/script>\n    <form id=\"mySearchForm\" style=\"margin-bottom:10px;\">\n                <h2 style=\"margin:0px;font-size: 30px;padding:0px;color: #069ada;text-align: left;font-weight:700;font-style:normal\" class=\"vc_custom_heading vc_do_custom_heading vc_custom_1755758777231\">Search Product<\/h2>\n        <p style=\"display: flex; width:100%;\">\n        <span class=\"wpcf7-form-control-wrap\" style=\"width: 80%;\">\n        <input type=\"text\" name=\"query\" placeholder=\"PRODUCT or OEM NR.\" required \n               style=\"padding:8px;width:100%;border:1px solid #ccc;border-radius:4px;\">\n            <\/span>\n        <span style=\"margin-left:10px;width: 20%;\">\n            <input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Search\" style=\"display: flex; width:100%\" \"=\"\">\n        <\/span>\n        <\/p>\n    <\/form>\n    <div id=\"loading\"   class=\"spinner\"><\/div>\n    <div id=\"search-results\"> \n    <\/div>\n    <footer id=\"footer\" class=\"footer solid-bg empty-footer\">\n    <!-- !Bottom-bar -->\n    <div id=\"bottom-bar\" class=\"logo-left\" role=\"contentinfo\">\n        <div class=\"wf-wrap\">\n            <div class=\"wf-container-bottom\">\n                    <div class=\"wf-float-left\">\n    \n    \t\t\t\t\t\u00a92025 Vijay Hydro Tech.\n                    <\/div>\n                <div class=\"wf-float-right\">\n    \t\t\t\t<div class=\"bottom-text-block\"><p>Powered by : <a href=\"https:\/\/www.smginfotech.com\" target=\"_blank\">SMG Infosloutions Pvt Ltd<\/a><\/p>\n                <\/div>\n                <\/div>\n            <\/div><!-- .wf-container-bottom -->\n        <\/div><!-- .wf-wrap -->\n    <\/div><!-- #bottom-bar -->\n\t<\/footer>\n\n    <script>\n\n    function sendpricerequest(productIAM,productShort,productTitle,UserID) \n    {\n           alert(\"Your Price Request is submitted.\");\n           const btn = document.getElementById(\"btnproductrequest\")\n           btn.disabled= true;\n    <!--alert(btn.text);-->\n            fetch(\"https:\/\/vijayhydrotech.com\/staging\/smg\/sendpricerequest.php\", {\n                method: \"POST\",\n                headers: {\n                    \"Content-Type\": \"application\/json\"\n                },\n                \n                body: JSON.stringify({\n                    product_iam: productIAM,\n                    product_short: productShort,\n                    product_title: productTitle,\n                    curuser_id:UserID\n                })\n            })\n            .then(r => r.text())\n            .then(resp => {\n                console.log(\"Mail response:\", resp);\n                if (resp.includes(\"success\")) {\n                    <!--alert(\"Your Price Request is submitted.\");-->\n                } else {\n                    <!--alert(\"Failed to send request. Please try again.\", false);-->\n                }\n            })\n            .catch(err => {\n                console.error(\"Error:\", err);\n           <!--\/\/     alert(\"Failed to send request. Please try again.\", false);-->\n            });\n           btn.disabled= false;\n\n     }\n     \n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const form = document.getElementById(\"mySearchForm\");\n        const resultsBox = document.getElementById(\"search-results\");\n    \n        form.addEventListener(\"submit\", function(e) {\n            e.preventDefault();\n            let query = this.query.value;\n\n            document.getElementById(\"loading\").style.display = \"block\";\n\n            resultsBox.innerHTML = \"\";\n\n            let sparepartHTML =\"\";\n            \n            function renderSpareParts(spareParts) {\n              if (!spareParts || spareParts.length === 0) return \"\";\n            \n              let html = \"\";\n              spareParts.forEach(part => {\n                const nameObj = part.BnrShortText?.find(t => t.Language === \"en\");\n                const materialObj = part.MaterialShortText?.find(t => t.Language === \"en\");\n                const name = nameObj ? nameObj.Text : \"\";\n                const material = materialObj ? materialObj.Text : \"\";\n            \n                html += `\n                  <div class=\"spare-part\">\n                    <div class=\"pos-circle\">${part.Pos || \"\"}<\/div>\n                    <div class=\"part-details\">\n                      <div class=\"part-name\">${name}<\/div>\n                      <div class=\"part-material\">${part.IamNumber} &nbsp;&nbsp; ${material}<\/div>\n                      ${part.SparePartInformation?.SpareParts \n                        ? `<div class=\"children\">${renderSpareParts(part.SparePartInformation.SpareParts)}<\/div>`\n                        : \"\"}\n                    <\/div>\n                  <\/div>\n                `;\n              });\n            \n              return html;\n            }\n\n            fetch(\"https:\/\/vijayhydrotech.com\/staging\/smg\/getproddata.php?prod=\" + encodeURIComponent(query))\n                 .then(r => r.json())\n                 .then(data => {\n                 \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n \n                \/\/ Extract info\n                const iam      = data.IamNumber ?? \"\";\n                <!--console.log(\"IamNumber raw:\", data.IamNumber, \"processed iam:\", iam);-->\n                let html=\"\";\n                let propertiesHTML =\"\";\n                let resourcesHTML = \"\";\n                sparepartHTML =\"\";\n                if (iam !== \"\") {   \n                    <!--console.log(\"\u2705 iam has value:\", iam);-->\n                \n                    const title    = data.BnrShortText?.[0]?.Text ?? \"\";\n                    const material = data.MaterialShortText?.[0]?.Text ?? \"\";\n                    const shortdescription = data.ShortDescription?.[0]?.Text.replace(\/\"\/g, \"\") ?? \"\"  ;\n                    const image    = data.ImageBase64 ??\"\";\n                    const instdrawimg = data.InstallationDrawing ??\"\";\n\n                    props    = data.Properties ?? [];\n                    if (Array.isArray(props) && props.length > 0) {\n                         props    = data.MultiLocaleProperties.find(t => t.Language === \"en\").Properties ?? [];\n                    }\n                    \n                    const currentuserid = 0;\n\n                    \/\/ Split properties\n                    <!--const physicalKeys = [\"Max. flow\",\"Nominal size\",\"Max. intermittent pressure\",\"Maximum rotational speed\",\"Weight\"];-->\n                    <!--const physical = props.filter(p => physicalKeys.includes(p.Name));-->\n                    <!--const other    = props.filter(p => !physicalKeys.includes(p.Name));-->\n                    \n                    \/\/ Build Properties HTML\n                    propertiesHTML = `\n                      <div style=\"display:flex;gap:40px;\">\n                        <div style=\"flex:1\">\n                          <h4>Physical Size and Weight<\/h4>\n                          <table style=\"border-collapse:collapse;width:100%;margin-top:10px;\">\n                    `;\n                \n                    props.forEach(p => {\n                      if (p.Value.kind == \"physical\") {\n                        let val = `${p.Value.Value} ${p.Value.Unit}`;\n                        propertiesHTML += `\n                          <tr>\n                            <td style=\"border:1px solid #ccc;padding:5px;\">${p.Name}<\/td>\n                            <td style=\"border:1px solid #ccc;padding:5px;\">${val}<\/td>\n                          <\/tr>`;\n                      }\n                    });\n                \n                    <!--physical.forEach(p => {-->\n                    <!--  let val = p.Value.kind === \"physical\" ? `${p.Value.Value} ${p.Value.Unit}` : p.Value.Value;-->\n                    <!--  propertiesHTML += `<tr><td style=\"border:1px solid #ccc;padding:8px;\">${p.Name}<\/td><td style=\"border:1px solid #ccc;padding:8px;\">${val}<\/td><\/tr>`;-->\n                    <!--});-->\n                    propertiesHTML += `\n                          <\/table>\n                        <\/div>\n                    `;\n                \n                    isOther=false;\n                \n                    props.forEach(p => {\n                      if (p.Value.kind != \"physical\") {\n                \n                        if (!isOther) {\n                            isOther=true;\n                            propertiesHTML += `\n                                <div style=\"flex:1\">\n                                  <h4>Other Properties<\/h4>\n                                  <table style=\"border-collapse:collapse;width:100%;margin-top:10px;\">\n                            `;\n                        }\n                \n                        propertiesHTML += `\n                          <tr>\n                            <td style=\"border:1px solid #ccc;padding:5px;\">${p.Name}<\/td>\n                            <td style=\"border:1px solid #ccc;padding:5px;\">${p.Value.Value}<\/td>\n                          <\/tr>`;\n                      }\n                    });\n                    \n                    <!--other.forEach(p => {-->\n                    <!--  propertiesHTML += `<tr><td style=\"border:1px solid #ccc;padding:8px;\">${p.Name}<\/td><td style=\"border:1px solid #ccc;padding:8px;\">${p.Value.Value}<\/td><\/tr>`;-->\n                    <!--});-->\n                    if (isOther) {\n                        propertiesHTML += `<\/table><\/div>`;\n                    }\n                    propertiesHTML += `<\/div>`;\n                    <!--\/\/ Info tab-->\n                    <!--let infoHTML = `-->\n                    <!--  <h4>Product Info<\/h4>-->\n                    <!--  <p><strong>Material:<\/strong> ${material}<\/p>-->\n                    <!--  <p><strong>IAM Number:<\/strong> ${iam}<\/p>-->\n                    <!--`;-->\n                \n                    <!--\/\/ Resources tab]-->\n                    resourcesHTML =  \"\";\n                    const datasheet = data.Resources.find(r => r.ResourceType === \"DataSheet\");\n                    \n                    if (datasheet) {\n                        resourcesHTML = `\n                              <h4>Resources<\/h4>\n                              <table>\n                              <thead>\n                                <tr>\n                                  <th>Document type<\/th>\n                                  <th>Title<\/th>\n                                  <th>Download<\/th>\n                                <\/tr>\n                              <\/thead>\n                            `;\n                    \n                       const english = datasheet.LocalizedResources.find(r => r.Language === \"en\");\n                       \n                       if (english) {\n                    \n                           resourcesHTML += `<tr>\n                              <td>${datasheet.ResourceType}<\/td>\n                              <td>${english.Title}<\/td>\n                              <td>\n                                ${data.DataSheetPdf\n                                ? `<a href=\"data:${english.FileResource.MimeType};base64,${data.DataSheetPdf}\" \n                                       download=\"${english.FileResource.FileName}\"\n                                   style=\"background:#007bff;color:#fff;padding:6px 12px;border-radius:2px;text-decoration:none;\">\n                                       \u2b07 Download\n                                   <\/a>`\n                                : `<span style=\"color:gray;\">Not available<\/span>`\n                                  }\n                              <\/td><\/tr>`;\n                       }\n                       resourcesHTML += \"<\/table>\"\n                    }  \n                    \n                    \/\/ SparePart \n                    const spareparts = data.SparePartInformation;\n                    \n                    if (spareparts) {\n                        const spareparts = data.SparePartInformation.SpareParts;\n                        <!--sparepartHTML +=`-->\n                        <!--    <div style=\"display:flex;align-items:top;margin-bottom:20px;\">-->\n                        <!--    <img decoding=\"async\" src=\"${instdrawimg ? `data:image\/jpeg;base64,${instdrawimg}` : '..\/smg\/noprodimg.png'}\" alt=\"Installation Drawing\" style=\"width:300px;margin-right:20px;\">-->\n                        <!--    <div>`;-->\n                        sparepartHTML += '<div style=\"display:flex;align-items:top;\"><div>';\n                        sparepartHTML += renderSpareParts(spareparts);\n                        sparepartHTML +=`\n                            <\/div><div>\n                            <img decoding=\"async\" src=\"${instdrawimg ? `data:image\/jpeg;base64,${instdrawimg}` : '..\/smg\/noprodimg.png'}\" alt=\"Installation Drawing\" style=\"width:400px;margin-left:20px;\">\n                            <\/div>`;\n                        <!--sparepartHTML += '<\/div><\/div>';-->\n\n                            <!--<canvas id=\"canv1\" style=\"width:200px;margin-right:20px;\"><\/canvas>-->\n                    }                     \n\n                    <!--\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/-->\n                \n                    \/\/ Build final HTML\n                    html = `\n                      <style>\n                        .tabBar { border-bottom:2px solid #ccc; display:flex; gap:20px; margin-bottom:10px; }\n                        .tabBtn { background:none; border:none; padding:10px; cursor:pointer; font-size:16px; }\n                        .tabBtn.active { font-weight:bold; border-bottom:3px solid #007bff; color:#007bff; }\n                        .tabContent { padding:10px; border:1px solid #ccc; }\n                      <\/style>\n                      <div style=\"display:flex;align-items:center;margin-bottom:20px;\">\n                        <img decoding=\"async\" src=\"${image ? `data:image\/jpeg;base64,${image}` : '..\/smg\/noprodimg.png'}\" alt=\"Product Image\" style=\"width:160px;margin-right:20px;\">\n                        <div>\n                          <h1 style=\"margin:0;font-size:24px;\">${title} &nbsp;&nbsp;&nbsp;&nbsp;\n                                                            <\/h1>\n                          <p style=\"color:#444;margin:0;\"><strong>${material}<\/strong><br>${iam}<\/p>\n                          <p style=\"color:#444;margin:0;font-size:14px\">${shortdescription}<\/p>\n                        <\/div>\n                      <\/div>\n                    `;\n                \n                    if (Array.isArray(props) && props.length > 0) {\n                         html+=  `\n                            <div>\n                            <div class=\"tabBar\">\n                              <button class=\"tabBtn active\" data-tab=\"properties\">Properties<\/button>\n                             `;\n                        if(resourcesHTML!=\"\"){\n                             html+=  `\n                                  <button class=\"tabBtn\" data-tab=\"resources\">Resources<\/button>\n                                  <!--<button class=\"tabBtn\" data-tab=\"info\">Info<\/button>-->\n                                  `;\n                        }\n                        if(sparepartHTML!=\"\"){\n                             html+=  `\n                                  <button class=\"tabBtn\" data-tab=\"spareparts\">Spare Parts<\/button>\n                                  `;\n                        }\n                        \n                         html+=  `\n                            <\/div>\n                            <div id=\"tabContent\" class=\"tabContent\">${propertiesHTML}<\/div>\n                          <\/div>`;\n                    } else {\n                         html+=  `<p style=\"color:red;font-size:14px;\">Login or Request for Access to get detailed information.<\/p>`;\n                    }\n                \n                } \n                else\n                {\n                    html=  `<p style=\"color:red;font-size:14px;\">No product found.<\/p>`;\n\n\n                }\n                document.getElementById(\"loading\").style.display = \"none\";\n                resultsBox.innerHTML = html;\n\n                 function base64ToArrayBuffer(base64) {\n                     var binaryString = window.atob(base64);\n                     var len = binaryString.length;\n                     var bytes = new Uint8Array(len);\n                     for (var i = 0; i < len; i++) {\n                         bytes[i] = binaryString.charCodeAt(i);\n                     }\n                     return bytes.buffer;\n                 }\n                \n                \/\/ Tab switching logic\n                const tabContent = document.getElementById(\"tabContent\");\n                document.querySelectorAll(\".tabBtn\").forEach(btn => {\n                  btn.addEventListener(\"click\", () => {\n                    \/\/ reset active states\n                    document.querySelectorAll(\".tabBtn\").forEach(b => b.classList.remove(\"active\"));\n                    btn.classList.add(\"active\");\n                \n                    const tab = btn.getAttribute(\"data-tab\");\n                \n                    if (tab === \"properties\") tabContent.innerHTML = propertiesHTML;\n                    if (tab === \"resources\") tabContent.innerHTML = resourcesHTML;\n                    if (tab === \"spareparts\") {\n                        tabContent.innerHTML = sparepartHTML;\n\n                         <!--var base64Data = \"\";-->\n                         <!--var buffer = base64ToArrayBuffer(base64Data);-->\n                         <!--var tiff = new Tiff({ buffer: buffer });-->\n                         <!--var canvas = document.getElementById(\"canv1\");-->\n                         <!--canvas.width = tiff.width();-->\n                         <!--canvas.height = tiff.height();-->\n                         <!--tiff.toCanvas(canvas);-->\n\n                    }\n                    \n                  });\n                });\n                \n                \n                 <!--\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/-->\n    <!--resultsBox.innerHTML = \"<pre style='background:#f9f9f9;padding:10px;border:1px solid #ddd;'>\"  -->\n    <!--                           + JSON.stringify(data, null, 2)+ \"<\/pre>\";-->\n             })\n             .catch(err => {\n                 resultsBox.innerHTML = \"<p style='color:red;'>Error: \" + err + \"<\/p>\";\n\n                 document.getElementById(\"loading\").style.display = \"none\";\n             });\n        });\n    });\n    \n    \n    \n    <\/script>\n\n    [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-427","page","type-page","status-publish","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/pages\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":125,"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/pages\/427\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/pages\/427\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/vijayhydrotech.com\/staging\/wp-json\/wp\/v2\/media?parent=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}