{"id":14752,"date":"2023-07-25T14:01:21","date_gmt":"2023-07-25T12:01:21","guid":{"rendered":"https:\/\/ede2course.asinyo.ca\/?page_id=14752"},"modified":"2024-08-27T02:38:24","modified_gmt":"2024-08-27T00:38:24","slug":"upcoming-courses","status":"publish","type":"page","link":"https:\/\/ede2.pensivo.com\/en\/upcoming-courses\/","title":{"rendered":"Upcoming Courses"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14752\" class=\"elementor elementor-14752\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-100f502 elementor-section-height-min-height elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-items-middle exad-glass-effect-no wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no exad-sticky-section-no\" data-id=\"100f502\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\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-100 elementor-top-column elementor-element elementor-element-bf08d2b exad-glass-effect-no exad-sticky-section-no\" data-id=\"bf08d2b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fba771a exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"fba771a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20869f1 elementor-widget__width-initial wpr-advanced-text-style-animated wpr-fancy-text-typing wpr-animated-text-infinite-yes exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-wpr-advanced-text\" data-id=\"20869f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;anim_loop&quot;:&quot;yes&quot;}\" data-widget_type=\"wpr-advanced-text.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<h1 class=\"wpr-advanced-text\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t<span class=\"wpr-advanced-text-preffix\">Upcoming Courses <\/span>\n\t\t\t\n\t\t<span class=\"wpr-anim-text wpr-anim-text-type-typing wpr-anim-text-letters\" data-anim-duration=\"200,2000\" data-anim-loop=\"yes\">\n\t\t\t<span class=\"wpr-anim-text-inner\">\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\n\t\t\t\t\n\t\t<\/h1>\n\t\t\n\t\t\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\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bac751c elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no exad-sticky-section-no\" data-id=\"bac751c\" data-element_type=\"section\" data-e-type=\"section\">\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-100 elementor-top-column elementor-element elementor-element-243f29a exad-glass-effect-no exad-sticky-section-no\" data-id=\"243f29a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-44c923a exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"44c923a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta charset=\"utf-8\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n        <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\">\r\n        <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n        <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>\r\n        <style>\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            background-color: #f4f4f4;\r\n            color: #333;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .container {\r\n            width: 100%;\r\n            margin: 10px auto;\r\n            padding: 10px;\r\n        }\r\n\r\n        .course {\r\n            width: 100%;\r\n            background-color: #fff;\r\n            border: 1px solid #ddd;\r\n            margin: 10px auto;\r\n            padding: 10px;\r\n            box-sizing: border-box;\r\n            border-radius: 5px;\r\n            overflow: hidden;\r\n            transition: max-height 0.3s ease-in-out;\r\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n            padding-bottom: 0px; \/* Add this line to explicitly set the top padding *\/\r\n        }\r\n\r\n\r\n        .course-header {\r\n            background-color: #fff;\r\n            padding: 10px;\r\n            cursor: pointer;\r\n            position: relative;\r\n        }\r\n\r\n        .course-header h3 {\r\n            color: #831F43;\r\n        }\r\n\r\n        .course-body {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.3s ease-in-out;\r\n            text-align: center;\r\n\r\n        }\r\n\r\n        .course-body p {\r\n            padding: 0;\r\n            border: 1px solid #ddd;\r\n            margin: 10px;\r\n            padding: 10px;\r\n            box-sizing: border-box;\r\n            background-color: #fff; \/* Adds a white background *\/\r\n            box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), \r\n                        0px 4px 6px -2px rgba(0, 0, 0, 0.05); \/* Adds shadow effect *\/\r\n            position: relative; \/* Needed for z-index to work *\/\r\n            z-index: 1; \/* Lifts the element above its parent *\/\r\n            border-radius: 8px; \/* Makes the corners of the box rounded *\/\r\n        }\r\n\r\n        .course.active .course-body {\r\n            max-height: 1000px;\r\n        }\r\n\r\n        .toggle-icon {\r\n            position: absolute;\r\n            top: 50%;\r\n            right: 10px;\r\n            transform: translateY(-50%) rotate(-45deg);\r\n            width: 8px;\r\n            height: 8px;\r\n            border-top: 2px solid black;\r\n            border-right: 2px solid black;\r\n            transform-origin: center;\r\n            transition: transform 0.3s;\r\n            list-style: none; \/* Hide the default bullet point *\/\r\n            margin-right: 10px;\r\n        }\r\n\r\n\r\n        .link-button {\r\n            display: inline-block;\r\n            margin-top: 30px;\r\n            margin-right: 5px;\r\n            margin-bottom: 40px; \/* Add margin bottom *\/\r\n            padding: 8px 16px;\r\n            font-size: 14px;\r\n            color: #fff;\r\n            text-decoration: none;\r\n            border-radius: 5px;\r\n            transition: background-color 0.3s ease;\r\n            text-transform: uppercase; \/* This line changes the text to uppercase *\/\r\n        }\r\n\r\n\r\n\r\n        .link-button:last-child {\r\n            margin-right: 0;\r\n        }\r\n\r\n        .link-button:not(:last-child) {\r\n            margin-right: 5px; \/* Add space between buttons *\/\r\n        }\r\n\r\n        .link-button:hover {\r\n            opacity: 0.8;\r\n        }\r\n\r\n        .register-link {\r\n            background-color: #3A9DA8;\r\n            color: white !important; \/* Force the text color to be white *\/\r\n        }\r\n\r\n        .register-link:hover {\r\n            background-color: #484848;\r\n            color: white;\r\n        }\r\n\r\n        .venue-link {\r\n            background-color: #616161;\r\n\r\n        }\r\n\r\n        .venue-link:hover {\r\n            background-color: #651230;\r\n            color: white;\r\n        }\r\n\r\n        .map-link {\r\n        background-color: #831F43;   \r\n        }\r\n\r\n        .map-link:hover {\r\n            background-color: #2b787a;\r\n            color: white;\r\n        }\r\n        \r\n        .modal-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 100%; \/* Ensure the modal content takes up the full height *\/\r\n}\r\n\r\n.modal-body {\r\n    text-align: center; \/* Center the text in the modal body *\/\r\n}\r\n\r\n.modal-footer {\r\n    margin-top: auto; \/* Push the footer to the bottom *\/\r\n}\r\n\r\n.modal-title {\r\n    word-wrap: break-word; \/* Allow long words to break and wrap *\/\r\n    padding-top: 30px\r\n}\r\n\r\n.modal-dialog {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 20vh; \/* Set the height of the modal dialog to 20% of the viewport height *\/\r\n}\r\n\r\n.modal-content {\r\n    width: 35%; \/* Set the width of the modal content *\/\r\n    height: 35%; \/* Set the height of the modal content to 80% of the modal dialog height *\/\r\n}\r\n\r\n        \/* Media queries for responsiveness *\/\r\n        @media (max-width: 600px) {\r\n            .container {\r\n                width: 100%;\r\n            }\r\n\r\n            .course {\r\n                border-radius: 0;\r\n                box-shadow: none;\r\n            }\r\n\r\n            .course-header {\r\n                padding: 20px;\r\n            }\r\n\r\n            .link-button {\r\n                padding: 15px 30px;\r\n                font-size: 18px;\r\n            }\r\n            \r\n        .modal-content {\r\n        width: 70%; \/* Ajuster la largeur du contenu du modal pour les \u00e9crans plus larges *\/\r\n        height: 50%; \/* Ajuster la hauteur maximale pour les \u00e9crans plus larges *\/\r\n    }\r\n            \r\n        }\r\n        \r\n                \/* Media queries for responsiveness *\/\r\n        @media (max-height: 600px) {\r\n            .container {\r\n                width: 100%;\r\n            }\r\n\r\n            .course {\r\n                border-radius: 0;\r\n                box-shadow: none;\r\n            }\r\n\r\n            .course-header {\r\n                padding: 20px;\r\n            }\r\n\r\n            .link-button {\r\n                padding: 15px 30px;\r\n                font-size: 18px;\r\n            }\r\n            \r\n        .modal-content {\r\n        width: 70%; \/* Ajuster la largeur du contenu du modal pour les \u00e9crans plus larges *\/\r\n        height: 75%; \/* Ajuster la hauteur maximale pour les \u00e9crans plus larges *\/\r\n    }\r\n            \r\n        }\r\n\r\n\r\n        <\/style>\r\n\r\n    <\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <!-- This is where the courses will be appended -->\r\n    <\/div>\r\n<div><!-- Modal -->\r\n    <div class=\"modal fade\" id=\"registerModal\" role=\"dialog\">\r\n        <div class=\"modal-dialog modal-lg\" style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\">\r\n            <div class=\"modal-content\" style=\"width: 80%;\">\r\n                <div class=\"modal-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                    <h2 class=\"modal-title\" id=\"modalTitle\" style=\"flex: 1;\">Important !!! <\/h2>\r\n                <\/div>\r\n                <div class=\"modal-body\" style=\"text-align: center;\">\r\n                    <p id=\"modalBody\">Once you are redirected, You will need to find the event you want to register and click \"Register\" again.<\/p>\r\n                <\/div>\r\n                <div class=\"modal-footer\" style=\"display: flex; justify-content: center;\">\r\n                    <button type=\"button\" class=\"link-button venue-link\" data-dismiss=\"modal\" id=\"cancelButton\">CANCEL<\/button>\r\n                    <button type=\"button\" class=\"link-button register-link\" id=\"okButton\">OK<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n    <script>\r\n        fetch('https:\/\/apilive2.pensivo.com\/api\/v1\/p1\/Public\/upcoming', {\r\n        headers: {\r\n            'accept': '*\/*',\r\n            'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiMzE0MTIiLCJzdWIiOiIzMTQxMiIsImZpcnN0TmFtZSI6IkppbSIsImxhc3ROYW1lIjoiU3Rlcm4iLCJlbWFpbCI6Imp3ZGlja2V5NjRAZ21haWwuY29tIiwicm9sZSI6Ik1hbmFnZXIiLCJhdWQiOiJwZW5zaXZvIiwianRpIjoiY2IyZGUzM2UtNWYxMy00ZjI1LWE2OTctNmY0MzYzNjhjNjFkIiwiZXhwIjoyMDI3NzMwODY3LCJpc3MiOiJodHRwczovL3BlbnNpdm8uY29tLyJ9.je1SLPj-yQx2IinuTTqZtCpQ5vGD09PrjBIsvR37Bu4'\r\n        }\r\n        }).then(response => response.json())\r\n            .then(data => {\r\n                data.forEach(course => {\r\n                    \/\/ Check if the URL contains \"\/fr\/\"\r\n                    let title;\r\n                    const isFrenchURL = window.location.href.includes(\"\/fr\/\");\r\n                    if (course.originating_site === \"new\") {\r\n                        title = isFrenchURL ? course.title_fr : course.title_en;\r\n                    } else if  (course.originating_site === \"old\") {   \r\n                        title = isFrenchURL ? course.location_title_fr : course.location_title_en;\r\n                    }\r\n                    const date = isFrenchURL ? course.date_range_fr : course.date_range_en;\r\n                    const description = isFrenchURL ? course.description_fr : course.description_en;\r\n                    const registerText = isFrenchURL ? 'INSCRIVEZ-VOUS' : 'REGISTER';\r\n                    const venueText = isFrenchURL ? 'LIEU' : 'VENUE';\r\n                    const mapText = isFrenchURL ? 'CARTE' : 'MAP';\r\n\r\n\/\/ Update modal content based on isFrenchURL\r\nconst modalTitle = document.getElementById('modalTitle');\r\nconst modalBody = document.getElementById('modalBody');\r\nconst cancelButton = document.getElementById('cancelButton');\r\nconst okButton = document.getElementById('okButton');\r\n\r\nif (isFrenchURL) {\r\n    modalTitle.textContent = 'Important !!!';\r\n    modalBody.textContent = 'FR Once you are redirected, You will need to find the event you want to register and click \"Register\" again.';\r\n    cancelButton.textContent = 'ANNULER';\r\n    okButton.textContent = 'OK';\r\n} else {\r\n    modalTitle.textContent = 'Important !!!';\r\n    modalBody.textContent = 'Once you are redirected, You will need to find the event you want to register and click \"Register\" again.';\r\n    cancelButton.textContent = 'CANCEL';\r\n    okButton.textContent = 'OK';\r\n}\r\n\r\n                    const courseDiv = document.createElement('div');\r\n                    courseDiv.className = 'course';\r\n\r\n                    const courseHeader = document.createElement('div');\r\n                    courseHeader.className = 'course-header';\r\n                    const toggleIcon = document.createElement('span');\r\n                    toggleIcon.className = 'toggle-icon';\r\n                    courseHeader.innerHTML = `<h3>${title}<\/h3><h5>${date}<\/h5>`;\r\n\r\n                    courseHeader.appendChild(toggleIcon);\r\n\r\n                    const courseBody = document.createElement('div');\r\n                    courseBody.className = 'course-body';\r\n                    \/\/ Use the appropriate description based on the URL\r\n                    courseBody.innerHTML = `<p>${description}<\/p>`;\r\n\r\n\r\n                    if (course.register_link) {\r\n                        const registerButton = document.createElement('a');\r\n                        registerButton.className = 'link-button register-link';\r\n                        registerButton.textContent = registerText;\r\n                        courseBody.appendChild(registerButton);\r\n\r\n                        registerButton.addEventListener('click', function(event) {\r\n                            if (course.originating_site === 'old') {\r\n                                \/\/ Open the modal popup\r\n                                $('#registerModal').modal('show');\r\n                                        okButton.addEventListener('click', function() {\r\n            window.location.href = course.register_link; \/\/ Redirect to the course link\r\n        });\r\n                            } else {\r\n                                registerButton.href = course.register_link;\r\n                            }\r\n                        });\r\n                    }\r\n                    \r\n\r\n\r\n                    if (course.venue_link) {\r\n                        const venueButton = document.createElement('a');\r\n                        venueButton.href = course.venue_link;\r\n                        venueButton.className = 'link-button venue-link';\r\n                        venueButton.textContent = venueText;\r\n                        courseBody.appendChild(venueButton);\r\n                    }\r\n\r\n                    if (course.map_link) {\r\n                        const mapButton = document.createElement('a');\r\n                        mapButton.href = course.map_link;\r\n                        mapButton.className = 'link-button map-link';\r\n                        mapButton.textContent = mapText;\r\n                        courseBody.appendChild(mapButton);\r\n                    }\r\n\r\n                    courseDiv.appendChild(courseHeader);\r\n                    courseDiv.appendChild(courseBody);\r\n\r\n                    document.querySelector('.container').appendChild(courseDiv);\r\n\r\n                    courseHeader.addEventListener('click', () => {\r\n                    courseDiv.classList.toggle('active');\r\n\r\n                    if (courseDiv.classList.contains('active')) {\r\n                        courseBody.style.maxHeight = courseBody.scrollHeight + 'px';\r\n                        toggleIcon.style.transform = 'translateY(-50%) rotate(135deg)';\r\n                    } else {\r\n                        courseBody.style.maxHeight = '0';\r\n                        toggleIcon.style.transform = 'translateY(-50%) rotate(-45deg)';\r\n                    }\r\n                });\r\n\r\n            });\r\n        });\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\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\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Upcoming Courses Important !!! Once you are redirected, You will need to find the event you want to register and click &#8220;Register&#8221; again. CANCEL OK<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-14752","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/pages\/14752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/comments?post=14752"}],"version-history":[{"count":236,"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/pages\/14752\/revisions"}],"predecessor-version":[{"id":16949,"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/pages\/14752\/revisions\/16949"}],"wp:attachment":[{"href":"https:\/\/ede2.pensivo.com\/en\/wp-json\/wp\/v2\/media?parent=14752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}