{"id":1587,"date":"2025-12-22T11:59:47","date_gmt":"2025-12-22T11:59:47","guid":{"rendered":"https:\/\/ukuni.org\/?page_id=1587"},"modified":"2026-07-27T17:13:20","modified_gmt":"2026-07-27T14:13:20","slug":"roadshow-booking-form","status":"publish","type":"page","link":"https:\/\/ukuni.org\/ar\/roadshow-booking-form\/","title":{"rendered":"UKuni Events \u2013 Roadshow Booking Form"},"content":{"rendered":"<section \n  class=\"inner-banner bg-[url(&#039;https:\/\/ukuni.org\/wp-content\/themes\/ukuni\/assets\/images\/inner-banner.png&#039;)] bg-cover bg-center w-[95%] md:w-[98%] m-auto rounded-3xl \" \n    >\n  <div class=\"container mx-auto px-5 md:px-10 h-[350px] flex flex-col justify-center items-center text-center\">\n    <h1 class=\"font-poppins font-semibold text-[36px] leading-[40px] sm:text-[40px] sm:leading-[48px] md:text-[48px] md:leading-[56px] lg:text-[54px] lg:leading-[64px] tracking-[0%] capitalize text-[#072440]\">\n      Roadshow Booking Form    <\/h1>\n    <!-- Breadcrumb -->\n    <nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav>  <\/div>\n<\/section>\n\n    \n    <style>\n        .roadshow-booking-form .select2-container--default .select2-selection--single {\n            background-color: #F9FAFB !important;\n            height: 46px !important;\n            padding: 10px 10px;\n            color: #000;\n            font-family: \"Rubik\", sans-serif !important;\n        }\n\n        .roadshow-booking-form .select2-container--default .select2-selection--single .select2-selection__arrow {\n            height: 45px !important;\n            padding-left: 30px;\n            font-family: \"Rubik\", sans-serif !important;\n        }\n\n        .roadshow-booking-form .select2-container {\n            width: 100% !important;\n        }\n\n        .roadshow-booking-form .container-phone {\n            direction: ltr;\n            max-width: 600px;\n            margin: 14px auto;\n            background-color: #fff;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n\n        .roadshow-booking-form form {\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        .roadshow-booking-form .form-group {\n            display: flex;\n            flex-direction: column;\n            text-align: left;\n        }\n\n        .roadshow-booking-form label {\n            margin-bottom: 5px;\n            font-weight: bold;\n        }\n\n        .roadshow-booking-form input[type=\"text\"],\n        .roadshow-booking-form input[type=\"tel\"],\n        .roadshow-booking-form input[type=\"email\"],\n        .roadshow-booking-form textarea,\n        .roadshow-booking-form select {\n            padding: 10px;\n            border: 1px solid #ced4da;\n            border-radius: 5px;\n            font-size: 16px;\n        }\n\n        .roadshow-booking-form textarea {\n            min-height: 100px;\n            resize: vertical;\n            font-family: inherit;\n        }\n\n        .roadshow-booking-form button {\n            padding: 10px;\n            background-color: #007bff;\n            color: #fff;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 16px;\n        }\n\n        .roadshow-booking-form .button-form {\n            font-family: 'Tajawal', sans-serif;\n            font-size: 15px;\n            line-height: 1;\n            letter-spacing: 0px;\n            border-radius: 5px;\n            border: 2px #cd2122 solid;\n            font-weight: bolder;\n            padding: 15px 50px;\n            background-color: #cd2122;\n            color: white;\n            transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;\n        }\n\n        .roadshow-booking-form .button-form:hover {\n            background-color: #ffffff;\n            border: 2px #cd2122 solid;\n            color: #cd2122;\n        }\n\n        .roadshow-booking-form .checkbox-inline {\n            display: block;\n            margin-bottom: 10px;\n        }\n\n        .roadshow-booking-form .checkbox-inline input[type=\"checkbox\"] {\n            margin-right: 8px;\n        }\n\n        .roadshow-booking-form .checkbox-inline label {\n            margin: 0;\n            font-weight: 400;\n            display: inline;\n        }\n\n        .roadshow-booking-form .note {\n            font-size: 13px;\n            color: #666;\n            margin-top: 5px;\n            font-style: italic;\n        }\n\n        .roadshow-booking-form .phone-wrapper {\n            display: flex;\n            gap: 10px;\n            align-items: stretch;\n        }\n\n        .roadshow-booking-form .phone-wrapper .country-select-wrapper {\n            width: 35%;\n            min-width: 150px;\n        }\n\n        .roadshow-booking-form .phone-wrapper .phone-input-wrapper {\n            flex: 1;\n        }\n\n        .roadshow-booking-form .select2-container--default .select2-selection--single .select2-selection__rendered {\n            line-height: 26px;\n            padding-left: 10px;\n        }\n\n        .roadshow-booking-form .select2-container--default .select2-selection--single .select2-selection__arrow {\n            height: 44px;\n        }\n\n        .roadshow-booking-form .select2-container--default .select2-results__option--highlighted {\n            background-color: #007bff !important;\n        }\n\n        \/* Workshop Modal Styles *\/\n        .roadshow-workshop-modal-overlay {\n            display: none;\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            background: rgba(0,0,0,0.55);\n            z-index: 99999;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .roadshow-workshop-modal-overlay.active {\n            display: flex;\n        }\n\n        .roadshow-workshop-modal {\n            background: #fff;\n            border-radius: 12px;\n            width: 90%;\n            max-width: 560px;\n            max-height: 85vh;\n            overflow-y: auto;\n            padding: 30px;\n            position: relative;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.25);\n            animation: modalSlideIn 0.25s ease;\n        }\n\n        @keyframes modalSlideIn {\n            from { transform: translateY(-30px); opacity: 0; }\n            to   { transform: translateY(0);     opacity: 1; }\n        }\n\n        .roadshow-workshop-modal .modal-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            margin-bottom: 20px;\n            padding-bottom: 15px;\n            border-bottom: 2px solid #cd2122;\n        }\n\n        .roadshow-workshop-modal .modal-title {\n            font-size: 17px;\n            font-weight: bold;\n            color: #333;\n            line-height: 1.4;\n        }\n\n        .roadshow-workshop-modal .modal-event-name {\n            font-size: 13px;\n            color: #cd2122;\n            margin-top: 4px;\n            font-weight: 600;\n        }\n\n        .roadshow-workshop-modal .modal-close {\n            background: none;\n            border: none;\n            font-size: 24px;\n            cursor: pointer;\n            color: #666;\n            line-height: 1;\n            padding: 0 0 0 15px;\n            flex-shrink: 0;\n        }\n\n        .roadshow-workshop-modal .modal-close:hover {\n            color: #cd2122;\n        }\n\n        .roadshow-workshop-modal .workshop-modal-item {\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 8px;\n            padding: 15px;\n            margin-bottom: 12px;\n        }\n\n        .roadshow-workshop-modal .workshop-modal-item label {\n            font-weight: 500;\n            margin: 0;\n            cursor: pointer;\n            padding-left: 6px;\n        }\n\n        .roadshow-workshop-modal .presenter-input {\n            margin-top: 10px;\n            margin-left: 24px;\n        }\n\n        .roadshow-workshop-modal .presenter-input label {\n            font-size: 13px;\n            font-weight: normal;\n            color: #555;\n            margin-bottom: 4px;\n        }\n\n        .roadshow-workshop-modal .presenter-input input {\n            width: 100%;\n            padding: 8px 10px;\n            border: 1px solid #ced4da;\n            border-radius: 5px;\n            font-size: 14px;\n            box-sizing: border-box;\n        }\n\n        .roadshow-workshop-modal .modal-footer {\n            margin-top: 20px;\n            text-align: right;\n        }\n\n        .roadshow-workshop-modal .btn-confirm-workshops {\n            background-color: #cd2122;\n            color: #fff;\n            border: 2px solid #cd2122;\n            padding: 10px 30px;\n            border-radius: 5px;\n            font-size: 15px;\n            font-weight: bold;\n            cursor: pointer;\n            transition: background-color 0.3s ease, color 0.3s ease;\n        }\n\n        .roadshow-workshop-modal .btn-confirm-workshops:hover {\n            background-color: #fff;\n            color: #cd2122;\n        }\n\n        \/* Workshop summary tags shown on the main form *\/\n        .roadshow-booking-form .workshop-summary {\n            margin-top: 8px;\n            display: flex;\n            flex-wrap: wrap;\n            gap: 6px;\n        }\n\n        .roadshow-booking-form .workshop-tag {\n            background: #fde8e8;\n            color: #cd2122;\n            border: 1px solid #cd2122;\n            padding: 4px 10px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n\n        .roadshow-booking-form .workshops-edit-btn {\n            margin-top: 8px;\n            background: none;\n            border: 1px solid #cd2122;\n            color: #cd2122;\n            padding: 5px 14px;\n            border-radius: 5px;\n            font-size: 13px;\n            cursor: pointer;\n            transition: background 0.2s, color 0.2s;\n        }\n\n        .roadshow-booking-form .workshops-edit-btn:hover {\n            background: #cd2122;\n            color: #fff;\n        }\n\n        .roadshow-booking-form .event-workshop-block {\n            margin-top: 10px;\n            padding: 12px 15px;\n            background: #fff8f8;\n            border: 1px solid #f5c6c6;\n            border-radius: 8px;\n        }\n\n        .roadshow-booking-form .event-workshop-block .event-label {\n            font-size: 13px;\n            font-weight: 600;\n            color: #333;\n            margin-bottom: 6px;\n        }\n\n        .roadshow-booking-form .event-workshop-block .no-workshops-note {\n            font-size: 13px;\n            color: #999;\n            font-style: italic;\n        }\n    <\/style>\n\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/select2\/4.0.13\/css\/select2.min.css\" rel=\"stylesheet\" \/>\n\n    <!-- ==================== Workshop Modal ==================== -->\n    <div class=\"roadshow-workshop-modal-overlay\" id=\"roadshow-workshop-modal-overlay\">\n        <div class=\"roadshow-workshop-modal\" id=\"roadshow-workshop-modal\">\n            <div class=\"modal-header\">\n                <div>\n                    <div class=\"modal-title\">Select Workshops<\/div>\n                    <div class=\"modal-event-name\" id=\"modal-event-label\"><\/div>\n                <\/div>\n                <button class=\"modal-close\" id=\"roadshow-modal-close\" type=\"button\">&times;<\/button>\n            <\/div>\n            <div id=\"modal-workshops-body\"><\/div>\n            <div class=\"modal-footer\">\n                <button class=\"btn-confirm-workshops\" id=\"btn-confirm-workshops\" type=\"button\">Confirm Selection<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!-- ==================== END: Workshop Modal ==================== -->\n\n    <div class=\"roadshow-booking-form\">\n        <div class=\"container-phone\">\n            <form id=\"roadshow-registration-form\" method=\"POST\">\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_institution\">University \/ Institution *<\/label>\n                    <input type=\"text\" id=\"roadshow_institution\" name=\"institution\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_contact_person\">Full Name Contact person *<\/label>\n                    <input type=\"text\" id=\"roadshow_contact_person\" name=\"contact_person\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_contact_email\">Email address *<\/label>\n                    <input type=\"email\" id=\"roadshow_contact_email\" name=\"contact_email\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_representative_name\">Representative Full Name *<\/label>\n                    <input type=\"text\" id=\"roadshow_representative_name\" name=\"representative_name\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_representative_email\">Representative email address *<\/label>\n                    <input type=\"email\" id=\"roadshow_representative_email\" name=\"representative_email\" required>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_whatsapp\">WhatsApp number (if you wish to be added to the Roadshow group)<\/label>\n                    <div class=\"phone-wrapper\">\n                        <div class=\"country-select-wrapper\">\n                            <select id=\"roadshow-country-selector\" class=\"country-selector\"><\/select>\n                        <\/div>\n                        <div class=\"phone-input-wrapper\">\n                            <input type=\"tel\" id=\"roadshow_whatsapp\" name=\"whatsapp\" placeholder=\"Enter local number only\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"note\">Optional \u2014 enter the number if you want to be added to the group. Enter local number only (example will update by country).<\/div>\n                <\/div>\n\n                <!-- ==================== Events + Workshops ==================== -->\n                <div class=\"form-group\">\n                    <label>I would like to book my institution on the following events *<\/label>\n                    <div style=\"margin-top: 10px;\" id=\"events-checkboxes-container\">\n\n                        <div class=\"checkbox-inline\" data-event-id=\"autumnSep2026\">\n                            <input type=\"checkbox\" id=\"roadshow_event1\" name=\"events\" value=\"Autumn RoadShow - 12 to 17 September (Physical \/ Hybrid)\">\n                            <label for=\"roadshow_event1\">Autumn RoadShow \u2014 12 to 17 September (Physical \/ Hybrid)<\/label>\n                        <\/div>\n                        <div id=\"workshops-summary-autumnSep2026\" class=\"event-workshop-block\" style=\"display:none;\">\n                            <div class=\"event-label\">Workshops selected for Autumn RoadShow (September):<\/div>\n                            <div class=\"workshop-summary\" id=\"workshop-tags-autumnSep2026\"><\/div>\n                            <button type=\"button\" class=\"workshops-edit-btn\" data-event-id=\"autumnSep2026\">\u270f\ufe0f Edit Workshops<\/button>\n                        <\/div>\n\n                        <div class=\"checkbox-inline\" data-event-id=\"autumnOct2026\" style=\"margin-top:10px;\">\n                            <input type=\"checkbox\" id=\"roadshow_event2\" name=\"events\" value=\"Autumn October RoadShow - Possible Physical Event\">\n                            <label for=\"roadshow_event2\">Autumn October RoadShow (Possible Physical Event)<\/label>\n                        <\/div>\n                        <div id=\"workshops-summary-autumnOct2026\" class=\"event-workshop-block\" style=\"display:none;\">\n                            <div class=\"event-label\">Workshops selected for Autumn October RoadShow:<\/div>\n                            <div class=\"workshop-summary\" id=\"workshop-tags-autumnOct2026\"><\/div>\n                            <button type=\"button\" class=\"workshops-edit-btn\" data-event-id=\"autumnOct2026\">\u270f\ufe0f Edit Workshops<\/button>\n                        <\/div>\n\n                        <div class=\"checkbox-inline\" data-event-id=\"winter2027\" style=\"margin-top:10px;\">\n                            <input type=\"checkbox\" id=\"roadshow_event3\" name=\"events\" value=\"Winter Roadshow 2027 24-29 Jan 2027\">\n                            <label for=\"roadshow_event3\">Winter Roadshow 2027 (24\u201329 Jan 2027)<\/label>\n                        <\/div>\n                        <div id=\"workshops-summary-winter2027\" class=\"event-workshop-block\" style=\"display:none;\">\n                            <div class=\"event-label\">Workshops selected for Winter Roadshow 2027:<\/div>\n                            <div class=\"workshop-summary\" id=\"workshop-tags-winter2027\"><\/div>\n                            <button type=\"button\" class=\"workshops-edit-btn\" data-event-id=\"winter2027\">\u270f\ufe0f Edit Workshops<\/button>\n                        <\/div>\n\n                        <div class=\"checkbox-inline\" data-event-id=\"spring2027\" style=\"margin-top:10px;\">\n                            <input type=\"checkbox\" id=\"roadshow_event4\" name=\"events\" value=\"Spring Roadshow 2027 11-16 Apr 2027\">\n                            <label for=\"roadshow_event4\">Spring Roadshow 2027 (11\u201316 Apr 2027)<\/label>\n                        <\/div>\n                        <div id=\"workshops-summary-spring2027\" class=\"event-workshop-block\" style=\"display:none;\">\n                            <div class=\"event-label\">Workshops selected for Spring Roadshow 2027:<\/div>\n                            <div class=\"workshop-summary\" id=\"workshop-tags-spring2027\"><\/div>\n                            <button type=\"button\" class=\"workshops-edit-btn\" data-event-id=\"spring2027\">\u270f\ufe0f Edit Workshops<\/button>\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n                <!-- ==================== END: Events + Workshops ==================== -->\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_other_event\">Other \u2014 specify<\/label>\n                    <input type=\"text\" id=\"roadshow_other_event\" name=\"other_event\" placeholder=\"If you want to request a different date\/location, write it here\">\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_comments\">Comments<\/label>\n                    <textarea id=\"roadshow_comments\" name=\"comments\" placeholder=\"Any additional notes or requirements\"><\/textarea>\n                <\/div>\n\n                <div class=\"form-group\">\n                    <label for=\"roadshow_cancellation_policy\">I agree to the following Cancellation policy *<\/label>\n                    <div class=\"checkbox-inline\">\n                        <input type=\"checkbox\" id=\"roadshow_cancellation_policy\" name=\"cancellation_policy\" required>\n                        <label for=\"roadshow_cancellation_policy\">\n                            No charge, if cancelled eight weeks before the event date. 50% if cancelled less than eight weeks. Full fees if cancelled less than four weeks of the event.\n                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- hidden source -->\n                <div style=\"display: none;\">\n                    <select id=\"roadshow_source\" name=\"source\">\n                        <option value=\"\">Select<\/option>\n                        <option value=\"Email\">Email<\/option>\n                        <option value=\"WhatsApp\">WhatsApp<\/option>\n                        <option value=\"Instagram\">Instagram<\/option>\n                        <option value=\"Google\">Google<\/option>\n                        <option value=\"School Counsellor\">School Counsellor<\/option>\n                        <option value=\"Facebook\">Facebook<\/option>\n                        <option value=\"Twitter\">Twitter<\/option>\n                        <option value=\"Snapchat\">Snapchat<\/option>\n                        <option value=\"Tiktok\">Tiktok<\/option>\n                        <option value=\"Other\">Other<\/option>\n                    <\/select>\n                <\/div>\n\n                <button class=\"button-form\" type=\"submit\">Submit<\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/select2\/4.0.13\/js\/select2.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/libphonenumber-js@1.10.51\/bundle\/libphonenumber-min.js\"><\/script>\n\n    <script>\n    (function() {\n        if (typeof window.roadshowFormInitialized !== 'undefined') return;\n        window.roadshowFormInitialized = true;\n\n        \/\/ ==================== Workshop Data per Event ====================\n        var WORKSHOPS = {\n            autumnSep2026: {\n                label: 'Autumn RoadShow \u2014 12 to 17 September (Physical \/ Hybrid)',\n                workshops: [\n                    { id: 'w_ai_cs',       title: 'AI \/ Computer Science & Engineering' },\n                    { id: 'w_vision2030',  title: 'Vision 2030 Subjects'                },\n                    { id: 'w_medicine',    title: 'Studying Medicine Abroad'            },\n                    { id: 'w_scholarships',title: 'Scholarships and Funding'            }\n                ]\n            },\n            autumnOct2026: {\n                label: 'Autumn October RoadShow (Possible Physical Event)',\n                workshops: [\n                    { id: 'w_ai_cs',       title: 'AI \/ Computer Science & Engineering' },\n                    { id: 'w_vision2030',  title: 'Vision 2030 Subjects'                },\n                    { id: 'w_medicine',    title: 'Studying Medicine Abroad'            },\n                    { id: 'w_scholarships',title: 'Scholarships and Funding'            }\n                ]\n            },\n            winter2027: {\n                label: 'Winter Roadshow 2027 (24\u201329 Jan 2027)',\n                workshops: [\n                    { id: 'w_ai_cs',       title: 'AI \/ Computer Science & Engineering' },\n                    { id: 'w_vision2030',  title: 'Vision 2030 Subjects'                },\n                    { id: 'w_medicine',    title: 'Studying Medicine Abroad'            },\n                    { id: 'w_scholarships',title: 'Scholarships and Funding'            }\n                ]\n            },\n            spring2027: {\n                label: 'Spring Roadshow 2027 (11\u201316 Apr 2027)',\n                workshops: [\n                    { id: 'w_ai_cs',       title: 'AI \/ Computer Science & Engineering' },\n                    { id: 'w_vision2030',  title: 'Vision 2030 Subjects'                },\n                    { id: 'w_medicine',    title: 'Studying Medicine Abroad'            },\n                    { id: 'w_scholarships',title: 'Scholarships and Funding'            }\n                ]\n            }\n        };\n\n        \/\/ Store selected workshops + presenters per event\n        \/\/ { autumnSep2026: [ { id, title, presenter } ], ... }\n        var selectedWorkshops = { autumnSep2026: [], autumnOct2026: [], winter2027: [], spring2027: [] };\n        var currentModalEventId = null;\n\n        document.addEventListener('DOMContentLoaded', function() {\n\n\t\t\tvar customSwalStyle = document.createElement('style');\ncustomSwalStyle.innerHTML = '.swal2-icon.swal2-success{border-color:#072440!important}.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(7,36,64,.3)!important}.swal2-icon.swal2-success [class^=\"swal2-success-line\"]{background-color:#072440!important}';\ndocument.head.appendChild(customSwalStyle);\n            \/\/ ==================== Phone \/ Country ====================\n            var countries = [\n                { code: 'SA', name: 'Saudi Arabia',        flag: '\ud83c\uddf8\ud83c\udde6', dialCode: '+966', example: '501234567'   },\n                { code: 'AE', name: 'United Arab Emirates',flag: '\ud83c\udde6\ud83c\uddea', dialCode: '+971', example: '501234567'   },\n                { code: 'EG', name: 'Egypt',               flag: '\ud83c\uddea\ud83c\uddec', dialCode: '+20',  example: '1001234567'  },\n                { code: 'KW', name: 'Kuwait',              flag: '\ud83c\uddf0\ud83c\uddfc', dialCode: '+965', example: '99887766'    },\n                { code: 'QA', name: 'Qatar',               flag: '\ud83c\uddf6\ud83c\udde6', dialCode: '+974', example: '33123456'    },\n                { code: 'OM', name: 'Oman',                flag: '\ud83c\uddf4\ud83c\uddf2', dialCode: '+968', example: '92123456'    },\n                { code: 'BH', name: 'Bahrain',             flag: '\ud83c\udde7\ud83c\udded', dialCode: '+973', example: '33001122'    },\n                { code: 'JO', name: 'Jordan',              flag: '\ud83c\uddef\ud83c\uddf4', dialCode: '+962', example: '791234567'   },\n                { code: 'IQ', name: 'Iraq',                flag: '\ud83c\uddee\ud83c\uddf6', dialCode: '+964', example: '7901234567'  },\n                { code: 'YE', name: 'Yemen',               flag: '\ud83c\uddfe\ud83c\uddea', dialCode: '+967', example: '712345678'   },\n                { code: 'LB', name: 'Lebanon',             flag: '\ud83c\uddf1\ud83c\udde7', dialCode: '+961', example: '71234567'    },\n                { code: 'PS', name: 'Palestine',           flag: '\ud83c\uddf5\ud83c\uddf8', dialCode: '+970', example: '599123456'   },\n                { code: 'MA', name: 'Morocco',             flag: '\ud83c\uddf2\ud83c\udde6', dialCode: '+212', example: '612345678'   },\n                { code: 'TR', name: 'Turkey',              flag: '\ud83c\uddf9\ud83c\uddf7', dialCode: '+90',  example: '5301234567'  },\n                { code: 'PK', name: 'Pakistan',            flag: '\ud83c\uddf5\ud83c\uddf0', dialCode: '+92',  example: '3001234567'  },\n                { code: 'IN', name: 'India',               flag: '\ud83c\uddee\ud83c\uddf3', dialCode: '+91',  example: '9876543210'  },\n                { code: 'US', name: 'United States',       flag: '\ud83c\uddfa\ud83c\uddf8', dialCode: '+1',   example: '2025551234'  },\n                { code: 'GB', name: 'United Kingdom',      flag: '\ud83c\uddec\ud83c\udde7', dialCode: '+44',  example: '7400123456'  },\n                { code: 'FR', name: 'France',              flag: '\ud83c\uddeb\ud83c\uddf7', dialCode: '+33',  example: '612345678'   },\n                { code: 'DE', name: 'Germany',             flag: '\ud83c\udde9\ud83c\uddea', dialCode: '+49',  example: '15123456789' },\n                { code: 'CA', name: 'Canada',              flag: '\ud83c\udde8\ud83c\udde6', dialCode: '+1',   example: '4165551234'  },\n                { code: 'AU', name: 'Australia',           flag: '\ud83c\udde6\ud83c\uddfa', dialCode: '+61',  example: '412345678'   }\n            ];\n\n            var countrySelect = document.getElementById('roadshow-country-selector');\n            countrySelect.innerHTML = '';\n            countries.forEach(function(c) {\n                var opt = document.createElement('option');\n                opt.value = c.code;\n                opt.textContent = c.flag + ' ' + c.dialCode;\n                opt.setAttribute('data-dial-code', c.dialCode);\n                opt.setAttribute('data-example', c.example);\n                opt.setAttribute('data-country-name', c.name);\n                if (c.code === 'GB') opt.selected = true;\n                countrySelect.appendChild(opt);\n            });\n\n            var phoneField = document.getElementById('roadshow_whatsapp');\n            function setExample() {\n                var sel = countrySelect.options[countrySelect.selectedIndex];\n                phoneField.placeholder = sel ? 'Example: ' + sel.getAttribute('data-example') : 'Example: 501234567';\n            }\n            setExample();\n            countrySelect.addEventListener('change', setExample);\n\n            jQuery(document).ready(function($) {\n                $('#roadshow-country-selector').select2({\n                    placeholder: \"Select country\",\n                    width: '100%',\n                    allowClear: false,\n                    matcher: function(params, data) {\n                        if ($.trim(params.term) === '') return data;\n                        var term = params.term.toLowerCase();\n                        var text = data.text.toLowerCase();\n                        var cname = data.element ? (data.element.getAttribute('data-country-name') || '').toLowerCase() : '';\n                        return (text.indexOf(term) > -1 || cname.indexOf(term) > -1) ? data : null;\n                    }\n                }).on('select2:select', setExample);\n\n                if ($('#roadshow_source').length) {\n                    $('#roadshow_source').select2({ width: '100%' });\n                }\n\n                \/\/ Source from URL param\n                var sourceParam = (function() {\n                    var name = 'source', url = window.location.href;\n                    name = name.replace(\/[\\[\\]]\/g, '\\\\$&');\n                    var r = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)').exec(url);\n                    return r && r[2] ? decodeURIComponent(r[2].replace(\/\\+\/g, ' ')) : null;\n                })();\n\n                if (sourceParam) {\n                    var $src = $('#roadshow_source');\n                    var $opt = $src.find('option').filter(function() {\n                        return $(this).val().toLowerCase() === sourceParam.toLowerCase();\n                    });\n                    if ($opt.length) {\n                        $opt.prop('selected', true);\n                        $src.trigger('change').prop('disabled', true);\n                    }\n                }\n            });\n\n            \/\/ ==================== Event Checkbox \u2192 Open Modal ====================\n            document.querySelectorAll('input[name=\"events\"]').forEach(function(cb) {\n                cb.addEventListener('change', function() {\n                    var wrap = cb.closest('[data-event-id]');\n                    var eventId = wrap ? wrap.getAttribute('data-event-id') : null;\n                    if (!eventId || !WORKSHOPS[eventId]) return; \/\/ safety guard: skip if the event has no workshops defined\n\n                    if (cb.checked) {\n                        openWorkshopModal(eventId);\n                    } else {\n                        \/\/ Uncheck: clear summary\n                        selectedWorkshops[eventId] = [];\n                        renderSummary(eventId);\n                        document.getElementById('workshops-summary-' + eventId).style.display = 'none';\n                    }\n                });\n            });\n\n            \/\/ Edit workshops button\n            document.querySelectorAll('.workshops-edit-btn').forEach(function(btn) {\n                btn.addEventListener('click', function() {\n                    openWorkshopModal(btn.getAttribute('data-event-id'));\n                });\n            });\n\n            \/\/ Close modal (X button)\n            document.getElementById('roadshow-modal-close').addEventListener('click', function() {\n                if (currentModalEventId) {\n                    collectModalSelections(currentModalEventId);\n                    renderSummary(currentModalEventId);\n                }\n                closeModal();\n            });\n\n            document.getElementById('roadshow-workshop-modal-overlay').addEventListener('click', function(e) {\n                if (e.target === this) {\n                    if (currentModalEventId) {\n                        collectModalSelections(currentModalEventId);\n                        renderSummary(currentModalEventId);\n                    }\n                    closeModal();\n                }\n            });\n\n            \/\/ Confirm button\n            document.getElementById('btn-confirm-workshops').addEventListener('click', function() {\n                if (!currentModalEventId) return;\n                collectModalSelections(currentModalEventId);\n                renderSummary(currentModalEventId);\n                closeModal();\n            });\n\n            \/\/ ==================== Modal Functions ====================\n            function openWorkshopModal(eventId) {\n                currentModalEventId = eventId;\n                var eventData = WORKSHOPS[eventId];\n                if (!eventData) return;\n\n                document.getElementById('modal-event-label').textContent = eventData.label;\n                var body = document.getElementById('modal-workshops-body');\n                body.innerHTML = '';\n\n                eventData.workshops.forEach(function(w) {\n                    var existing = selectedWorkshops[eventId].find(function(s) { return s.id === w.id; });\n                    var isChecked = !!existing;\n                    var presenterVal = existing ? (existing.presenter || '') : '';\n\n                    var item = document.createElement('div');\n                    item.className = 'workshop-modal-item';\n                    item.innerHTML =\n                        '<div class=\"checkbox-inline\">' +\n                            '<input type=\"checkbox\" id=\"modal_' + w.id + '\" data-workshop-id=\"' + w.id + '\" ' +\n                                (isChecked ? 'checked' : '') + '>' +\n                            '<label for=\"modal_' + w.id + '\">' + w.title + '<\/label>' +\n                        '<\/div>' +\n                        '<div class=\"presenter-input\" id=\"presenter-wrap-' + w.id + '\" style=\"display:' + (isChecked ? 'block' : 'none') + ';\">' +\n                            '<label>Name of Presenter:<\/label>' +\n                            '<input type=\"text\" id=\"presenter_modal_' + w.id + '\" placeholder=\"Enter presenter name\" value=\"' + presenterVal + '\">' +\n                        '<\/div>';\n\n                    body.appendChild(item);\n\n                    var chk = item.querySelector('#modal_' + w.id);\n                    var pWrap = item.querySelector('#presenter-wrap-' + w.id);\n                    chk.addEventListener('change', function() {\n                        pWrap.style.display = this.checked ? 'block' : 'none';\n                    });\n                });\n\n                document.getElementById('roadshow-workshop-modal-overlay').classList.add('active');\n                document.body.style.overflow = 'hidden';\n            }\n\n            function closeModal() {\n                document.getElementById('roadshow-workshop-modal-overlay').classList.remove('active');\n                document.body.style.overflow = '';\n                currentModalEventId = null;\n            }\n\n            function collectModalSelections(eventId) {\n                var eventData = WORKSHOPS[eventId];\n                if (!eventData) return;\n                var result = [];\n                eventData.workshops.forEach(function(w) {\n                    var chk = document.getElementById('modal_' + w.id);\n                    if (chk && chk.checked) {\n                        var pInput = document.getElementById('presenter_modal_' + w.id);\n                        result.push({\n                            id:        w.id,\n                            title:     w.title,\n                            presenter: pInput ? pInput.value.trim() : ''\n                        });\n                    }\n                });\n                selectedWorkshops[eventId] = result;\n            }\n\n            function renderSummary(eventId) {\n                var summaryBlock = document.getElementById('workshops-summary-' + eventId);\n                var tagsContainer = document.getElementById('workshop-tags-' + eventId);\n                if (!summaryBlock || !tagsContainer) return;\n                var sel = selectedWorkshops[eventId] || [];\n\n                tagsContainer.innerHTML = '';\n                if (sel.length === 0) {\n                    tagsContainer.innerHTML = '<span class=\"no-workshops-note\">No workshops selected yet.<\/span>';\n                } else {\n                    sel.forEach(function(s) {\n                        var tag = document.createElement('span');\n                        tag.className = 'workshop-tag';\n                        tag.textContent = s.title + (s.presenter ? ' (' + s.presenter + ')' : '');\n                        tagsContainer.appendChild(tag);\n                    });\n                }\n                summaryBlock.style.display = 'block';\n            }\n\n            \/\/ ==================== Form Submission ====================\n            var formEl = document.getElementById('roadshow-registration-form');\n            formEl.addEventListener('submit', async function(event) {\n                event.preventDefault();\n                var submitButton = formEl.querySelector('.button-form');\n                var originalText = submitButton.textContent;\n                submitButton.disabled = true;\n                submitButton.textContent = 'Loading...';\n\n                try {\n                    \/\/ \u0627\u0644\u0640 events \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 \u0645\u0639 \u0627\u0644\u0640 ID \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0628\u062a\u0627\u0639\u0647\u0627 (\u0639\u0634\u0627\u0646 \u0646\u0637\u0627\u0628\u0642 \u0627\u0644\u0640 workshops)\n                    var eventCheckboxes = document.querySelectorAll('input[name=\"events\"]:checked');\n                    var selectedEventList = Array.from(eventCheckboxes).map(function(cb) {\n                        var wrap = cb.closest('[data-event-id]');\n                        return {\n                            eventId:    wrap ? wrap.getAttribute('data-event-id') : null,\n                            eventValue: cb.value\n                        };\n                    });\n\n                    if (selectedEventList.length === 0) {\n                        Swal.fire({ icon: 'error', title: 'Required Field', text: 'Please select at least one event.', confirmButtonColor: '#cd2122' });\n                        submitButton.disabled = false;\n                        submitButton.textContent = originalText;\n                        return;\n                    }\n\n                    \/\/ ---- \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0631\u0642\u0645 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628 ----\n                    var rawWhatsApp = (document.getElementById('roadshow_whatsapp').value || '').trim();\n                    var whatsNumber = '';\n                    if (rawWhatsApp) {\n                        var countrySelector = document.getElementById('roadshow-country-selector');\n                        var countryCode = countrySelector.value;\n                        var validated = null;\n                        try {\n                            var parsed = libphonenumber.parsePhoneNumberFromString(rawWhatsApp, countryCode);\n                            if (parsed && parsed.isValid()) {\n                                validated = parsed.format('E.164');\n                            } else {\n                                var selOpt = countrySelector.options[countrySelector.selectedIndex];\n                                var dialCode = selOpt ? selOpt.getAttribute('data-dial-code') : '';\n                                var clean = rawWhatsApp.replace(\/^0+\/, '').replace(\/\\D\/g, '');\n                                var fullNum = dialCode + clean;\n                                parsed = libphonenumber.parsePhoneNumberFromString(fullNum);\n                                if (parsed && parsed.isValid()) validated = parsed.format('E.164');\n                            }\n                        } catch(e) { console.warn(e); }\n\n                        if (!validated) {\n                            var sOpt = countrySelector.options[countrySelector.selectedIndex];\n                            Swal.fire({\n                                icon: 'error', title: 'Invalid Phone Number',\n                                html: '<p>Enter the <b>local number only<\/b> \u2014 do <b>not<\/b> type the country code <b>' + (sOpt ? sOpt.getAttribute('data-dial-code') : '') + '<\/b>.<\/p><p>Example: <code>' + (sOpt ? sOpt.getAttribute('data-example') : '') + '<\/code><\/p>',\n                                confirmButtonColor: '#cd2122'\n                            });\n                            submitButton.disabled = false;\n                            submitButton.textContent = originalText;\n                            return;\n                        }\n                        whatsNumber = validated.replace(\/\\s\/g, '');\n                    }\n\n                    \/\/ ---- \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0634\u062a\u0631\u0643\u0629 (\u0647\u062a\u062a\u0643\u0631\u0631 \u0641\u064a \u0643\u0644 row) ----\n                    var sharedData = {\n                        institution:          document.getElementById('roadshow_institution').value,\n                        contact_person:       document.getElementById('roadshow_contact_person').value,\n                        contact_email:        document.getElementById('roadshow_contact_email').value,\n                        representative_name:  document.getElementById('roadshow_representative_name').value,\n                        representative_email: document.getElementById('roadshow_representative_email').value,\n                        whatsapp:             whatsNumber,\n                        other_event:          document.getElementById('roadshow_other_event').value,\n                        cancellation_agreed:  document.getElementById('roadshow_cancellation_policy').checked ? 'Yes' : 'No',\n                        comments:             document.getElementById('roadshow_comments').value,\n                        source:               jQuery('#roadshow_source').val() || ''\n                    };\n\n                    \/\/ ---- \u0646\u0628\u0639\u062a request \u0645\u0646\u0641\u0635\u0644 \u0644\u0643\u0644 event (\u0648\u0627\u062d\u062f \u0648\u0631\u0627 \u0627\u0644\u062a\u0627\u0646\u064a) ----\n                    var results = [];\n                    for (var i = 0; i < selectedEventList.length; i++) {\n                        var ev  = selectedEventList[i];\n                        var sel = (ev.eventId && selectedWorkshops[ev.eventId]) ? selectedWorkshops[ev.eventId] : [];\n                        var wList = sel.map(function(s) {\n                            return s.title + (s.presenter ? ' (' + s.presenter + ')' : ' (N\/A)');\n                        }).join(', ');\n\n                        var formData = Object.assign({}, sharedData, {\n                            selected_events:    ev.eventValue,   \/\/ event \u0648\u0627\u062d\u062f \u0628\u0633 \u0641\u064a \u0627\u0644\u0640 row \u062f\u0647\n                            selected_workshops: wList            \/\/ \u0627\u0644\u0640 workshops \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u064a\u0647 \u0641\u0642\u0637\n                        });\n\n                        console.log('\ud83d\udce4 Sending (' + (i + 1) + '\/' + selectedEventList.length + '):', formData);\n\n                        try {\n                            var resp = await fetch('https:\/\/n8n.ukuni.org\/webhook\/roadshow-booking-form', {\n                                method: 'POST',\n                                headers: { 'Accept': 'application\/json', 'Content-Type': 'application\/json' },\n                                body: JSON.stringify(formData)\n                            });\n                            var text = await resp.text();\n                            console.log('\u2705 Response (' + ev.eventValue + '):', text);\n                            var statusMatch = text.match(\/\\{(\\d+)\\}\/);\n                            var statusCode  = statusMatch ? parseInt(statusMatch[1], 10) : null;\n                            results.push({ event: ev.eventValue, ok: resp.ok, statusCode: statusCode });\n                        } catch (reqErr) {\n                            console.error('\u274c Request failed (' + ev.eventValue + '):', reqErr);\n                            results.push({ event: ev.eventValue, ok: false, statusCode: null });\n                        }\n                    }\n\n                    \/\/ ---- \u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u062a\u0627\u0626\u062c ----\n                    var created = [], already = [], failed = [];\n                    results.forEach(function(r) {\n                        if (r.statusCode === 201)      created.push(r);\n                        else if (r.statusCode === 200) already.push(r);\n                        else if (r.statusCode === 422) failed.push(r);\n                        else if (r.ok)                 created.push(r);\n                        else                           failed.push(r);\n                    });\n\n                    if (failed.length === 0 && already.length === 0) {\n                        \/\/ \u0643\u0644 \u0627\u0644\u062a\u0633\u062c\u064a\u0644\u0627\u062a \u0646\u062c\u062d\u062a \u2192 \u0646\u0641\u0633 \u0633\u0644\u0648\u0643 \u0627\u0644\u0646\u062c\u0627\u062d \u0627\u0644\u0623\u0635\u0644\u064a\nawait Swal.fire({\n    icon: 'success',\n    title: 'Success!',\n    html: `\n        Your form submission has been received successfully\n    `,\n    confirmButtonColor: '#cd2122',\n    timer: 10000,\n    timerProgressBar: true,\n    allowOutsideClick: false\n});\nwindow.location.href = 'https:\/\/ukuni.org\/';\n\t\t\t\t\t} else {\n                        var html = '';\n                        if (created.length) html += '<p style=\"margin:8px 0;\">\u2705 Registered:<br>' + created.map(function(r){ return r.event; }).join('<br>') + '<\/p>';\n                        if (already.length) html += '<p style=\"margin:8px 0;color:#b8860b;\">\u2139\ufe0f Already registered:<br>' + already.map(function(r){ return r.event; }).join('<br>') + '<\/p>';\n                        if (failed.length)  html += '<p style=\"margin:8px 0;color:#cd2122;\">\u274c Failed (please retry):<br>' + failed.map(function(r){ return r.event; }).join('<br>') + '<\/p>';\n                        Swal.fire({\n                            icon: failed.length ? 'warning' : 'info',\n                            title: 'Submission Summary',\n                            html: html,\n                            confirmButtonColor: '#cd2122'\n                        });\n                    }\n\n                } catch(error) {\n                    console.error('\u274c Error:', error);\n                    Swal.fire({ icon: 'error', title: 'An error occurred', text: 'Please try again later.', confirmButtonColor: '#cd2122' });\n                } finally {\n                    submitButton.disabled = false;\n                    submitButton.textContent = originalText;\n                }\n            });\n\n        }); \/\/ end DOMContentLoaded\n    })();\n    <\/script>\n\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-1587","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/pages\/1587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/comments?post=1587"}],"version-history":[{"count":3,"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/pages\/1587\/revisions"}],"predecessor-version":[{"id":1602,"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/pages\/1587\/revisions\/1602"}],"wp:attachment":[{"href":"https:\/\/ukuni.org\/ar\/wp-json\/wp\/v2\/media?parent=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}