{"id":493,"date":"2025-11-10T03:31:33","date_gmt":"2025-11-10T03:31:33","guid":{"rendered":"https:\/\/biosat.msu.ac.th\/2025\/?page_id=493"},"modified":"2025-11-14T13:29:43","modified_gmt":"2025-11-14T13:29:43","slug":"registration-session-8","status":"publish","type":"page","link":"https:\/\/biosat.msu.ac.th\/2025\/?page_id=493","title":{"rendered":"Registration Session 8"},"content":{"rendered":"<div id=\"tdi_1_538\" class=\"tdc-zone\"><div class=\"tdc_zone tdi_2_8a6  wpb_row td-pb-row\"  >\n<style scoped>\n\n\/* custom css *\/\n.tdi_2_8a6{\r\n                    min-height: 0;\r\n                }\n<\/style><div id=\"tdi_3_4a8\" class=\"tdc-row\"><div class=\"vc_row tdi_4_d77  wpb_row td-pb-row\" >\n<style scoped>\n\n\/* custom css *\/\n.tdi_4_d77{\r\n                    min-height: 0;\r\n                }.tdi_4_d77,\r\n\t\t\t\t.tdi_4_d77 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_4_d77 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}\n<\/style><div class=\"vc_column tdi_6_2d8  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\n\/* custom css *\/\n.tdi_6_2d8{\r\n                    vertical-align: baseline;\r\n                }.tdi_6_2d8 .wpb_wrapper,\r\n\t\t\t\t.tdi_6_2d8 .wpb_wrapper .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_6_2d8 .wpb_wrapper .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_6_2d8 .wpb_wrapper{\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\"><div class=\"wpb_wrapper td_block_wrap vc_raw_html tdi_8_ce8 \"><div class=\"td-fix-index\"><!doctype html>\n<html lang=\"en\">\n <head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>BioSat2026 - Session VIII Registration<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <style>\n    body {\n      box-sizing: border-box;\n    }\n    \n    .form-section {\n      animation: fadeIn 0.5s ease-in;\n    }\n    \n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(10px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    \n    .student-card {\n      transition: all 0.3s ease;\n    }\n    \n    .student-card:hover {\n      box-shadow: 0 8px 16px rgba(16, 185, 129, 0.1);\n    }\n    \n    input:focus, select:focus, textarea:focus {\n      outline: none;\n      border-color: #10b981;\n      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n    }\n    \n    .success-checkmark {\n      animation: scaleIn 0.5s ease-out;\n    }\n    \n    @keyframes scaleIn {\n      from { transform: scale(0); }\n      to { transform: scale(1); }\n    }\n    \n    .spinner {\n      border: 3px solid #f3f4f6;\n      border-top: 3px solid #10b981;\n      border-radius: 50%;\n      width: 40px;\n      height: 40px;\n      animation: spin 1s linear infinite;\n    }\n    \n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  <\/style>\n  <style>@view-transition { navigation: auto; }<\/style>\n  <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"\/_sdk\/element_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"bg-gradient-to-br from-emerald-50 to-teal-50 min-h-full\">\n  <main class=\"container mx-auto px-4 py-8 max-w-4xl\"><!-- Header -->\n   <header class=\"bg-white rounded-2xl shadow-lg p-8 mb-8 text-center border-t-4 border-emerald-500\">\n    <h1 class=\"text-4xl font-bold text-emerald-700 mb-2\">BioSat2026<\/h1>\n    <h2 class=\"text-2xl font-semibold text-gray-700 mb-3\">Session VIII: Youth Researcher Forum<\/h2>\n    <p class=\"text-gray-600 text-lg\">January 16, 2026 | Avani Khon Kaen Hotel, Thailand<\/p>\n    <div class=\"mt-4 inline-block bg-emerald-100 text-emerald-800 px-6 py-2 rounded-full font-semibold\">\n     Registration Fee: 4,500 THB per team\n    <\/div>\n   <\/header><!-- Registration Form -->\n   <form id=\"registrationForm\" class=\"space-y-6\"><!-- Team Size Selection -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">1<\/span> Team Size<\/h3><label for=\"studentCount\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Number of Students (1-3) <\/label> <select id=\"studentCount\" name=\"studentCount\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-lg\"> <option value=\"\">Select number of students<\/option> <option value=\"1\">1 Student<\/option> <option value=\"2\">2 Students<\/option> <option value=\"3\">3 Students<\/option> <\/select>\n    <\/section><!-- Student Information (Dynamic) -->\n    <section id=\"studentsSection\" class=\"space-y-6\"><\/section><!-- Project Information -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">3<\/span> Project Information<\/h3>\n     <div class=\"space-y-4\">\n      <div><label for=\"paperID\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Paper ID <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"paperID\" name=\"paperID\" required placeholder=\"e.g., BIOSAT2026-001\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n      <div><label for=\"projectTitle\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Project Title <span class=\"text-red-500\">*<\/span> <\/label> <textarea id=\"projectTitle\" name=\"projectTitle\" required rows=\"3\" placeholder=\"Enter your research project title\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\"><\/textarea>\n      <\/div>\n     <\/div>\n    <\/section><!-- Supervisor Information -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">4<\/span> Supervisor Information<\/h3>\n     <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\n      <div><label for=\"supervisorTitle\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Title <span class=\"text-red-500\">*<\/span> <\/label> <select id=\"supervisorTitle\" name=\"supervisorTitle\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\"> <option value=\"\">Select<\/option> <option value=\"Mr.\">Mr.<\/option> <option value=\"Ms.\">Ms.<\/option> <option value=\"Mrs.\">Mrs.<\/option> <option value=\"Dr.\">Dr.<\/option> <option value=\"Prof.\">Prof.<\/option> <option value=\"Assoc. Prof.\">Assoc. Prof.<\/option> <option value=\"Asst. Prof.\">Asst. Prof.<\/option> <\/select>\n      <\/div>\n      <div><label for=\"supervisorFirstName\" class=\"block text-sm font-medium text-gray-700 mb-2\"> First Name <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"supervisorFirstName\" name=\"supervisorFirstName\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n      <div><label for=\"supervisorLastName\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Last Name <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"supervisorLastName\" name=\"supervisorLastName\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n     <\/div>\n     <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n      <div><label for=\"supervisorPosition\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Position <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"supervisorPosition\" name=\"supervisorPosition\" required placeholder=\"e.g., Science Teacher\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n      <div><label for=\"supervisorDept\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Department <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"supervisorDept\" name=\"supervisorDept\" required placeholder=\"e.g., Biology Department\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n     <\/div>\n     <div class=\"mb-4\"><label for=\"supervisorSchool\" class=\"block text-sm font-medium text-gray-700 mb-2\"> School\/Institution <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"supervisorSchool\" name=\"supervisorSchool\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n     <\/div>\n     <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n      <div><label for=\"supervisorEmail\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Email <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"email\" id=\"supervisorEmail\" name=\"supervisorEmail\" required class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n      <div><label for=\"supervisorPhone\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Phone Number <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"tel\" id=\"supervisorPhone\" name=\"supervisorPhone\" required placeholder=\"+66-XXX-XXX-XXX\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n      <\/div>\n     <\/div>\n    <\/section><!-- Visa Documentation -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">5<\/span> Visa Documentation<\/h3>\n     <div class=\"border-2 border-gray-200 rounded-lg p-4\"><label class=\"block text-sm font-medium text-gray-700 mb-3\"> Do you require a formal invitation letter? <\/label>\n      <div class=\"space-y-2\"><label class=\"flex items-start cursor-pointer\"> <input type=\"radio\" name=\"visaRequired\" value=\"yes\" class=\"w-5 h-5 text-emerald-600 mt-1\"> <span class=\"ml-3 text-gray-700\">Yes, we need an invitation letter<\/span> <\/label> <label class=\"flex items-start cursor-pointer\"> <input type=\"radio\" name=\"visaRequired\" value=\"no\" checked class=\"w-5 h-5 text-emerald-600 mt-1\"> <span class=\"ml-3 text-gray-700\">No invitation letter needed<\/span> <\/label>\n      <\/div>\n      <div class=\"mt-4 bg-blue-50 border-l-4 border-blue-400 p-3\">\n       <p class=\"text-sm text-blue-800\"><strong>Note:<\/strong> We will send the formal invitation letter to your registered email address within 7 working days after your registration is confirmed.<\/p>\n      <\/div>\n     <\/div>\n    <\/section><!-- Financial Information -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">6<\/span> Financial Information<\/h3>\n     <div class=\"space-y-6\"><!-- Registration Fee Info -->\n      <div class=\"bg-gradient-to-r from-emerald-50 to-teal-50 border-2 border-emerald-200 rounded-lg p-5\">\n       <h4 class=\"font-bold text-emerald-800 text-xl mb-3\">Registration Fee: 4,500 THB per team<\/h4>\n       <p class=\"text-gray-700 mb-2\">This fee covers the entire team (maximum 3 students + 1 supervisor)<\/p>\n       <p class=\"text-gray-700\"><span class=\"font-semibold text-gray-800\">Includes:<\/span> Conference materials, Lunch, Refreshments, and Certificate<\/p>\n      <\/div><!-- Invoice Requirement -->\n      <div class=\"border-2 border-gray-200 rounded-lg p-4\"><label class=\"block text-sm font-medium text-gray-700 mb-3\"> Do you require an invoice? <\/label>\n       <div class=\"space-y-2\"><label class=\"flex items-start cursor-pointer\"> <input type=\"radio\" name=\"invoiceRequired\" value=\"yes\" id=\"invoiceYes\" class=\"w-5 h-5 text-emerald-600 mt-1\"> <span class=\"ml-3 text-gray-700\">Yes, I need an official invoice<\/span> <\/label> <label class=\"flex items-start cursor-pointer\"> <input type=\"radio\" name=\"invoiceRequired\" value=\"no\" id=\"invoiceNo\" checked class=\"w-5 h-5 text-emerald-600 mt-1\"> <span class=\"ml-3 text-gray-700\">No, I don't need an invoice<\/span> <\/label>\n       <\/div>\n      <\/div><!-- Payment Upload -->\n      <div><label class=\"block text-sm font-medium text-gray-700 mb-2\"> Upload Payment Verification <span class=\"text-red-500\">*<\/span> <\/label>\n       <div id=\"dropZone\" class=\"border-3 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-emerald-500 hover:bg-emerald-50 transition-all duration-200\"><input type=\"file\" id=\"paymentFile\" name=\"paymentFile\" required accept=\"image\/*,.pdf\" class=\"hidden\">\n        <svg class=\"w-16 h-16 mx-auto text-gray-400 mb-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"><\/path>\n        <\/svg>\n        <p class=\"text-lg font-medium text-gray-700 mb-1\">Click to upload or drag and drop<\/p>\n        <p class=\"text-sm text-gray-500\">JPG, PNG, or PDF (Max 5MB)<\/p>\n       <\/div>\n       <div id=\"filePreview\" class=\"mt-3 hidden\">\n        <div class=\"flex items-center justify-between bg-emerald-50 border border-emerald-200 rounded-lg p-3\">\n         <div class=\"flex items-center\">\n          <svg class=\"w-6 h-6 text-emerald-600 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n          <\/svg><span class=\"text-sm text-emerald-700 font-medium\" id=\"fileName\"><\/span>\n         <\/div><button type=\"button\" id=\"removeFile\" class=\"text-red-500 hover:text-red-700\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n          <\/svg><\/button>\n        <\/div>\n       <\/div>\n       <div class=\"mt-3 bg-blue-50 border-l-4 border-blue-400 p-3\">\n        <p class=\"text-sm text-blue-800\"><strong>\ud83d\udccc Note for Mahasarakham University participants:<\/strong> Please upload \u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e02\u0e2d\u0e15\u0e31\u0e14\u0e42\u0e2d\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e15\u0e49\u0e19\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14 (Budget transfer from affiliated department) instead of payment verification<\/p>\n       <\/div>\n      <\/div><!-- Invoice Details (Hidden by default) -->\n      <div id=\"invoiceDetails\" class=\"hidden space-y-4 border-2 border-emerald-200 rounded-lg p-5 bg-emerald-50\">\n       <h4 class=\"font-bold text-gray-800 text-lg mb-3\">Invoice Details<\/h4>\n       <div><label for=\"invoiceRecipient\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Invoice Recipient Name <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"invoiceRecipient\" name=\"invoiceRecipient\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n       <\/div>\n       <div><label for=\"invoiceOrganization\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Organization Name <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"invoiceOrganization\" name=\"invoiceOrganization\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n       <\/div>\n       <div><label for=\"billingAddress\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Billing Address <span class=\"text-red-500\">*<\/span> <\/label> <textarea id=\"billingAddress\" name=\"billingAddress\" rows=\"3\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\"><\/textarea>\n       <\/div>\n       <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div><label for=\"contactPerson\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Contact Person <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"text\" id=\"contactPerson\" name=\"contactPerson\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n        <\/div>\n        <div><label for=\"contactPhone\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Contact Phone <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"tel\" id=\"contactPhone\" name=\"contactPhone\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n        <\/div>\n       <\/div>\n       <div><label for=\"contactEmail\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Contact Email <span class=\"text-red-500\">*<\/span> <\/label> <input type=\"email\" id=\"contactEmail\" name=\"contactEmail\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n       <\/div>\n       <div><label for=\"invoiceInstructions\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Special Instructions (Optional) <\/label> <textarea id=\"invoiceInstructions\" name=\"invoiceInstructions\" rows=\"2\" placeholder=\"Any special requirements for the invoice\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\"><\/textarea>\n       <\/div>\n      <\/div>\n     <\/div>\n    <\/section><!-- Additional Requirements -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">7<\/span> Additional Requirements<\/h3>\n     <div class=\"space-y-4\">\n      <div><label class=\"block text-sm font-medium text-gray-700 mb-2\"> Dietary Requirements <\/label>\n       <div class=\"space-y-2\"><label class=\"flex items-center cursor-pointer\"> <input type=\"checkbox\" name=\"dietary\" value=\"vegetarian\" class=\"w-5 h-5 text-emerald-600 rounded\"> <span class=\"ml-2 text-gray-700\">Vegetarian<\/span> <\/label> <label class=\"flex items-center cursor-pointer\"> <input type=\"checkbox\" name=\"dietary\" value=\"vegan\" class=\"w-5 h-5 text-emerald-600 rounded\"> <span class=\"ml-2 text-gray-700\">Vegan<\/span> <\/label> <label class=\"flex items-center cursor-pointer\"> <input type=\"checkbox\" name=\"dietary\" value=\"halal\" class=\"w-5 h-5 text-emerald-600 rounded\"> <span class=\"ml-2 text-gray-700\">Halal<\/span> <\/label> <label class=\"flex items-center cursor-pointer\"> <input type=\"checkbox\" name=\"dietary\" value=\"gluten-free\" class=\"w-5 h-5 text-emerald-600 rounded\"> <span class=\"ml-2 text-gray-700\">Gluten-Free<\/span> <\/label> <label class=\"flex items-center cursor-pointer\"> <input type=\"checkbox\" name=\"dietary\" value=\"other\" id=\"dietaryOther\" class=\"w-5 h-5 text-emerald-600 rounded\"> <span class=\"ml-2 text-gray-700\">Other (please specify)<\/span> <\/label>\n       <\/div>\n       <div id=\"dietaryOtherText\" class=\"hidden mt-3\"><input type=\"text\" name=\"dietaryOtherDetails\" placeholder=\"Please specify your dietary requirements\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n       <\/div>\n      <\/div>\n      <div><label for=\"otherNotes\" class=\"block text-sm font-medium text-gray-700 mb-2\"> Other Notes or Special Requests (Optional) <\/label> <textarea id=\"otherNotes\" name=\"otherNotes\" rows=\"4\" placeholder=\"Any additional information you'd like to share\" class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\"><\/textarea>\n      <\/div>\n     <\/div>\n    <\/section><!-- Terms and Conditions -->\n    <section class=\"bg-white rounded-xl shadow-md p-6 form-section\">\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\"><span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">8<\/span> Terms and Conditions - Registration Agreement<\/h3>\n     <p class=\"text-gray-700 mb-4\">Please review and confirm your agreement to the following terms and conditions for BioSat 2026 registration:<\/p>\n     <div class=\"space-y-3 bg-gray-50 rounded-lg p-5 border-2 border-gray-200\"><label class=\"flex items-start cursor-pointer hover:bg-white p-2 rounded transition-colors\"> <input type=\"checkbox\" name=\"terms1\" required class=\"w-5 h-5 text-emerald-600 rounded mt-1 flex-shrink-0\"> <span class=\"ml-3 text-gray-700\"> I confirm that all information provided is accurate <span class=\"text-red-500\">*<\/span> <\/span> <\/label> <label class=\"flex items-start cursor-pointer hover:bg-white p-2 rounded transition-colors\"> <input type=\"checkbox\" name=\"terms2\" required class=\"w-5 h-5 text-emerald-600 rounded mt-1 flex-shrink-0\"> <span class=\"ml-3 text-gray-700\"> I understand that paper submissions must be completed separately through the Microsoft CMT platform <span class=\"text-red-500\">*<\/span> <\/span> <\/label> <label class=\"flex items-start cursor-pointer hover:bg-white p-2 rounded transition-colors\"> <input type=\"checkbox\" name=\"terms3\" required class=\"w-5 h-5 text-emerald-600 rounded mt-1 flex-shrink-0\"> <span class=\"ml-3 text-gray-700\"> I understand that registration is complete only after payment verification <span class=\"text-red-500\">*<\/span> <\/span> <\/label> <label class=\"flex items-start cursor-pointer hover:bg-white p-2 rounded transition-colors\"> <input type=\"checkbox\" name=\"terms4\" required class=\"w-5 h-5 text-emerald-600 rounded mt-1 flex-shrink-0\"> <span class=\"ml-3 text-gray-700\"> I consent to my data being used for conference purposes (certificate, communication) <span class=\"text-red-500\">*<\/span> <\/span> <\/label> <label class=\"flex items-start cursor-pointer hover:bg-white p-2 rounded transition-colors\"> <input type=\"checkbox\" name=\"terms5\" required class=\"w-5 h-5 text-emerald-600 rounded mt-1 flex-shrink-0\"> <span class=\"ml-3 text-gray-700\"> I consent to photography and video recording during the conference for promotional purposes <span class=\"text-red-500\">*<\/span> <\/span> <\/label>\n     <\/div>\n    <\/section><!-- Submit Button -->\n    <div class=\"text-center\"><button type=\"submit\" id=\"submitBtn\" class=\"bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold py-4 px-12 rounded-xl text-lg shadow-lg hover:from-emerald-600 hover:to-teal-700 transform hover:scale-105 transition-all duration-200\"> Submit Registration <\/button>\n    <\/div>\n   <\/form><!-- Success Modal -->\n   <div id=\"successModal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n    <div class=\"bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center\">\n     <div class=\"success-checkmark mb-4\">\n      <svg class=\"w-20 h-20 mx-auto text-emerald-500\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n      <\/svg>\n     <\/div>\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Registration Successful!<\/h3>\n     <p class=\"text-gray-600 mb-4\">Your registration ID is:<\/p>\n     <p id=\"registrationId\" class=\"text-3xl font-bold text-emerald-600 mb-4\"><\/p>\n     <p class=\"text-sm text-gray-600 mb-6\">A confirmation email has been sent to all team members and your supervisor. Please check your inbox for further instructions.<\/p><button onclick=\"location.reload()\" class=\"bg-emerald-500 text-white font-semibold py-3 px-8 rounded-lg hover:bg-emerald-600 transition-colors\"> Register Another Team <\/button>\n    <\/div>\n   <\/div><!-- Loading Modal -->\n   <div id=\"loadingModal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n    <div class=\"bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center\">\n     <div class=\"spinner mx-auto mb-4\"><\/div>\n     <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Processing Registration...<\/h3>\n     <p class=\"text-gray-600\">Please wait while we save your information.<\/p>\n    <\/div>\n   <\/div><!-- Error Modal -->\n   <div id=\"errorModal\" class=\"hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50\">\n    <div class=\"bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center\">\n     <svg class=\"w-20 h-20 mx-auto text-red-500 mb-4\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n     <\/svg>\n     <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Registration Failed<\/h3>\n     <p id=\"errorMessage\" class=\"text-gray-600 mb-6\"><\/p><button onclick=\"document.getElementById('errorModal').classList.add('hidden')\" class=\"bg-red-500 text-white font-semibold py-3 px-8 rounded-lg hover:bg-red-600 transition-colors\"> Close <\/button>\n    <\/div>\n   <\/div>\n  <\/main>\n  <script>\n    \/\/ Google Apps Script Web App URL\n    const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbx1eYSbRFmJoV9pCgKdyArriA6KoHB3fsAFZ5WOYXtvL9KyzgWXjf6CVFa_NIrpibqN\/exec';\n\n    \/\/ Generate unique registration ID\n    function generateRegistrationId() {\n      const timestamp = Date.now();\n      const random = Math.floor(Math.random() * 1000);\n      return `BIOSAT2026-S8-${timestamp}-${random}`;\n    }\n\n    \/\/ Handle student count change\n    document.getElementById('studentCount').addEventListener('change', function() {\n      const count = parseInt(this.value);\n      const studentsSection = document.getElementById('studentsSection');\n      studentsSection.innerHTML = '';\n\n      for (let i = 1; i <= count; i++) {\n        const studentCard = createStudentCard(i);\n        studentsSection.innerHTML += studentCard;\n      }\n    });\n\n    \/\/ Create student card HTML\n    function createStudentCard(number) {\n      return `\n        <div class=\"bg-white rounded-xl shadow-md p-6 student-card\">\n          <h3 class=\"text-2xl font-bold text-gray-800 mb-4 flex items-center\">\n            <span class=\"bg-emerald-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 text-lg\">2<\/span>\n            Student ${number} Information\n          <\/h3>\n          \n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\n            <div>\n              <label for=\"student${number}Title\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Title <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <select id=\"student${number}Title\" name=\"student${number}Title\" required \n                      class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n                <option value=\"\">Select<\/option>\n                <option value=\"Mr.\">Mr.<\/option>\n                <option value=\"Ms.\">Ms.<\/option>\n                <option value=\"Mrs.\">Mrs.<\/option>\n              <\/select>\n            <\/div>\n            \n            <div>\n              <label for=\"student${number}FirstName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                First Name <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}FirstName\" name=\"student${number}FirstName\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n            \n            <div>\n              <label for=\"student${number}LastName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Last Name <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}LastName\" name=\"student${number}LastName\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n          <\/div>\n          \n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n            <div>\n              <label for=\"student${number}Grade\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Grade Level <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}Grade\" name=\"student${number}Grade\" required \n                     placeholder=\"e.g., Grade 10\"\n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n            \n            <div>\n              <label for=\"student${number}School\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                School Name <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}School\" name=\"student${number}School\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n          <\/div>\n          \n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n            <div>\n              <label for=\"student${number}City\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                City <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}City\" name=\"student${number}City\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n            \n            <div>\n              <label for=\"student${number}Country\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Country <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"text\" id=\"student${number}Country\" name=\"student${number}Country\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n          <\/div>\n          \n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <div>\n              <label for=\"student${number}Email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Email <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"email\" id=\"student${number}Email\" name=\"student${number}Email\" required \n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n            \n            <div>\n              <label for=\"student${number}Phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                Phone Number <span class=\"text-red-500\">*<\/span>\n              <\/label>\n              <input type=\"tel\" id=\"student${number}Phone\" name=\"student${number}Phone\" required \n                     placeholder=\"+66-XXX-XXX-XXX\"\n                     class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-lg\">\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    \/\/ Handle invoice requirement toggle\n    document.getElementById('invoiceYes').addEventListener('change', function() {\n      if (this.checked) {\n        document.getElementById('invoiceDetails').classList.remove('hidden');\n      }\n    });\n\n    document.getElementById('invoiceNo').addEventListener('change', function() {\n      if (this.checked) {\n        document.getElementById('invoiceDetails').classList.add('hidden');\n      }\n    });\n\n    \/\/ Handle dietary other checkbox\n    document.getElementById('dietaryOther').addEventListener('change', function() {\n      if (this.checked) {\n        document.getElementById('dietaryOtherText').classList.remove('hidden');\n      } else {\n        document.getElementById('dietaryOtherText').classList.add('hidden');\n      }\n    });\n\n    \/\/ Handle file upload - drag and drop functionality\n    const dropZone = document.getElementById('dropZone');\n    const fileInput = document.getElementById('paymentFile');\n    const filePreview = document.getElementById('filePreview');\n    const fileName = document.getElementById('fileName');\n    const removeFileBtn = document.getElementById('removeFile');\n\n    \/\/ Click to upload\n    dropZone.addEventListener('click', () => {\n      fileInput.click();\n    });\n\n    \/\/ Prevent default drag behaviors\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n      dropZone.addEventListener(eventName, preventDefaults, false);\n      document.body.addEventListener(eventName, preventDefaults, false);\n    });\n\n    function preventDefaults(e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n\n    \/\/ Highlight drop zone when dragging over it\n    ['dragenter', 'dragover'].forEach(eventName => {\n      dropZone.addEventListener(eventName, () => {\n        dropZone.classList.add('border-emerald-500', 'bg-emerald-50');\n      });\n    });\n\n    ['dragleave', 'drop'].forEach(eventName => {\n      dropZone.addEventListener(eventName, () => {\n        dropZone.classList.remove('border-emerald-500', 'bg-emerald-50');\n      });\n    });\n\n    \/\/ Handle dropped files\n    dropZone.addEventListener('drop', (e) => {\n      const files = e.dataTransfer.files;\n      if (files.length > 0) {\n        fileInput.files = files;\n        handleFileSelect(files[0]);\n      }\n    });\n\n    \/\/ Handle file selection via input\n    fileInput.addEventListener('change', function() {\n      if (this.files.length > 0) {\n        handleFileSelect(this.files[0]);\n      }\n    });\n\n    \/\/ Handle file selection\n    function handleFileSelect(file) {\n      fileName.textContent = file.name;\n      filePreview.classList.remove('hidden');\n      dropZone.classList.add('hidden');\n    }\n\n    \/\/ Remove file\n    removeFileBtn.addEventListener('click', (e) => {\n      e.stopPropagation();\n      fileInput.value = '';\n      filePreview.classList.add('hidden');\n      dropZone.classList.remove('hidden');\n    });\n\n    \/\/ Convert file to base64\n    function fileToBase64(file) {\n      return new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.readAsDataURL(file);\n        reader.onload = () => resolve(reader.result);\n        reader.onerror = error => reject(error);\n      });\n    }\n\n    \/\/ Handle form submission\n    document.getElementById('registrationForm').addEventListener('submit', async function(e) {\n      e.preventDefault();\n      \n      \/\/ Show loading modal\n      document.getElementById('loadingModal').classList.remove('hidden');\n      \n      try {\n        \/\/ Generate registration ID\n        const registrationId = generateRegistrationId();\n        \n        \/\/ Collect form data\n        const formData = new FormData(this);\n        const data = {\n          registrationId: registrationId,\n          studentCount: formData.get('studentCount')\n        };\n        \n        \/\/ Collect student data\n        const studentCount = parseInt(formData.get('studentCount'));\n        for (let i = 1; i <= studentCount; i++) {\n          data[`student${i}Title`] = formData.get(`student${i}Title`);\n          data[`student${i}FirstName`] = formData.get(`student${i}FirstName`);\n          data[`student${i}LastName`] = formData.get(`student${i}LastName`);\n          data[`student${i}Grade`] = formData.get(`student${i}Grade`);\n          data[`student${i}School`] = formData.get(`student${i}School`);\n          data[`student${i}City`] = formData.get(`student${i}City`);\n          data[`student${i}Country`] = formData.get(`student${i}Country`);\n          data[`student${i}Email`] = formData.get(`student${i}Email`);\n          data[`student${i}Phone`] = formData.get(`student${i}Phone`);\n        }\n        \n        \/\/ Collect project data\n        data.paperID = formData.get('paperID');\n        data.projectTitle = formData.get('projectTitle');\n        \n        \/\/ Collect supervisor data\n        data.supervisorTitle = formData.get('supervisorTitle');\n        data.supervisorFirstName = formData.get('supervisorFirstName');\n        data.supervisorLastName = formData.get('supervisorLastName');\n        data.supervisorPosition = formData.get('supervisorPosition');\n        data.supervisorDept = formData.get('supervisorDept');\n        data.supervisorSchool = formData.get('supervisorSchool');\n        data.supervisorEmail = formData.get('supervisorEmail');\n        data.supervisorPhone = formData.get('supervisorPhone');\n        \n        \/\/ Collect visa and invoice data\n        data.visaRequired = formData.get('visaRequired');\n        data.invoiceRequired = formData.get('invoiceRequired');\n        \n        if (data.invoiceRequired === 'yes') {\n          data.invoiceRecipient = formData.get('invoiceRecipient');\n          data.invoiceOrganization = formData.get('invoiceOrganization');\n          data.billingAddress = formData.get('billingAddress');\n          data.contactPerson = formData.get('contactPerson');\n          data.contactPhone = formData.get('contactPhone');\n          data.contactEmail = formData.get('contactEmail');\n          data.invoiceInstructions = formData.get('invoiceInstructions');\n        }\n        \n        \/\/ Collect dietary requirements\n        const dietaryCheckboxes = document.querySelectorAll('input[name=\"dietary\"]:checked');\n        const dietaryRequirements = Array.from(dietaryCheckboxes).map(cb => cb.value);\n        data.dietaryRequirements = dietaryRequirements.join(', ') || 'none';\n        data.dietaryOtherText = formData.get('dietaryOtherDetails') || '';\n        \n        \/\/ Collect other notes\n        data.otherNotes = formData.get('otherNotes') || '';\n        \n        \/\/ Handle payment file\n        const paymentFile = document.getElementById('paymentFile').files[0];\n        if (paymentFile) {\n          const base64File = await fileToBase64(paymentFile);\n          data.paymentFile = base64File;\n          data.paymentFileName = paymentFile.name;\n        }\n        \n        \/\/ Send data to Google Apps Script\n        const response = await fetch(SCRIPT_URL, {\n          method: 'POST',\n          mode: 'no-cors',\n          headers: {\n            'Content-Type': 'application\/json',\n          },\n          body: JSON.stringify(data)\n        });\n        \n        \/\/ Hide loading modal\n        document.getElementById('loadingModal').classList.add('hidden');\n        \n        \/\/ Show success modal\n        document.getElementById('registrationId').textContent = registrationId;\n        document.getElementById('successModal').classList.remove('hidden');\n        \n      } catch (error) {\n        console.error('Error:', error);\n        \n        \/\/ Hide loading modal\n        document.getElementById('loadingModal').classList.add('hidden');\n        \n        \/\/ Show error modal\n        document.getElementById('errorMessage').textContent = 'An error occurred while submitting your registration. Please try again or contact support.';\n        document.getElementById('errorModal').classList.remove('hidden');\n      }\n    });\n  <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'99bd0fb7402e7dc6',t:'MTc2MjY4ODcwMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":637,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-493","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/pages\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=493"}],"version-history":[{"count":2,"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/pages\/493\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/pages\/493\/revisions\/495"}],"up":[{"embeddable":true,"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=\/wp\/v2\/pages\/637"}],"wp:attachment":[{"href":"https:\/\/biosat.msu.ac.th\/2025\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}