{"id":3047,"date":"2023-10-28T14:03:01","date_gmt":"2023-10-28T10:03:01","guid":{"rendered":"https:\/\/meal.glamourcareclinics.com\/?page_id=3047"},"modified":"2023-11-01T17:49:23","modified_gmt":"2023-11-01T13:49:23","slug":"upload-test-results","status":"publish","type":"page","link":"https:\/\/meal.glamourcareclinics.com\/ar\/upload-test-results\/","title":{"rendered":"Upload Test Results"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3047\" class=\"elementor elementor-3047\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b9d23df elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"b9d23df\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-465f4e1\" data-id=\"465f4e1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ff08203 elementor-widget elementor-widget-image\" data-id=\"ff08203\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.11.1 - 15-02-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"164\" height=\"197\" src=\"https:\/\/meal.glamourcareclinics.com\/wp-content\/uploads\/2023\/10\/logo.jpg\" class=\"attachment-large size-large wp-image-2970\" alt=\"\" srcset=\"https:\/\/meal.glamourcareclinics.com\/wp-content\/uploads\/2023\/10\/logo.jpg 164w, https:\/\/meal.glamourcareclinics.com\/wp-content\/uploads\/2023\/10\/logo-10x12.jpg 10w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-773ee66 elementor-widget elementor-widget-shortcode\" data-id=\"773ee66\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-04fd50e\" data-id=\"04fd50e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-94ba486 elementor-widget elementor-widget-html\" data-id=\"94ba486\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\r\n\r\n\r\n    <div class=\"wrapper\">\r\n        <div class=\"box\">\r\n            <div class=\"input-bx\">\r\n                <h2 class=\"upload-area-title\">Upload Your Test Results<\/h2>\r\n                <form method=\"post\"  action=\"https:\/\/glamourcareclinics.com\/gift_vouchers\/fpdi_working\/upload_php_files\/upload.php\" enctype=\"multipart\/form-data\" onsubmit=\"return checkFiles();\" data-trp-original-action=\"https:\/\/glamourcareclinics.com\/gift_vouchers\/fpdi_working\/upload_php_files\/upload.php\">\r\n                    <div id=\"message\"><\/div>\r\n                    \r\n                   \r\n                    <input name=\"sur_rec_id\" id=\"sur_rec_id\" type=\"number\" class=\"to_hide\" required value=\"\">\r\n                 \r\n                    <label for=\"upload\" class=\"uploadlabel\" id=\"drop-area\">\r\n                           <input id=\"upload\" type=\"file\" class=\"to_hide\" accept=\".doc,.docx,.pdf\" multiple name=\"files[]\" required>\r\n                        <span><i class=\"fa fa-cloud-upload\"><\/i><\/span>\r\n                        <p>Drag and Drop or Click To Upload<\/p>\r\n                    <\/label><br>\r\n                    <button id=\"submit_files\" type=\"submit\">\u064a\u064f\u0642\u062f\u0651\u0650\u0645<\/button>\r\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\r\n            <\/div>\r\n            <div id=\"filewrapper\">\r\n                <!--<h3 class=\"uploaded\">Uploaded Documents<\/h3>-->\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <script>\r\n    function checkFiles() {\r\n    var fileInput = document.getElementById(\"upload\");\r\n    var surRecIdInput = document.getElementById(\"sur_rec_id\"); \/\/ Assuming you have an input with the id \"sur_rec_id\"\r\n\r\n    var maxFileCount = 15; \/\/ Maximum number of files\r\n    var maxFileSize = 2 * 1024 * 1024; \/\/ 2 MB (adjust to your desired limit)\r\n    \r\n     if (fileInput.files.length === 0) {\r\n        alert(\"Please select one or more files to upload.\");\r\n        return false; \/\/ Prevent form submission\r\n    }\r\n    \r\n    if (surRecIdInput.value.trim() === \"\") {\r\n        alert(\"Invalid Link\");\r\n        return false; \/\/ Prevent form submission\r\n    }\r\n    \r\n    \r\n    if (fileInput.files.length > maxFileCount) {\r\n        alert(\"You can upload a maximum of \" + maxFileCount + \" files.\");\r\n        return false; \/\/ Prevent form submission\r\n    }\r\n    \r\n    for (var i = 0; i < fileInput.files.length; i++) {\r\n        var file = fileInput.files[i];\r\n        \r\n        if (file.size > maxFileSize) {\r\n            alert(\"File size of \" + file.name + \" exceeds the allowed limit. Please select smaller files.\");\r\n            return false; \/\/ Prevent form submission\r\n        }\r\n    }\r\n    document.getElementById(\"submit_files\").textContent(\"Uploading..\")\r\n    return true; \/\/ Allow form submission\r\n}\r\n        window.addEventListener(\"load\", () => {\r\n            const input = document.getElementById(\"upload\");\r\n            const filewrapper = document.getElementById(\"filewrapper\");\r\n\r\n            input.addEventListener(\"change\", (e) => {\r\n                 document.getElementById(\"filewrapper\").innerHTML =' <h3 class=\"uploaded\">Uploaded Documents<\/h3>';\r\n                const files = e.target.files;\r\n                for (let i = 0; i < files.length; i++) {\r\n                    const fileName = files[i].name;\r\n                    const filetype = fileName.split(\".\").pop();\r\n                    \/\/ Specify the maximum number of characters you want to keep\r\n                    var maxCharacters = 30; \/\/ For example, trim to 10 characters\r\n                    \r\n                    \/\/ Trim the file name\r\n                    var trimmedFileName = fileName.length > maxCharacters ? fileName.slice(0, maxCharacters) + \"...\" : fileName;\r\n\r\n\r\n                    fileshow(trimmedFileName, filetype);\r\n                   \r\n                }\r\n            });\r\n             \r\n            const fileshow = (fileName, filetype) => {\r\n                const showfileboxElem = document.createElement(\"div\");\r\n                showfileboxElem.classList.add(\"showfilebox\");\r\n                const leftElem = document.createElement(\"div\");\r\n                leftElem.classList.add(\"left\");\r\n                const filetypeElem = document.createElement(\"span\");\r\n                filetypeElem.classList.add(\"filetype\");\r\n                filetypeElem.innerHTML = filetype;\r\n                leftElem.append(filetypeElem);\r\n                const fileTitleElem = document.createElement(\"h3\");\r\n                fileTitleElem.innerHTML = fileName;\r\n                leftElem.append(fileTitleElem);\r\n                showfileboxElem.append(leftElem);\r\n                const rightElem = document.createElement(\"div\");\r\n                rightElem.classList.add(\"right\");\r\n                showfileboxElem.append(rightElem);\r\n                const crossElem = document.createElement(\"span\");\r\n                \/\/ crossElem.innerHTML = \"&#215;\";\r\n                crossElem.innerHTML = \"&#10004;\";\r\n                rightElem.append(crossElem);\r\n                filewrapper.append(showfileboxElem);\r\n\r\n                crossElem.addEventListener(\"click\", () => {\r\n                    filewrapper.removeChild(showfileboxElem);\r\n\r\n                    \/\/ Clear the input field and rebuild it without the removed file\r\n                    clearInput(input, fileName);\r\n                });\r\n            };\r\n\r\n            function clearInput(inputElement, fileNameToRemove) {\r\n                \/\/ Create a new input element\r\n                const newInput = document.createElement(\"input\");\r\n                newInput.type = \"file\";\r\n                newInput.accept = \".doc,.docx,.pdf\";\r\n                newInput.multiple = true;\r\n                newInput.name = \"file[]\";\r\n\r\n                \/\/ Create a new FormData object\r\n                const formData = new FormData();\r\n\r\n                \/\/ Iterate through the files in the original input and add them to the FormData except the one to remove\r\n                for (const file of inputElement.files) {\r\n                    if (file.name !== fileNameToRemove) {\r\n                        formData.append(\"file[]\", file);\r\n                    }\r\n                }\r\n\r\n                \/\/ Iterate through the FormData and append the files to the new input\r\n                formData.getAll(\"file[]\").forEach(file => {\r\n                    newInput.files = new FileList([...newInput.files, file]);\r\n                });\r\n\r\n                \/\/ Replace the old input with the new one\r\n                inputElement.parentNode.replaceChild(newInput, inputElement);\r\n\r\n                \/\/ Add a change event listener to the new input\r\n                newInput.addEventListener(\"change\", (e) => {\r\n                    const files = e.target.files;\r\n                    for (let i = 0; i < files.length; i++) {\r\n                        const fileName = files[i].name;\r\n                        const filetype = fileName.split(\".\").pop();\r\n                        fileshow(fileName, filetype);\r\n                    }\r\n                });\r\n            }\r\n        });\r\n      const dropArea = document.getElementById(\"drop-area\");\r\n    const fileInput = document.getElementById(\"upload\");\r\n\r\n    dropArea.addEventListener(\"dragover\", (e) => {\r\n        e.preventDefault();\r\n        dropArea.style.backgroundColor = \"#002857\";\r\n    });\r\n\r\n    dropArea.addEventListener(\"dragleave\", () => {\r\n        dropArea.style.backgroundColor = \"#002857\";\r\n    });\r\n\r\n    dropArea.addEventListener(\"drop\", (e) => {\r\n        e.preventDefault();\r\n        dropArea.style.backgroundColor = \"#002857\";\r\n        const files = e.dataTransfer.files;\r\n        fileInput.files = files; \/\/ Set the value of the file input\r\n        handleFiles(files);\r\n        triggerChange();\r\n    });\r\n\r\n    fileInput.addEventListener(\"change\", () => {\r\n        const files = fileInput.files;\r\n        handleFiles(files);\r\n    });\r\n  function triggerChange() {\r\n        const event = new Event(\"change\", {\r\n            bubbles: true,\r\n            cancelable: true\r\n        });\r\n        fileInput.dispatchEvent(event);\r\n    }\r\n    function handleFiles(files) {\r\n        for (let i = 0; i < files.length; i++) {\r\n            const file = files[i];\r\n            console.log(\"Uploaded file: \" + file.name);\r\n            \/\/ You can do something with the file here, like uploading it to a server.\r\n        }\r\n    }\r\n    jQuery(document).ready(function() {\r\n        var $ = jQuery;\r\n        $(document).on(\"click\", \"a#submit_files\", function(e) {    });\r\n        \r\n        \r\n\r\n    \/\/ Parse the URL to get URL parameters\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    \r\n    \/\/ Check for 'success' parameter in the URL\r\n    if (urlParams.has('success')) {\r\n        const successMessage = urlParams.get('success');\r\n        $('#message').html('<h4 style=\"text-align: center; color: green; font-weight:600;\">Success: ' + successMessage + '<\/h4>');\r\n    } else if (urlParams.has('error')) {\r\n        const errorMessage = urlParams.get('error');\r\n        $('#message').html('<h4 style=\"text-align: center; color: red; font-weight:600;\">Error: ' + errorMessage + '<\/h4>');\r\n    }\r\n     else if (urlParams.has('id')) {\r\n        const id = urlParams.get('id');\r\n        $('#sur_rec_id').val(id);\r\n    }\r\n});\r\n    <\/script>\r\n\r\n\r\n\r\n\r\n<style>\r\n     .wrapper{\r\n         display: flex;\r\n         justify-content: center;\r\n         align-items: center;\r\n         padding: 15px;\r\n         width:100%;\r\n         min-height: 50vh;\r\n         \/*background: #002857;*\/\r\n         \/*background: linear-gradient(282deg,  #002857 0%, #002856 100%);*\/\r\n         font-family: helvetica;\r\n     }\r\n     .wrapper .box{\r\n         max-width: 500px;\r\n         background: #fff;\r\n         padding:30px;\r\n         width:100%;\r\n         border-radius: 5px;\r\n                  box-shadow: #0000000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;\r\n\r\n         \r\n     }\r\n     .to_hide{\r\n         display: none;\r\n     }\r\n     .upload-area-title{\r\n         text-align: center;\r\n         margin-bottom: 20px;\r\n         font-size: 20px;\r\n         font-weight:600;\r\n          \r\n     }\r\n     .uploadlabel{\r\n         width:100%;\r\n         min-height:100px;\r\n         background: #002562;\r\n         display: flex;\r\n         flex-direction: column;\r\n         justify-content: center;\r\n         align-items: center;\r\n         border: 3px dashed #c6b97f;\r\n         cursor: pointer;\r\n     }\r\n     .uploadlabel span{\r\n         font-size: 70px;\r\n         color: #fff;\r\n     }\r\n     .uploadlabel p{\r\n         color: #fff;\r\n         font-size:20px;\r\n         font-weight: 800;\r\n         \r\n     }\r\n     .uploaded{\r\n         margin:30px 0px;\r\n         font-size: 16px;\r\n         font-weight: 700;\r\n         color: #a5a5a5;\r\n     }\r\n     .showfilebox{\r\n         display: flex;\r\n         align-items: center;\r\n         justify-content: space-between;\r\n         margin:10px 0;\r\n         padding:10px 15px;\r\n         box-shadow: #0000000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;\r\n        \r\n     }\r\n     .showfilebox .left{\r\n         display: flex;\r\n         align-items: center;\r\n         flex-wrap: wrap;\r\n         gap:10px;\r\n     }\r\n     .filetype{\r\n             background: #002857;\r\n            color: #fff;\r\n            padding: 0px 6px;\r\n            font-size: 14px;\r\n            text-transform: capitalize;\r\n            font-weight: 700;\r\n            border-radius: 3px;\r\n     }\r\n     .left h3{\r\n         font-weight:600;\r\n         font-size:18px;\r\n         color: #002857;\r\n         margin: 0;\r\n         \r\n     }\r\n     .right span{\r\n         \/*background: #002857;*\/\r\n         background: green;\r\n         color: #fff;\r\n         width: 25px;\r\n         height: 25px;\r\n         font-size: 18px;\r\n         line-height: 25px;\r\n         display: inline-block;\r\n         text-align: center;\r\n         font-weight: 700;\r\n         cursor:pointer;\r\n         border-radius:50%;\r\n         \r\n         \r\n     }\r\n<\/style>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Upload Your Test Results Drag and Drop or Click To Upload SUBMIT<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","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":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-3047","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/pages\/3047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/comments?post=3047"}],"version-history":[{"count":541,"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/pages\/3047\/revisions"}],"predecessor-version":[{"id":3652,"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/pages\/3047\/revisions\/3652"}],"wp:attachment":[{"href":"https:\/\/meal.glamourcareclinics.com\/ar\/wp-json\/wp\/v2\/media?parent=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}