{"id":3886,"date":"2025-01-21T04:06:15","date_gmt":"2025-01-21T04:06:15","guid":{"rendered":"https:\/\/mpqua.upsi.edu.my\/?page_id=3886"},"modified":"2025-01-21T08:41:20","modified_gmt":"2025-01-21T08:41:20","slug":"offer-swot","status":"publish","type":"page","link":"https:\/\/mpqua.upsi.edu.my\/index.php\/offer-swot\/","title":{"rendered":"EVENT"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3886\" class=\"elementor elementor-3886\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b9fd78 e-grid e-con-boxed e-con e-parent\" data-id=\"8b9fd78\" 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-e7d7eda elementor-widget elementor-widget-html\" data-id=\"e7d7eda\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Link Swiper's CSS -->\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\n\n<div class=\"swiper-container\">\n  <div class=\"swiper-wrapper\">\n      \n    <div class=\"swiper-slide\" data-content=\"content-1\" style=\"\">\n      <!-- Tab 1 Slide -->\n        <h3 id=\"month-name\" style=\"padding-top:25px\">EVENT<\/h3>\n        <h5 id=\"month-desc\"><\/h5>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\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-a18aa2d e-flex e-con-boxed e-con e-parent\" data-id=\"a18aa2d\" 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-a085b87 elementor-widget elementor-widget-html\" data-id=\"a085b87\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Include the necessary libraries -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"><\/script>\r\n\r\n  <!-- Add custom styles for the loader -->\r\n  <style>\r\n    \/* Fullscreen dimmed background *\/\r\n    #loading-overlay {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: rgba(0, 0, 0, 0.5); \/* Dimmed effect *\/\r\n      z-index: 9998;\r\n      display: none; \/* Initially hidden *\/\r\n    }\r\n    \/* Centered spinner *\/\r\n    #loading {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      z-index: 9999;\r\n      text-align: center;\r\n    }\r\n    #loading img {\r\n      width: 100px;\r\n    }\r\n    #loading span {\r\n      font-size: 18px;\r\n      margin-top: 10px;\r\n      color: white;\r\n      display: block;\r\n    }\r\n  <\/style>\r\n  \r\n  <!-- Loading Overlay with Spinner -->\r\n  <div id=\"loading-overlay\">\r\n    <div id=\"loading\">\r\n      <img decoding=\"async\" src=\"https:\/\/i.gifer.com\/ZZ5H.gif\" alt=\"Loading...\">\r\n      <span>Loading, please wait...<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<!-- Content area below the slider -->\r\n<div id=\"content-area\">\r\n   <div class=\"eventWrapper\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    \r\n     \/\/ Show the loading overlay and spinner\r\n      $('#loading-overlay').show();\r\n\r\n    const url = 'https:\/\/script.google.com\/macros\/s\/AKfycbyzSiyDoAC1xMTk9Ul2nMYTpiiLzqPitw4x_M_LaAInxm2kzz0slGj42ugFTJqWeGsk\/exec'; \/\/ Replace with your Apps Script URL\r\n\r\n    \/\/ Fetch data from the Google Sheets API\r\n    fetch(url)\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            const contentArea = document.getElementById(\"content-area\");\r\n            const eventWrapper = contentArea.querySelector(\".eventWrapper\");\r\n\r\n            \/\/ Clear existing events (if any)\r\n            eventWrapper.innerHTML = '';\r\n\r\n            \/\/ Loop through each event and dynamically create the HTML\r\n            data.forEach(event => {\r\n                const eventDiv = document.createElement(\"div\");\r\n                eventDiv.classList.add(\"event\");\r\n\r\n                \/\/ Event Image\r\n\r\n                \/\/ Convert Google Drive link to direct link\r\n                let imageUrl = event.image || \"default-image.jpg\"; \/\/ Use a default image if missing\r\n                if (imageUrl.includes(\"drive.google.com\")) {\r\n                    const idMatch = imageUrl.match(\/id=([a-zA-Z0-9_-]+)\/); \/\/ Extract the file ID\r\n                    if (idMatch) {\r\n                        imageUrl = `https:\/\/drive.google.com\/uc?id=${idMatch[1]}`;\r\n                    }\r\n                }\r\n\r\n                const imgDiv = document.createElement(\"div\");\r\n                imgDiv.classList.add(\"event--img\");\r\n                const imgLink = document.createElement(\"a\");\r\n                imgLink.href = imageUrl || \"#\"; \/\/ Original link for the image\r\n                imgLink.classList.add(\"w-fancybox\"); \/\/ Fancybox class\r\n\r\n                const img = document.createElement(\"img\");\r\n                img.src = imageUrl; \/\/ Use the converted link\r\n                img.alt = \"Event Image\"; \/\/ Add an alt attribute for accessibility\r\n                imgLink.appendChild(img);\r\n                imgDiv.appendChild(imgLink);\r\n\r\n                \/\/ Event Date (formatted)\r\n                const dateDiv = document.createElement(\"div\");\r\n                dateDiv.classList.add(\"event--date\");\r\n\r\n                const date = new Date(event.date);\r\n                const monthNames = [\"JANUARI\", \"FEBRUARI\", \"MAC\", \"APRIL\", \"MEI\", \"JUN\", \"JULAI\", \"OGOS\", \"SEPTEMBER\", \"OKTOBER\", \"NOVEMBER\", \"DISEMBER\"];\r\n                const month = !isNaN(date.getMonth()) ? monthNames[date.getMonth()] : \"Invalid Date\";\r\n                const day = !isNaN(date.getDate()) ? date.getDate() : \"\";\r\n                const year = !isNaN(date.getFullYear()) ? date.getFullYear() : \"\";\r\n\r\n                const monthSpan = document.createElement(\"span\");\r\n                monthSpan.textContent = month;\r\n                dateDiv.appendChild(monthSpan);\r\n\r\n                const daySpan = document.createElement(\"span\");\r\n                daySpan.textContent = day;\r\n                dateDiv.appendChild(daySpan);\r\n\r\n                const yearSpan = document.createElement(\"span\");\r\n                yearSpan.textContent = year;\r\n                dateDiv.appendChild(yearSpan);\r\n                \r\n                const uniSpan = document.createElement(\"span\");\r\n                uniSpan.textContent = event.uni;\r\n                dateDiv.appendChild(uniSpan);\r\n                \r\n                \/\/ Event Content\r\n                const contentDiv = document.createElement(\"div\");\r\n                contentDiv.classList.add(\"event--content\");\r\n\r\n                const eventTitle = document.createElement(\"h2\");\r\n                const eventLink = document.createElement(\"a\");\r\n                eventLink.href = event.link || \"#\";\r\n                eventLink.textContent = event.title || \"Event Title Not Available\";\r\n                eventTitle.appendChild(eventLink);\r\n                contentDiv.appendChild(eventTitle);\r\n\r\n                const hallP = document.createElement(\"p\");\r\n                hallP.classList.add(\"event--content-hall\");\r\n                hallP.textContent = event.hall || \"Location not available\";\r\n                contentDiv.appendChild(hallP);\r\n\r\n                const contactP = document.createElement(\"p\");\r\n                contactP.classList.add(\"event--content-contact\");\r\n                contactP.textContent = \"Contact:\";\r\n                contentDiv.appendChild(contactP);\r\n\r\n                const contactList = document.createElement(\"ul\");\r\n                const contactListItem = document.createElement(\"li\");\r\n                contactListItem.style.cssText = \"font-size: 1em; margin-bottom: 10px; padding: 10px; border-radius: 5px; background-color: #f5f5f5;\";\r\n\r\n                const contactStrong = document.createElement(\"strong\");\r\n                contactStrong.textContent = event.contact || \"N\/A\";\r\n                contactListItem.appendChild(contactStrong);\r\n\r\n                if (event.phone) {\r\n                    const contactSpan = document.createElement(\"span\");\r\n                    contactSpan.style.cssText = \"font-size: 1em; color: #555;\";\r\n                    contactSpan.innerHTML = ` <br>${event.phone}`;\r\n                    contactListItem.appendChild(contactSpan);\r\n                }\r\n\r\n                contactList.appendChild(contactListItem);\r\n                contentDiv.appendChild(contactList);\r\n\r\n                \/\/ Join Button\r\n                const joinButton = document.createElement(\"a\");\r\n                joinButton.href = event.link || \"#\";\r\n                joinButton.classList.add(\"event--content-link\");\r\n                joinButton.style.cssText = \"display: inline-block; padding: 10px 20px; background-color: rgb(0 140 255); color: white; width: 150px; border-radius: 5px; text-decoration: none; margin-top: 15px;\";\r\n                joinButton.textContent = \"More Info >>\";\r\n                contentDiv.appendChild(joinButton);\r\n\r\n                \/\/ Append elements to the event wrapper\r\n                eventDiv.appendChild(imgDiv);\r\n                eventDiv.appendChild(dateDiv);\r\n                eventDiv.appendChild(contentDiv);\r\n                eventWrapper.appendChild(eventDiv);\r\n            });\r\n\r\n\r\n            \/\/ Initialize Fancybox after adding all content\r\n            $(\".w-fancybox\").fancybox();\r\n            \r\n            \/\/ Hide the loading overlay and spinner after data is loaded\r\n        $('#loading-overlay').hide();\r\n        })\r\n        .catch(error => console.error('Error fetching data: ', error));\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EVENT Loading, please wait&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3886","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/3886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/comments?post=3886"}],"version-history":[{"count":137,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/3886\/revisions"}],"predecessor-version":[{"id":4040,"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/pages\/3886\/revisions\/4040"}],"wp:attachment":[{"href":"https:\/\/mpqua.upsi.edu.my\/index.php\/wp-json\/wp\/v2\/media?parent=3886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}