{"id":221,"date":"2025-06-28T11:42:56","date_gmt":"2025-06-28T06:12:56","guid":{"rendered":"https:\/\/joreewaz.com\/?page_id=221"},"modified":"2025-06-28T11:42:56","modified_gmt":"2025-06-28T06:12:56","slug":"registration-multi","status":"publish","type":"page","link":"https:\/\/joreewaz.com\/","title":{"rendered":"registration multi"},"content":{"rendered":"

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.4″ _module_preset=”default”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.27.4″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.4″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n\r\n\r\n\r\n \r\n \r\n Event Registration<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- html2canvas for ID card generation -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n .site-header {\r\n display: none; \/* Hide WordPress header *\/\r\n }\r\n .site-footer {\r\n display: none; \/* Hide WordPress footer *\/\r\n }\r\n .bg-pattern {\r\n background-image: linear-gradient(45deg, #ffffff20 25%, transparent 25%, transparent 75%, #ffffff20 75%, #ffffff20), linear-gradient(45deg, #ffffff20 25%, transparent 25%, transparent 75%, #ffffff20 75%, #ffffff20);\r\n background-size: 20px 20px;\r\n background-position: 0 0, 10px 10px;\r\n }\r\n .message-box {\r\n display: none;\r\n padding: 12px;\r\n margin-bottom: 16px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n opacity: 0;\r\n transition: opacity 0.3s ease-in-out;\r\n }\r\n .message-box.show {\r\n opacity: 1;\r\n }\r\n .message-box.success {\r\n background-color: #d4edda;\r\n color: #155724;\r\n }\r\n .message-box.error {\r\n background-color: #f8d7da;\r\n color: #721c24;\r\n }\r\n \/* Custom CSS for input field titles *\/\r\n .input-label-title {\r\n display: block; \/* Ensure it behaves like a block element *\/\r\n font-size: 1rem; \/* Equivalent to Tailwind's text-base *\/\r\n font-weight: 700; \/* Equivalent to Tailwind's font-bold *\/\r\n color: #374151; \/* Equivalent to Tailwind's text-gray-700 *\/\r\n }\r\n \/* For team member headings, adjust slightly if needed *\/\r\n .team-member-heading {\r\n font-size: 1.125rem; \/* Equivalent to Tailwind's text-lg for subheadings *\/\r\n font-weight: 600; \/* Equivalent to font-semibold *\/\r\n color: #1f2937; \/* Equivalent to text-gray-800 *\/\r\n }\r\n\r\n \/* Styles for the loading overlay *\/\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-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n flex-direction: column;\r\n color: white;\r\n font-size: 1.2rem;\r\n text-align: center;\r\n backdrop-filter: blur(5px); \/* Optional blur effect *\/\r\n -webkit-backdrop-filter: blur(5px); \/* Safari support *\/\r\n }\r\n\r\n .loading-spinner {\r\n border: 4px solid rgba(255, 255, 255, 0.3);\r\n border-top: 4px solid #ffffff;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen bg-gray-100 p-4 flex flex-col items-center justify-center\">\r\n\r\n <!-- Loading Overlay -->\r\n <div id=\"loadingOverlay\" class=\"loading-overlay hidden\" style=\"display: none;\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <p>Registering details, please wait...<\/p>\r\n <\/div>\r\n\r\n <!-- Added mx-auto to center the app-container horizontally within its parent -->\r\n <div id=\"app-container\" class=\"w-full max-w-4xl mx-auto\">\r\n <!-- Message Box -->\r\n <div id=\"messageBox\" class=\"message-box\"><\/div>\r\n\r\n <!-- Registration Form -->\r\n <div id=\"registration-form-section\" class=\"bg-white p-8 rounded-2xl shadow-xl w-full\">\r\n <!-- Logo added here -->\r\n <img decoding=\"async\" src=\"https:\/\/joreewaz.com\/wp-content\/uploads\/2025\/06\/2342-by-1165-pixels-01-scaled.png\" alt=\"Event Logo\" class=\"mx-auto block w-64 mb-6\">\r\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">Registration<\/h1>\r\n\t\t\t<h3 class=\"font-bold text-center\">6th Women's Ethnic Wear Fest<\/h3>\r\n <h3 class=\"text-center\">22nd and 23rd July, 2025<\/h3><br>\r\n <form id=\"registrationForm\" class=\"space-y-4\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label for=\"name\" class=\"input-label-title\">Name<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"brandCompany\" class=\"input-label-title\">Brand\/Company<\/label>\r\n <input type=\"text\" id=\"brandCompany\" name=\"brandCompany\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"role\" class=\"input-label-title\">Role<\/label>\r\n <select id=\"role\" name=\"role\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <option value=\"\">Select Role<\/option>\r\n <option value=\"Buyer\">Buyer<\/option>\r\n <option value=\"Participant\">Participant<\/option>\r\n <option value=\"Team\">Team<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"gst\" class=\"input-label-title\">GST Number<\/label>\r\n <input type=\"text\" id=\"gst\" name=\"gst\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" placeholder=\"e.g., 22ABCDE1234F1Z5\" required>\r\n <p class=\"mt-1 text-xs text-gray-500\">15 alphanumeric characters (e.g., 22ABCDE1234F1Z5)<\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"email\" class=\"input-label-title\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"phoneNumber\" class=\"input-label-title\">Phone Number<\/label>\r\n <div class=\"mt-1\">\r\n <input type=\"tel\" id=\"phoneNumber\" name=\"phoneNumber\" class=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"address\" class=\"input-label-title\">Address<\/label>\r\n <textarea id=\"address\" name=\"address\" rows=\"2\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required><\/textarea>\r\n <\/div>\r\n <div>\r\n <label for=\"city\" class=\"input-label-title\">City<\/label>\r\n <input type=\"text\" id=\"city\" name=\"city\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"state\" class=\"input-label-title\">State<\/label>\r\n <select id=\"state\" name=\"state\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <option value=\"\">Select State\/UT<\/option>\r\n <!-- Options will be populated by JavaScript -->\r\n <\/select>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"photo\" class=\"input-label-title\">Photo (JPEG\/PNG, Max 4MB)<\/label>\r\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/jpeg, image\/png\" class=\"mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\" required>\r\n <img decoding=\"async\" id=\"photoPreview\" src=\"\" alt=\"Photo Preview\" class=\"mt-2 w-32 h-32 object-cover rounded-md shadow-sm hidden\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border-t-2 border-gray-400 pt-4 mt-4\"> <!-- Changed border-t to border-t-2 and border-gray-300 to border-gray-400 -->\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Team Members<\/h3>\r\n <div id=\"teamMembersContainer\">\r\n <!-- Team members will be added here by JavaScript -->\r\n <\/div>\r\n <button type=\"button\" id=\"addTeamMember\" class=\"flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors shadow-md\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n Add Team Member\r\n <\/button>\r\n <\/div>\r\n\r\n <button type=\"submit\" id=\"submitButton\" class=\"w-full py-3 mt-6 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:from-blue-700 hover:to-blue-800 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Register\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- ID Card Display Section (Initially Hidden) -->\r\n <div id=\"idCardSection\" class=\"hidden bg-white p-8 rounded-2xl shadow-xl w-full max-w-lg flex flex-col items-center mt-8\">\r\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">Your Event ID Card<\/h1>\r\n <div id=\"idCard\" class=\"relative w-80 h-52 bg-gradient-to-br from-blue-600 to-indigo-800 rounded-xl shadow-lg overflow-hidden flex flex-col justify-between p-4 text-white font-inter mb-8\">\r\n <div class=\"absolute inset-0 bg-pattern opacity-10\"><\/div>\r\n <div class=\"absolute top-2 right-4 text-xs font-semibold\">EVENT ID CARD<\/div>\r\n <div class=\"flex items-center gap-4 z-10\">\r\n <img decoding=\"async\" id=\"idCardPhoto\" src=\"\" alt=\"Participant\" class=\"w-20 h-20 rounded-full border-4 border-white object-cover shadow-md\">\r\n <div class=\"flex-1\">\r\n <h2 id=\"idCardName\" class=\"text-xl font-bold truncate\"><\/h2>\r\n <p id=\"idCardRole\" class=\"text-sm text-blue-200\"><\/p>\r\n <p id=\"idCardCompany\" class=\"text-sm font-medium\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto z-10\">\r\n <p class=\"text-xs font-light\">GST: <span id=\"idCardGST\"><\/span><\/p>\r\n <p class=\"text-xs font-light\">Email: <span id=\"idCardEmail\"><\/span><\/p>\r\n <p class=\"text-xs font-light\">Phone: <span id=\"idCardPhone\"><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"downloadIdCard\" class=\"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-lg flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414L9.586 2.586a1 1 0 011.414 0l3.293 3.293a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L6.707 6.707a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n Download ID Card (PNG)\r\n <\/button>\r\n <button id=\"backToRegistration\" class=\"px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors shadow-lg\">\r\n Register Another Participant\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const messageBox = document.getElementById('messageBox');\r\n const registrationForm = document.getElementById('registrationForm');\r\n const submitButton = document.getElementById('submitButton');\r\n const teamMembersContainer = document.getElementById('teamMembersContainer');\r\n const addTeamMemberButton = document.getElementById('addTeamMember');\r\n const photoInput = document.getElementById('photo');\r\n const photoPreview = document.getElementById('photoPreview');\r\n const stateSelect = document.getElementById('state');\r\n const idCardSection = document.getElementById('idCardSection');\r\n const registrationFormSection = document.getElementById('registration-form-section');\r\n const downloadIdCardButton = document.getElementById('downloadIdCard');\r\n const backToRegistrationButton = document.getElementById('backToRegistration');\r\n const loadingOverlay = document.getElementById('loadingOverlay'); \/\/ New loading overlay element\r\n\r\n let teamMemberCount = 0; \/\/ To keep track of dynamically added team members\r\n\r\n \/\/ Dropdown options for Indian States\/Union Territories\r\n const indianStatesAndUTs = [\r\n \"Andhra Pradesh\", \"Arunachal Pradesh\", \"Assam\", \"Bihar\", \"Chhattisgarh\",\r\n \"Goa\", \"Gujarat\", \"Haryana\", \"Himachal Pradesh\", \"Jharkhand\",\r\n \"Karnataka\", \"Kerala\", \"Madhya Pradesh\", \"Maharashtra\", \"Manipur\",\r\n \"Meghalaya\", \"Mizoram\", \"Nagaland\", \"Odisha\", \"Punjab\",\r\n \"Rajasthan\", \"Sikkim\", \"Tamil Nadu\", \"Telangana\", \"Tripura\",\r\n \"Uttar Pradesh\", \"Uttarakhand\", \"West Bengal\",\r\n \"Andaman and Nicobar Islands\", \"Chandigarh\", \"Dadra and Nagar Haveli and Daman & Diu\",\r\n \"Lakshadweep\", \"Delhi\", \"Puducherry\", \"Ladakh\", \"Jammu and Kashmir\"\r\n ].sort();\r\n\r\n \/\/ Dropdown options for Role\r\n const roleOptions = [\"Buyer\", \"Participant\", \"Team\"];\r\n\r\n \/\/ Function to display messages\r\n function showMessage(type, text) {\r\n messageBox.innerHTML = text;\r\n messageBox.className = `message-box show ${type}`;\r\n clearTimeout(messageBox.dataset.timeoutId); \/\/ Clear any existing timeout\r\n const timeoutId = setTimeout(() => {\r\n messageBox.classList.remove('show');\r\n messageBox.innerHTML = ''; \/\/ Clear message after fading\r\n }, 5000); \/\/ 5 seconds\r\n messageBox.dataset.timeoutId = timeoutId;\r\n messageBox.style.display = 'block'; \/\/ Ensure it's visible initially\r\n }\r\n\r\n \/\/ Populate Indian States\/UTs dropdown\r\n function populateStatesDropdown() {\r\n indianStatesAndUTs.forEach(state => {\r\n const option = document.createElement('option');\r\n option.value = state;\r\n option.textContent = state;\r\n stateSelect.appendChild(option);\r\n });\r\n }\r\n\r\n \/\/ Function to update the add team member button state (max 10 team members total)\r\n function updateAddTeamMemberButtonState() {\r\n if (teamMemberCount >= 10) {\r\n addTeamMemberButton.disabled = true;\r\n addTeamMemberButton.classList.add('opacity-50', 'cursor-not-allowed');\r\n } else {\r\n addTeamMemberButton.disabled = false;\r\n addTeamMemberButton.classList.remove('opacity-50', 'cursor-not-allowed');\r\n }\r\n }\r\n\r\n \/\/ Handle main participant photo preview\r\n photoInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (file) {\r\n const allowedTypes = ['image\/jpeg', 'image\/png'];\r\n const maxSize = 4 * 1024 * 1024; \/\/ 4MB\r\n\r\n if (!allowedTypes.includes(file.type)) {\r\n showMessage('error', 'Only JPEG and PNG images are allowed for main photo.');\r\n this.value = ''; \/\/ Clear input\r\n photoPreview.classList.add('hidden');\r\n return;\r\n }\r\n if (file.size > maxSize) {\r\n showMessage('error', 'Main photo size cannot exceed 4MB.');\r\n this.value = ''; \/\/ Clear input\r\n photoPreview.classList.add('hidden');\r\n return;\r\n }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n photoPreview.src = e.target.result;\r\n photoPreview.classList.remove('hidden');\r\n };\r\n reader.readAsDataURL(file);\r\n } else {\r\n photoPreview.classList.add('hidden');\r\n photoPreview.src = '';\r\n }\r\n });\r\n\r\n \/\/ Function to create a team member input group\r\n function createTeamMemberInputGroup(index) {\r\n const div = document.createElement('div');\r\n div.className = 'grid grid-cols-1 md:grid-cols-2 gap-4 border border-gray-200 rounded-md p-4 mb-4 relative';\r\n div.innerHTML = `\r\n <h4 class=\"col-span-full team-member-heading\">Team Member ${index + 1}<\/h4>\r\n <div>\r\n <label for=\"team-name-${index}\" class=\"input-label-title\">Name<\/label>\r\n <input type=\"text\" id=\"team-name-${index}\" name=\"teamMembers[${index}][name]\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"team-email-${index}\" class=\"input-label-title\">Email<\/label>\r\n <input type=\"email\" id=\"team-email-${index}\" name=\"teamMembers[${index}][email]\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"team-phoneNumber-${index}\" class=\"input-label-title\">Phone Number<\/label>\r\n <div class=\"mt-1\">\r\n <input type=\"tel\" id=\"team-phoneNumber-${index}\" name=\"teamMembers[${index}][phoneNumber]\" class=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"team-photo-${index}\" class=\"input-label-title\">Photo (JPEG\/PNG, Max 4MB)<\/label>\r\n <input type=\"file\" id=\"team-photo-${index}\" name=\"teamMembers[${index}][photo]\" accept=\"image\/jpeg, image\/png\" class=\"mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\" required>\r\n <img decoding=\"async\" id=\"team-photoPreview-${index}\" src=\"\" alt=\"Team Member Photo Preview\" class=\"mt-2 w-32 h-32 object-cover rounded-md shadow-sm hidden\">\r\n <\/div>\r\n <button type=\"button\" class=\"remove-team-member-btn absolute top-2 right-2 p-1 text-red-500 hover:text-red-700 rounded-full bg-red-100 hover:bg-red-200 transition-colors\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n <\/button>\r\n `;\r\n teamMembersContainer.appendChild(div);\r\n\r\n \/\/ Add event listener for team member photo preview\r\n const teamPhotoInput = div.querySelector(`#team-photo-${index}`);\r\n const teamPhotoPreview = div.querySelector(`#team-photoPreview-${index}`);\r\n teamPhotoInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (file) {\r\n const allowedTypes = ['image\/jpeg', 'image\/png'];\r\n const maxSize = 4 * 1024 * 1024; \/\/ 4MB\r\n\r\n if (!allowedTypes.includes(file.type)) {\r\n showMessage('error', `Team Member ${index + 1}: Only JPEG and PNG images are allowed.`);\r\n this.value = '';\r\n teamPhotoPreview.classList.add('hidden');\r\n return;\r\n }\r\n if (file.size > maxSize) {\r\n showMessage('error', `Team Member ${index + 1}: Image size cannot exceed 4MB.`);\r\n this.value = '';\r\n teamPhotoPreview.classList.add('hidden');\r\n return;\r\n }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n teamPhotoPreview.src = e.target.result;\r\n teamPhotoPreview.classList.remove('hidden');\r\n };\r\n reader.readAsDataURL(file);\r\n } else {\r\n teamPhotoPreview.classList.add('hidden');\r\n teamPhotoPreview.src = '';\r\n }\r\n });\r\n\r\n \/\/ Add event listener for remove button\r\n div.querySelector('.remove-team-member-btn').addEventListener('click', function() {\r\n div.remove();\r\n teamMemberCount--;\r\n updateAddTeamMemberButtonState(); \/\/ Update button state after removal\r\n \/\/ Re-index remaining team members (optional, but good for consistent naming)\r\n Array.from(teamMembersContainer.children).forEach((child, i) => {\r\n child.querySelector(`h4`).textContent = `Team Member ${i + 1}`;\r\n });\r\n });\r\n }\r\n\r\n \/\/ Function to add a new team member input group\r\n function addTeamMember() {\r\n if (teamMemberCount >= 10) { \/\/ Max 10 team members allowed\r\n showMessage('error', 'Maximum of 10 team members allowed.');\r\n return;\r\n }\r\n createTeamMemberInputGroup(teamMemberCount);\r\n teamMemberCount++;\r\n updateAddTeamMemberButtonState(); \/\/ Update button state after adding\r\n }\r\n\r\n \/\/ Initial setup on page load\r\n document.addEventListener('DOMContentLoaded', () => {\r\n populateStatesDropdown();\r\n \/\/ Removed addTeamMember() from DOMContentLoaded as per the original HTML artifact,\r\n \/\/ assuming it's intended to be added dynamically. If you want one by default, uncomment.\r\n \/\/ addTeamMember();\r\n });\r\n\r\n addTeamMemberButton.addEventListener('click', addTeamMember);\r\n\r\n \/\/ Form submission handler\r\n registrationForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n \/\/ Show loading overlay and disable button\r\n loadingOverlay.classList.remove('hidden');\r\n loadingOverlay.style.display = 'flex'; \/\/ Ensure it's visible as flex\r\n submitButton.disabled = true;\r\n submitButton.textContent = 'Registering...';\r\n showMessage('', ''); \/\/ Clear previous messages\r\n\r\n const formData = new FormData(this);\r\n const data = {};\r\n\r\n \/\/ Collect main participant data\r\n data.name = formData.get('name');\r\n data.brandCompany = formData.get('brandCompany');\r\n data.role = formData.get('role');\r\n data.gst = formData.get('gst').toUpperCase(); \/\/ Store uppercase\r\n data.email = formData.get('email');\r\n data.phoneNumber = formData.get('phoneNumber');\r\n data.address = formData.get('address');\r\n data.city = formData.get('city');\r\n data.state = formData.get('state');\r\n\r\n \/\/ Handle main photo\r\n const mainPhotoFile = photoInput.files[0];\r\n if (mainPhotoFile) {\r\n data.photoBase64 = await new Promise(resolve => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => resolve(reader.result);\r\n reader.readAsDataURL(mainPhotoFile);\r\n });\r\n } else {\r\n showMessage('error', 'Main participant photo is mandatory.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n \/\/ Collect team members data\r\n data.teamMembers = [];\r\n const teamMemberForms = teamMembersContainer.children;\r\n for (let i = 0; i < teamMemberForms.length; i++) {\r\n const teamMemberForm = teamMemberForms[i];\r\n const member = {};\r\n member.name = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][name]\"]`).value;\r\n member.email = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][email]\"]`).value;\r\n \/\/ Removed role from here\r\n member.phoneNumber = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][phoneNumber]\"]`).value;\r\n\r\n const teamPhotoFile = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][photo]\"]`).files[0];\r\n if (teamPhotoFile) {\r\n member.photoBase64 = await new Promise(resolve => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => resolve(reader.result);\r\n reader.readAsDataURL(teamPhotoFile);\r\n });\r\n } else {\r\n showMessage('error', `Team Member ${i + 1} photo is mandatory.`);\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n data.teamMembers.push(member);\r\n }\r\n\r\n \/\/ Client-side validation (basic, more thorough validation on server is crucial)\r\n const errors = [];\r\n const gstRegex = \/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$\/;\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n \/\/ Updated phone regex to allow + and 10-15 digits\r\n const phoneRegex = \/^\\+?\\d{10,15}$\/;\r\n\r\n if (!gstRegex.test(data.gst)) errors.push('Invalid GST number format.');\r\n if (!emailRegex.test(data.email)) errors.push('Invalid email format for main participant.');\r\n if (!phoneRegex.test(data.phoneNumber)) errors.push('Invalid phone number format for main participant. Must be 10-15 digits, optionally with a leading \"+\".');\r\n\r\n\r\n data.teamMembers.forEach((member, i) => {\r\n if (!emailRegex.test(member.email)) errors.push(`Invalid email format for Team Member ${i + 1}.`);\r\n if (!phoneRegex.test(member.phoneNumber)) errors.push(`Invalid phone number format for Team Member ${i + 1}. Must be 10-15 digits, optionally with a leading \"+\".`);\r\n \/\/ Removed role validation\r\n });\r\n\r\n if (errors.length > 0) {\r\n showMessage('error', errors.join('<br>'));\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n \/\/ Check GST uniqueness via AJAX\r\n try {\r\n const gstCheckResponse = await fetch('https:\/\/joreewaz.com\/check_gst_uniqueness.php', { \/\/ Updated URL\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify({ gst: data.gst })\r\n });\r\n const gstCheckResult = await gstCheckResponse.json();\r\n\r\n if (gstCheckResult.exists) {\r\n showMessage('error', 'GST number is already registered. Each registration must have a unique GST.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n } catch (error) {\r\n console.error('Error checking GST uniqueness:', error);\r\n showMessage('error', 'Failed to check GST uniqueness. Please try again.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n\r\n \/\/ Send data to PHP backend\r\n try {\r\n const response = await fetch('https:\/\/joreewaz.com\/register.php', { \/\/ Updated URL\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify(data)\r\n });\r\n const result = await response.json();\r\n\r\n if (result.success) {\r\n showMessage('success', result.message); \/\/ Display message from PHP\r\n \/\/ Redirect to the success page instead of showing ID card\r\n window.location.href = 'https:\/\/joreewaz.com\/participant_success.html';\r\n\r\n } else {\r\n showMessage('error', `Registration failed: ${result.message || 'Unknown error.'}`);\r\n }\r\n } catch (error) {\r\n console.error('Error submitting registration:', error);\r\n showMessage('error', `Registration failed: ${error.message}`);\r\n } finally {\r\n loadingOverlay.classList.add('hidden'); \/\/ Always hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n }\r\n });\r\n\r\n \/\/ This function is no longer called as ID card display is replaced by redirect\r\n function populateIdCard(data) {\r\n document.getElementById('idCardPhoto').src = data.photoBase64 || 'https:\/\/placehold.co\/80x80\/cccccc\/333333?text=No%20Photo';\r\n document.getElementById('idCardName').textContent = data.name;\r\n document.getElementById('idCardRole').textContent = data.role;\r\n document.getElementById('idCardCompany').textContent = data.brandCompany;\r\n document.getElementById('idCardGST').textContent = data.gst;\r\n document.getElementById('idCardEmail').textContent = data.email;\r\n document.getElementById('idCardPhone').textContent = `${data.phoneNumber}`;\r\n }\r\n\r\n \/\/ Download ID Card handler (This button and logic would typically be removed if ID card is not shown)\r\n downloadIdCardButton.addEventListener('click', async function() {\r\n const idCardElement = document.getElementById('idCard');\r\n if (!idCardElement) {\r\n showMessage('error', 'ID card element not found.');\r\n return;\r\n }\r\n\r\n \/\/ Ensure html2canvas is loaded\r\n if (typeof window.html2canvas === 'undefined') {\r\n showMessage('error', 'ID card generation library not loaded. Please try again.');\r\n return;\r\n }\r\n\r\n try {\r\n const canvas = await html2canvas(idCardElement, {\r\n scale: 2, \/\/ Increase scale for better quality\r\n useCORS: true\r\n });\r\n const image = canvas.toDataURL('image\/png');\r\n\r\n const link = document.createElement('a');\r\n link.href = image;\r\n \/\/ Get participant name from ID card display\r\n const participantName = document.getElementById('idCardName').textContent;\r\n link.download = `${participantName || 'Participant'}_ID_Card.png`;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n\r\n showMessage('success', 'ID card downloaded successfully!');\r\n\r\n } catch (error) {\r\n console.error(\"Error generating or downloading ID card:\", error);\r\n showMessage('error', `Failed to download ID card: ${error.message}`);\r\n }\r\n });\r\n\r\n \/\/ This button and logic would typically be removed if ID card is not shown\r\n backToRegistrationButton.addEventListener('click', () => {\r\n idCardSection.classList.add('hidden');\r\n registrationFormSection.classList.remove('hidden');\r\n registrationForm.reset(); \/\/ Clear the form\r\n photoPreview.classList.add('hidden'); \/\/ Hide main photo preview\r\n photoPreview.src = ''; \/\/ Clear main photo preview src\r\n\r\n \/\/ Clear all existing team members and then add one default if desired\r\n teamMembersContainer.innerHTML = ''; \/\/ Clear all existing team member divs\r\n teamMemberCount = 0; \/\/ Reset count\r\n \/\/ If you always want one team member by default, uncomment the next line:\r\n \/\/ addTeamMember();\r\n updateAddTeamMemberButtonState(); \/\/ Ensure button state is correct\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Event Registration<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- html2canvas for ID card generation -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n .site-header {\r\n display: none; \/* Hide WordPress header *\/\r\n }\r\n .site-footer {\r\n display: none; \/* Hide WordPress footer *\/\r\n }\r\n .bg-pattern {\r\n background-image: linear-gradient(45deg, #ffffff20 25%, transparent 25%, transparent 75%, #ffffff20 75%, #ffffff20), linear-gradient(45deg, #ffffff20 25%, transparent 25%, transparent 75%, #ffffff20 75%, #ffffff20);\r\n background-size: 20px 20px;\r\n background-position: 0 0, 10px 10px;\r\n }\r\n .message-box {\r\n display: none;\r\n padding: 12px;\r\n margin-bottom: 16px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n opacity: 0;\r\n transition: opacity 0.3s ease-in-out;\r\n }\r\n .message-box.show {\r\n opacity: 1;\r\n }\r\n .message-box.success {\r\n background-color: #d4edda;\r\n color: #155724;\r\n }\r\n .message-box.error {\r\n background-color: #f8d7da;\r\n color: #721c24;\r\n }\r\n \/* Custom CSS for input field titles *\/\r\n .input-label-title {\r\n display: block; \/* Ensure it behaves like a block element *\/\r\n font-size: 1rem; \/* Equivalent to Tailwind's text-base *\/\r\n font-weight: 700; \/* Equivalent to Tailwind's font-bold *\/\r\n color: #374151; \/* Equivalent to Tailwind's text-gray-700 *\/\r\n }\r\n \/* For team member headings, adjust slightly if needed *\/\r\n .team-member-heading {\r\n font-size: 1.125rem; \/* Equivalent to Tailwind's text-lg for subheadings *\/\r\n font-weight: 600; \/* Equivalent to font-semibold *\/\r\n color: #1f2937; \/* Equivalent to text-gray-800 *\/\r\n }\r\n\r\n \/* Styles for the loading overlay *\/\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-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n flex-direction: column;\r\n color: white;\r\n font-size: 1.2rem;\r\n text-align: center;\r\n backdrop-filter: blur(5px); \/* Optional blur effect *\/\r\n -webkit-backdrop-filter: blur(5px); \/* Safari support *\/\r\n }\r\n\r\n .loading-spinner {\r\n border: 4px solid rgba(255, 255, 255, 0.3);\r\n border-top: 4px solid #ffffff;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 10px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen bg-gray-100 p-4 flex flex-col items-center justify-center\">\r\n\r\n <!-- Loading Overlay -->\r\n <div id=\"loadingOverlay\" class=\"loading-overlay hidden\" style=\"display: none;\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <p>Registering details, please wait...<\/p>\r\n <\/div>\r\n\r\n <!-- Added mx-auto to center the app-container horizontally within its parent -->\r\n <div id=\"app-container\" class=\"w-full max-w-4xl mx-auto\">\r\n <!-- Message Box -->\r\n <div id=\"messageBox\" class=\"message-box\"><\/div>\r\n\r\n <!-- Registration Form -->\r\n <div id=\"registration-form-section\" class=\"bg-white p-8 rounded-2xl shadow-xl w-full\">\r\n <!-- Logo added here -->\r\n <img decoding=\"async\" src=\"https:\/\/joreewaz.com\/wp-content\/uploads\/2025\/06\/2342-by-1165-pixels-01-scaled.png\" alt=\"Event Logo\" class=\"mx-auto block w-64 mb-6\">\r\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">Registration<\/h1>\r\n\t\t\t<h3 class=\"font-bold text-center\">6th Women's Ethnic Wear Fest<\/h3>\r\n <h3 class=\"text-center\">22nd and 23rd July, 2025<\/h3><br>\r\n <form id=\"registrationForm\" class=\"space-y-4\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div>\r\n <label for=\"name\" class=\"input-label-title\">Name<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"brandCompany\" class=\"input-label-title\">Brand\/Company<\/label>\r\n <input type=\"text\" id=\"brandCompany\" name=\"brandCompany\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"role\" class=\"input-label-title\">Role<\/label>\r\n <select id=\"role\" name=\"role\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <option value=\"\">Select Role<\/option>\r\n <option value=\"Buyer\">Buyer<\/option>\r\n <option value=\"Participant\">Participant<\/option>\r\n <option value=\"Team\">Team<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"gst\" class=\"input-label-title\">GST Number<\/label>\r\n <input type=\"text\" id=\"gst\" name=\"gst\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" placeholder=\"e.g., 22ABCDE1234F1Z5\" required>\r\n <p class=\"mt-1 text-xs text-gray-500\">15 alphanumeric characters (e.g., 22ABCDE1234F1Z5)<\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"email\" class=\"input-label-title\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"phoneNumber\" class=\"input-label-title\">Phone Number<\/label>\r\n <div class=\"mt-1\">\r\n <input type=\"tel\" id=\"phoneNumber\" name=\"phoneNumber\" class=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"address\" class=\"input-label-title\">Address<\/label>\r\n <textarea id=\"address\" name=\"address\" rows=\"2\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required><\/textarea>\r\n <\/div>\r\n <div>\r\n <label for=\"city\" class=\"input-label-title\">City<\/label>\r\n <input type=\"text\" id=\"city\" name=\"city\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"state\" class=\"input-label-title\">State<\/label>\r\n <select id=\"state\" name=\"state\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <option value=\"\">Select State\/UT<\/option>\r\n <!-- Options will be populated by JavaScript -->\r\n <\/select>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"photo\" class=\"input-label-title\">Photo (JPEG\/PNG, Max 4MB)<\/label>\r\n <input type=\"file\" id=\"photo\" name=\"photo\" accept=\"image\/jpeg, image\/png\" class=\"mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\" required>\r\n <img decoding=\"async\" id=\"photoPreview\" src=\"\" alt=\"Photo Preview\" class=\"mt-2 w-32 h-32 object-cover rounded-md shadow-sm hidden\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border-t-2 border-gray-400 pt-4 mt-4\"> <!-- Changed border-t to border-t-2 and border-gray-300 to border-gray-400 -->\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Team Members<\/h3>\r\n <div id=\"teamMembersContainer\">\r\n <!-- Team members will be added here by JavaScript -->\r\n <\/div>\r\n <button type=\"button\" id=\"addTeamMember\" class=\"flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors shadow-md\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n Add Team Member\r\n <\/button>\r\n <\/div>\r\n\r\n <button type=\"submit\" id=\"submitButton\" class=\"w-full py-3 mt-6 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:from-blue-700 hover:to-blue-800 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Register\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- ID Card Display Section (Initially Hidden) -->\r\n <div id=\"idCardSection\" class=\"hidden bg-white p-8 rounded-2xl shadow-xl w-full max-w-lg flex flex-col items-center mt-8\">\r\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">Your Event ID Card<\/h1>\r\n <div id=\"idCard\" class=\"relative w-80 h-52 bg-gradient-to-br from-blue-600 to-indigo-800 rounded-xl shadow-lg overflow-hidden flex flex-col justify-between p-4 text-white font-inter mb-8\">\r\n <div class=\"absolute inset-0 bg-pattern opacity-10\"><\/div>\r\n <div class=\"absolute top-2 right-4 text-xs font-semibold\">EVENT ID CARD<\/div>\r\n <div class=\"flex items-center gap-4 z-10\">\r\n <img decoding=\"async\" id=\"idCardPhoto\" src=\"\" alt=\"Participant\" class=\"w-20 h-20 rounded-full border-4 border-white object-cover shadow-md\">\r\n <div class=\"flex-1\">\r\n <h2 id=\"idCardName\" class=\"text-xl font-bold truncate\"><\/h2>\r\n <p id=\"idCardRole\" class=\"text-sm text-blue-200\"><\/p>\r\n <p id=\"idCardCompany\" class=\"text-sm font-medium\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto z-10\">\r\n <p class=\"text-xs font-light\">GST: <span id=\"idCardGST\"><\/span><\/p>\r\n <p class=\"text-xs font-light\">Email: <span id=\"idCardEmail\"><\/span><\/p>\r\n <p class=\"text-xs font-light\">Phone: <span id=\"idCardPhone\"><\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"downloadIdCard\" class=\"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-lg flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414L9.586 2.586a1 1 0 011.414 0l3.293 3.293a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L6.707 6.707a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\r\n <\/svg>\r\n Download ID Card (PNG)\r\n <\/button>\r\n <button id=\"backToRegistration\" class=\"px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors shadow-lg\">\r\n Register Another Participant\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const messageBox = document.getElementById('messageBox');\r\n const registrationForm = document.getElementById('registrationForm');\r\n const submitButton = document.getElementById('submitButton');\r\n const teamMembersContainer = document.getElementById('teamMembersContainer');\r\n const addTeamMemberButton = document.getElementById('addTeamMember');\r\n const photoInput = document.getElementById('photo');\r\n const photoPreview = document.getElementById('photoPreview');\r\n const stateSelect = document.getElementById('state');\r\n const idCardSection = document.getElementById('idCardSection');\r\n const registrationFormSection = document.getElementById('registration-form-section');\r\n const downloadIdCardButton = document.getElementById('downloadIdCard');\r\n const backToRegistrationButton = document.getElementById('backToRegistration');\r\n const loadingOverlay = document.getElementById('loadingOverlay'); \/\/ New loading overlay element\r\n\r\n let teamMemberCount = 0; \/\/ To keep track of dynamically added team members\r\n\r\n \/\/ Dropdown options for Indian States\/Union Territories\r\n const indianStatesAndUTs = [\r\n \"Andhra Pradesh\", \"Arunachal Pradesh\", \"Assam\", \"Bihar\", \"Chhattisgarh\",\r\n \"Goa\", \"Gujarat\", \"Haryana\", \"Himachal Pradesh\", \"Jharkhand\",\r\n \"Karnataka\", \"Kerala\", \"Madhya Pradesh\", \"Maharashtra\", \"Manipur\",\r\n \"Meghalaya\", \"Mizoram\", \"Nagaland\", \"Odisha\", \"Punjab\",\r\n \"Rajasthan\", \"Sikkim\", \"Tamil Nadu\", \"Telangana\", \"Tripura\",\r\n \"Uttar Pradesh\", \"Uttarakhand\", \"West Bengal\",\r\n \"Andaman and Nicobar Islands\", \"Chandigarh\", \"Dadra and Nagar Haveli and Daman & Diu\",\r\n \"Lakshadweep\", \"Delhi\", \"Puducherry\", \"Ladakh\", \"Jammu and Kashmir\"\r\n ].sort();\r\n\r\n \/\/ Dropdown options for Role\r\n const roleOptions = [\"Buyer\", \"Participant\", \"Team\"];\r\n\r\n \/\/ Function to display messages\r\n function showMessage(type, text) {\r\n messageBox.innerHTML = text;\r\n messageBox.className = `message-box show ${type}`;\r\n clearTimeout(messageBox.dataset.timeoutId); \/\/ Clear any existing timeout\r\n const timeoutId = setTimeout(() => {\r\n messageBox.classList.remove('show');\r\n messageBox.innerHTML = ''; \/\/ Clear message after fading\r\n }, 5000); \/\/ 5 seconds\r\n messageBox.dataset.timeoutId = timeoutId;\r\n messageBox.style.display = 'block'; \/\/ Ensure it's visible initially\r\n }\r\n\r\n \/\/ Populate Indian States\/UTs dropdown\r\n function populateStatesDropdown() {\r\n indianStatesAndUTs.forEach(state => {\r\n const option = document.createElement('option');\r\n option.value = state;\r\n option.textContent = state;\r\n stateSelect.appendChild(option);\r\n });\r\n }\r\n\r\n \/\/ Function to update the add team member button state (max 10 team members total)\r\n function updateAddTeamMemberButtonState() {\r\n if (teamMemberCount >= 10) {\r\n addTeamMemberButton.disabled = true;\r\n addTeamMemberButton.classList.add('opacity-50', 'cursor-not-allowed');\r\n } else {\r\n addTeamMemberButton.disabled = false;\r\n addTeamMemberButton.classList.remove('opacity-50', 'cursor-not-allowed');\r\n }\r\n }\r\n\r\n \/\/ Handle main participant photo preview\r\n photoInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (file) {\r\n const allowedTypes = ['image\/jpeg', 'image\/png'];\r\n const maxSize = 4 * 1024 * 1024; \/\/ 4MB\r\n\r\n if (!allowedTypes.includes(file.type)) {\r\n showMessage('error', 'Only JPEG and PNG images are allowed for main photo.');\r\n this.value = ''; \/\/ Clear input\r\n photoPreview.classList.add('hidden');\r\n return;\r\n }\r\n if (file.size > maxSize) {\r\n showMessage('error', 'Main photo size cannot exceed 4MB.');\r\n this.value = ''; \/\/ Clear input\r\n photoPreview.classList.add('hidden');\r\n return;\r\n }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n photoPreview.src = e.target.result;\r\n photoPreview.classList.remove('hidden');\r\n };\r\n reader.readAsDataURL(file);\r\n } else {\r\n photoPreview.classList.add('hidden');\r\n photoPreview.src = '';\r\n }\r\n });\r\n\r\n \/\/ Function to create a team member input group\r\n function createTeamMemberInputGroup(index) {\r\n const div = document.createElement('div');\r\n div.className = 'grid grid-cols-1 md:grid-cols-2 gap-4 border border-gray-200 rounded-md p-4 mb-4 relative';\r\n div.innerHTML = `\r\n <h4 class=\"col-span-full team-member-heading\">Team Member ${index + 1}<\/h4>\r\n <div>\r\n <label for=\"team-name-${index}\" class=\"input-label-title\">Name<\/label>\r\n <input type=\"text\" id=\"team-name-${index}\" name=\"teamMembers[${index}][name]\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"team-email-${index}\" class=\"input-label-title\">Email<\/label>\r\n <input type=\"email\" id=\"team-email-${index}\" name=\"teamMembers[${index}][email]\" class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <div>\r\n <label for=\"team-phoneNumber-${index}\" class=\"input-label-title\">Phone Number<\/label>\r\n <div class=\"mt-1\">\r\n <input type=\"tel\" id=\"team-phoneNumber-${index}\" name=\"teamMembers[${index}][phoneNumber]\" class=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col-span-1 md:col-span-2\">\r\n <label for=\"team-photo-${index}\" class=\"input-label-title\">Photo (JPEG\/PNG, Max 4MB)<\/label>\r\n <input type=\"file\" id=\"team-photo-${index}\" name=\"teamMembers[${index}][photo]\" accept=\"image\/jpeg, image\/png\" class=\"mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100\" required>\r\n <img decoding=\"async\" id=\"team-photoPreview-${index}\" src=\"\" alt=\"Team Member Photo Preview\" class=\"mt-2 w-32 h-32 object-cover rounded-md shadow-sm hidden\">\r\n <\/div>\r\n <button type=\"button\" class=\"remove-team-member-btn absolute top-2 right-2 p-1 text-red-500 hover:text-red-700 rounded-full bg-red-100 hover:bg-red-200 transition-colors\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n <\/button>\r\n `;\r\n teamMembersContainer.appendChild(div);\r\n\r\n \/\/ Add event listener for team member photo preview\r\n const teamPhotoInput = div.querySelector(`#team-photo-${index}`);\r\n const teamPhotoPreview = div.querySelector(`#team-photoPreview-${index}`);\r\n teamPhotoInput.addEventListener('change', function() {\r\n const file = this.files[0];\r\n if (file) {\r\n const allowedTypes = ['image\/jpeg', 'image\/png'];\r\n const maxSize = 4 * 1024 * 1024; \/\/ 4MB\r\n\r\n if (!allowedTypes.includes(file.type)) {\r\n showMessage('error', `Team Member ${index + 1}: Only JPEG and PNG images are allowed.`);\r\n this.value = '';\r\n teamPhotoPreview.classList.add('hidden');\r\n return;\r\n }\r\n if (file.size > maxSize) {\r\n showMessage('error', `Team Member ${index + 1}: Image size cannot exceed 4MB.`);\r\n this.value = '';\r\n teamPhotoPreview.classList.add('hidden');\r\n return;\r\n }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n teamPhotoPreview.src = e.target.result;\r\n teamPhotoPreview.classList.remove('hidden');\r\n };\r\n reader.readAsDataURL(file);\r\n } else {\r\n teamPhotoPreview.classList.add('hidden');\r\n teamPhotoPreview.src = '';\r\n }\r\n });\r\n\r\n \/\/ Add event listener for remove button\r\n div.querySelector('.remove-team-member-btn').addEventListener('click', function() {\r\n div.remove();\r\n teamMemberCount--;\r\n updateAddTeamMemberButtonState(); \/\/ Update button state after removal\r\n \/\/ Re-index remaining team members (optional, but good for consistent naming)\r\n Array.from(teamMembersContainer.children).forEach((child, i) => {\r\n child.querySelector(`h4`).textContent = `Team Member ${i + 1}`;\r\n });\r\n });\r\n }\r\n\r\n \/\/ Function to add a new team member input group\r\n function addTeamMember() {\r\n if (teamMemberCount >= 10) { \/\/ Max 10 team members allowed\r\n showMessage('error', 'Maximum of 10 team members allowed.');\r\n return;\r\n }\r\n createTeamMemberInputGroup(teamMemberCount);\r\n teamMemberCount++;\r\n updateAddTeamMemberButtonState(); \/\/ Update button state after adding\r\n }\r\n\r\n \/\/ Initial setup on page load\r\n document.addEventListener('DOMContentLoaded', () => {\r\n populateStatesDropdown();\r\n \/\/ Removed addTeamMember() from DOMContentLoaded as per the original HTML artifact,\r\n \/\/ assuming it's intended to be added dynamically. If you want one by default, uncomment.\r\n \/\/ addTeamMember();\r\n });\r\n\r\n addTeamMemberButton.addEventListener('click', addTeamMember);\r\n\r\n \/\/ Form submission handler\r\n registrationForm.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n \/\/ Show loading overlay and disable button\r\n loadingOverlay.classList.remove('hidden');\r\n loadingOverlay.style.display = 'flex'; \/\/ Ensure it's visible as flex\r\n submitButton.disabled = true;\r\n submitButton.textContent = 'Registering...';\r\n showMessage('', ''); \/\/ Clear previous messages\r\n\r\n const formData = new FormData(this);\r\n const data = {};\r\n\r\n \/\/ Collect main participant data\r\n data.name = formData.get('name');\r\n data.brandCompany = formData.get('brandCompany');\r\n data.role = formData.get('role');\r\n data.gst = formData.get('gst').toUpperCase(); \/\/ Store uppercase\r\n data.email = formData.get('email');\r\n data.phoneNumber = formData.get('phoneNumber');\r\n data.address = formData.get('address');\r\n data.city = formData.get('city');\r\n data.state = formData.get('state');\r\n\r\n \/\/ Handle main photo\r\n const mainPhotoFile = photoInput.files[0];\r\n if (mainPhotoFile) {\r\n data.photoBase64 = await new Promise(resolve => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => resolve(reader.result);\r\n reader.readAsDataURL(mainPhotoFile);\r\n });\r\n } else {\r\n showMessage('error', 'Main participant photo is mandatory.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n \/\/ Collect team members data\r\n data.teamMembers = [];\r\n const teamMemberForms = teamMembersContainer.children;\r\n for (let i = 0; i < teamMemberForms.length; i++) {\r\n const teamMemberForm = teamMemberForms[i];\r\n const member = {};\r\n member.name = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][name]\"]`).value;\r\n member.email = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][email]\"]`).value;\r\n \/\/ Removed role from here\r\n member.phoneNumber = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][phoneNumber]\"]`).value;\r\n\r\n const teamPhotoFile = teamMemberForm.querySelector(`[name=\"teamMembers[${i}][photo]\"]`).files[0];\r\n if (teamPhotoFile) {\r\n member.photoBase64 = await new Promise(resolve => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => resolve(reader.result);\r\n reader.readAsDataURL(teamPhotoFile);\r\n });\r\n } else {\r\n showMessage('error', `Team Member ${i + 1} photo is mandatory.`);\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n data.teamMembers.push(member);\r\n }\r\n\r\n \/\/ Client-side validation (basic, more thorough validation on server is crucial)\r\n const errors = [];\r\n const gstRegex = \/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$\/;\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n \/\/ Updated phone regex to allow + and 10-15 digits\r\n const phoneRegex = \/^\\+?\\d{10,15}$\/;\r\n\r\n if (!gstRegex.test(data.gst)) errors.push('Invalid GST number format.');\r\n if (!emailRegex.test(data.email)) errors.push('Invalid email format for main participant.');\r\n if (!phoneRegex.test(data.phoneNumber)) errors.push('Invalid phone number format for main participant. Must be 10-15 digits, optionally with a leading \"+\".');\r\n\r\n\r\n data.teamMembers.forEach((member, i) => {\r\n if (!emailRegex.test(member.email)) errors.push(`Invalid email format for Team Member ${i + 1}.`);\r\n if (!phoneRegex.test(member.phoneNumber)) errors.push(`Invalid phone number format for Team Member ${i + 1}. Must be 10-15 digits, optionally with a leading \"+\".`);\r\n \/\/ Removed role validation\r\n });\r\n\r\n if (errors.length > 0) {\r\n showMessage('error', errors.join('<br>'));\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n \/\/ Check GST uniqueness via AJAX\r\n try {\r\n const gstCheckResponse = await fetch('https:\/\/joreewaz.com\/check_gst_uniqueness.php', { \/\/ Updated URL\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify({ gst: data.gst })\r\n });\r\n const gstCheckResult = await gstCheckResponse.json();\r\n\r\n if (gstCheckResult.exists) {\r\n showMessage('error', 'GST number is already registered. Each registration must have a unique GST.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n } catch (error) {\r\n console.error('Error checking GST uniqueness:', error);\r\n showMessage('error', 'Failed to check GST uniqueness. Please try again.');\r\n loadingOverlay.classList.add('hidden'); \/\/ Hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n return;\r\n }\r\n\r\n\r\n \/\/ Send data to PHP backend\r\n try {\r\n const response = await fetch('https:\/\/joreewaz.com\/register.php', { \/\/ Updated URL\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n },\r\n body: JSON.stringify(data)\r\n });\r\n const result = await response.json();\r\n\r\n if (result.success) {\r\n showMessage('success', result.message); \/\/ Display message from PHP\r\n \/\/ Redirect to the success page instead of showing ID card\r\n window.location.href = 'https:\/\/joreewaz.com\/participant_success.html';\r\n\r\n } else {\r\n showMessage('error', `Registration failed: ${result.message || 'Unknown error.'}`);\r\n }\r\n } catch (error) {\r\n console.error('Error submitting registration:', error);\r\n showMessage('error', `Registration failed: ${error.message}`);\r\n } finally {\r\n loadingOverlay.classList.add('hidden'); \/\/ Always hide loading overlay\r\n loadingOverlay.style.display = 'none'; \/\/ Ensure it's hidden\r\n submitButton.disabled = false;\r\n submitButton.textContent = 'Register';\r\n }\r\n });\r\n\r\n \/\/ This function is no longer called as ID card display is replaced by redirect\r\n function populateIdCard(data) {\r\n document.getElementById('idCardPhoto').src = data.photoBase64 || 'https:\/\/placehold.co\/80x80\/cccccc\/333333?text=No%20Photo';\r\n document.getElementById('idCardName').textContent = data.name;\r\n document.getElementById('idCardRole').textContent = data.role;\r\n document.getElementById('idCardCompany').textContent = data.brandCompany;\r\n document.getElementById('idCardGST').textContent = data.gst;\r\n document.getElementById('idCardEmail').textContent = data.email;\r\n document.getElementById('idCardPhone').textContent = `${data.phoneNumber}`;\r\n }\r\n\r\n \/\/ Download ID Card handler (This button and logic would typically be removed if ID card is not shown)\r\n downloadIdCardButton.addEventListener('click', async function() {\r\n const idCardElement = document.getElementById('idCard');\r\n if (!idCardElement) {\r\n showMessage('error', 'ID card element not found.');\r\n return;\r\n }\r\n\r\n \/\/ Ensure html2canvas is loaded\r\n if (typeof window.html2canvas === 'undefined') {\r\n showMessage('error', 'ID card generation library not loaded. Please try again.');\r\n return;\r\n }\r\n\r\n try {\r\n const canvas = await html2canvas(idCardElement, {\r\n scale: 2, \/\/ Increase scale for better quality\r\n useCORS: true\r\n });\r\n const image = canvas.toDataURL('image\/png');\r\n\r\n const link = document.createElement('a');\r\n link.href = image;\r\n \/\/ Get participant name from ID card display\r\n const participantName = document.getElementById('idCardName').textContent;\r\n link.download = `${participantName || 'Participant'}_ID_Card.png`;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n\r\n showMessage('success', 'ID card downloaded successfully!');\r\n\r\n } catch (error) {\r\n console.error(\"Error generating or downloading ID card:\", error);\r\n showMessage('error', `Failed to download ID card: ${error.message}`);\r\n }\r\n });\r\n\r\n \/\/ This button and logic would typically be removed if ID card is not shown\r\n backToRegistrationButton.addEventListener('click', () => {\r\n idCardSection.classList.add('hidden');\r\n registrationFormSection.classList.remove('hidden');\r\n registrationForm.reset(); \/\/ Clear the form\r\n photoPreview.classList.add('hidden'); \/\/ Hide main photo preview\r\n photoPreview.src = ''; \/\/ Clear main photo preview src\r\n\r\n \/\/ Clear all existing team members and then add one default if desired\r\n teamMembersContainer.innerHTML = ''; \/\/ Clear all existing team member divs\r\n teamMemberCount = 0; \/\/ Reset count\r\n \/\/ If you always want one team member by default, uncomment the next line:\r\n \/\/ addTeamMember();\r\n updateAddTeamMemberButtonState(); \/\/ Ensure button state is correct\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":2,"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/pages\/221\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/joreewaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}