{"id":4863,"date":"2026-03-31T14:08:47","date_gmt":"2026-03-31T07:08:47","guid":{"rendered":"https:\/\/badak.or.id\/?page_id=4863"},"modified":"2026-04-08T21:10:01","modified_gmt":"2026-04-08T14:10:01","slug":"join-paid-volunteers","status":"publish","type":"page","link":"https:\/\/badak.or.id\/en\/join-paid-volunteers\/","title":{"rendered":"Join Paid Volunteers"},"content":{"rendered":"<section class=\"l-section wpb_row height_small color_alternate\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_middle type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"g-cols wpb_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-6 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h1 class=\"w-post-elm post_title us_custom_607cd7e8 entry-title color_link_inherit\">Join Paid Volunteers<\/h1><\/div><\/div><\/div><div class=\"vc_col-sm-6 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h3 class=\"w-text us_custom_f03ee871\"><a href=\"https:\/\/badak.or.id\/paid-volunteer-conservation-experience\/\" class=\"w-text-h\"><span class=\"w-text-value\">More Info About Paid Volunteers<\/span><\/a><\/h3><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section><section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"w-separator size_medium\"><\/div><div class=\"g-cols wpb_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\">\r\n    <div class=\"yabi-frontend-wrap\" id=\"yabi-volunteer-wrap\" style=\"position: relative; z-index: 1; clear: both; overflow: visible;\">\r\n\r\n                <!-- Debug info \r\n        <p style=\"background:#ff0;padding:5px;\">Debug: cost_1week=1500, cost_2week=2500<\/p>-->\r\n        \r\n                <!-- REGISTRATION FORM -->\r\n        <div class=\"yabi-form-section\">\r\n            <div class=\"yabi-form-header\">\r\n                <h2>Join as a Paid Volunteer<\/h2>\r\n                <p>Experience Rhino conservation firsthand. Join our volunteer program and make a real difference.<\/p>\r\n            <\/div>\r\n\r\n            <!-- STEP INDICATOR \r\n            <div class=\"yabi-steps\">\r\n                <div class=\"yabi-step active\" data-step=\"1\">\r\n                    <span class=\"yabi-step-num\">1<\/span>\r\n                    <span class=\"yabi-step-label\">Choose Activity<\/span>\r\n                <\/div>\r\n                <div class=\"yabi-step-line\"><\/div>\r\n                <div class=\"yabi-step\" data-step=\"2\">\r\n                    <span class=\"yabi-step-num\">2<\/span>\r\n                    <span class=\"yabi-step-label\">Your Details<\/span>\r\n                <\/div>\r\n                <div class=\"yabi-step-line\"><\/div>\r\n                <div class=\"yabi-step\" data-step=\"3\">\r\n                    <span class=\"yabi-step-num\">3<\/span>\r\n                    <span class=\"yabi-step-label\">Review & Pay<\/span>\r\n                <\/div>\r\n            <\/div> -->\r\n\r\n            <form method=\"post\" id=\"yabi-volunteer-form\" class=\"yabi-form\">\r\n                <input type=\"hidden\" id=\"yabi_volunteer_nonce\" name=\"yabi_volunteer_nonce\" value=\"1101f4d9a6\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/4863\" \/>\r\n                <!-- STEP 1: SELECT ACTIVITY -->\r\n                <div class=\"yabi-form-step\" id=\"vol-step-1\">\r\n                    <h3>Step 1: Choose Your Activity Duration<\/h3>\r\n                                        <p class=\"yabi-exchange-rate-info\">\ud83d\udcb1 Exchange Rate: 1 USD = 16,897 IDR<\/p>\r\n                    \r\n                    <div class=\"yabi-activity-grid\">\r\n                        <!-- 1 Week Card -->\r\n                        <div class=\"yabi-activity-card\" data-activity=\"1 Week\" data-cost=\"1500\">\r\n                            <div class=\"yabi-activity-icon\">\ud83c\udf31<\/div>\r\n                            <h4>1 Week<\/h4>\r\n                            <div class=\"yabi-activity-price\">$1,500.00<\/div>\r\n                            <ul class=\"yabi-activity-features\">\r\n                                <li>\u2713 7 days Experience<\/li>\r\n                                \r\n                            <\/ul>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-activity\" \r\n                                    data-activity=\"1 Week\"\r\n                                    onclick=\"var c=this.closest('.yabi-activity-card');document.querySelectorAll('.yabi-activity-card').forEach(function(x){x.classList.remove('selected')});c.classList.add('selected');document.getElementById('selected-activity').value='1 Week';document.getElementById('vol-date-section').style.display='block';document.getElementById('vol-step1-next').disabled=false;document.getElementById('vol-date-start').value='';document.getElementById('vol-date-finish').value='';loadVolunteerSchedules('1 Week')\">\r\n                                Select 1 Week\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                        <!-- 2 Week Card -->\r\n                        <div class=\"yabi-activity-card\" data-activity=\"2 Week\" data-cost=\"2500\">\r\n                           <!-- <div class=\"yabi-activity-badge-top\">Most Popular<\/div>-->\r\n                            <div class=\"yabi-activity-icon\">\ud83c\udf33<\/div>\r\n                            <h4>2 Weeks<\/h4>\r\n                            <div class=\"yabi-activity-price\">$2,500.00<\/div>\r\n                            <ul class=\"yabi-activity-features\">\r\n                                <li>\u2713 14 days Experience<\/li>\r\n\r\n                            <\/ul>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-activity\" \r\n                                    data-activity=\"2 Week\"\r\n                                    onclick=\"var c=this.closest('.yabi-activity-card');document.querySelectorAll('.yabi-activity-card').forEach(function(x){x.classList.remove('selected')});c.classList.add('selected');document.getElementById('selected-activity').value='2 Week';document.getElementById('vol-date-section').style.display='block';document.getElementById('vol-step1-next').disabled=false;document.getElementById('vol-date-start').value='';document.getElementById('vol-date-finish').value='';loadVolunteerSchedules('2 Week')\">\r\n                                Select 2 Weeks\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <input type=\"hidden\" name=\"activities\" id=\"selected-activity\" required>\r\n\r\n                    <div class=\"yabi-date-section\" id=\"vol-date-section\" style=\"display:none;\">\r\n                        <h4>\ud83d\udcc5 Select Your Dates<\/h4>\r\n                        <div id=\"vol-schedule-loading\" style=\"display:none;text-align:center;padding:20px;\">\r\n                            <span class=\"spinner is-active\" style=\"float:none;\"><\/span> Loading available dates...\r\n                        <\/div>\r\n                        <div id=\"vol-schedule-error\" class=\"yabi-alert yabi-alert-error\" style=\"display:none;\"><\/div>\r\n                        <div id=\"vol-schedule-options\" class=\"yabi-schedule-grid\" style=\"display:none;\">\r\n                            <!-- Schedule options will be loaded dynamically as radio -->\r\n                        <\/div>\r\n                        <input type=\"hidden\" name=\"date_start\" id=\"vol-date-start\" required>\r\n                        <input type=\"hidden\" name=\"date_finish\" id=\"vol-date-finish\">\r\n                    <\/div>\r\n\r\n                    <div class=\"yabi-step-nav\">\r\n                                                <button type=\"button\" class=\"yabi-btn yabi-btn-next\" data-next=\"2\" id=\"vol-step1-next\" disabled\r\n                                onclick=\"var s=document.getElementById('vol-date-start');if(!s||!s.value){alert('Please select a schedule dates.');return false;}document.getElementById('vol-step-1').style.display='none';document.getElementById('vol-step-2').style.display='block';\">\r\n                            Next: Your Details \u2192\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- STEP 2: PERSONAL DETAILS -->\r\n                <div class=\"yabi-form-step\" id=\"vol-step-2\" style=\"display:none;\">\r\n                    <h3>Step 2: Your Personal Details<\/h3>\r\n\r\n                    <!-- Selected Summary -->\r\n                    <div class=\"yabi-selection-summary\" id=\"vol-selection-summary\"><\/div>\r\n\r\n                    <div class=\"yabi-form-grid\">\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>First Name <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"text\" name=\"first_name\" required placeholder=\"First Name\">\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Last Name <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"text\" name=\"last_name\" required placeholder=\"Last Name\">\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Mobile Phone <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"tel\" name=\"mobile_phone\" required placeholder=\"+62 xxx xxxx xxxx\">\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Email Address <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"email\" name=\"email\" required placeholder=\"your@email.com\">\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Date of Birth <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"date\" name=\"date_of_birth\" required>\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Sex <span class=\"req\">*<\/span><\/label>\r\n                            <select name=\"sex\" required>\r\n                                <option value=\"\">-- Select --<\/option>\r\n                                <option value=\"Male\">Male<\/option>\r\n                                <option value=\"Female\">Female<\/option>\r\n                                <option value=\"Prefer not to say\">Prefer not to say<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>Country <span class=\"req\">*<\/span><\/label>\r\n                            <select name=\"country\" required>\r\n                                <option value=\"\">-- Select Country --<\/option>\r\n                                <option value=\"Indonesia\">Indonesia<\/option>\r\n                                <option value=\"Malaysia\">Malaysia<\/option>\r\n                                <option value=\"Singapore\">Singapore<\/option>\r\n                                <option value=\"Thailand\">Thailand<\/option>\r\n                                <option value=\"Vietnam\">Vietnam<\/option>\r\n                                <option value=\"Philippines\">Philippines<\/option>\r\n                                <option value=\"Australia\">Australia<\/option>\r\n                                <option value=\"New Zealand\">New Zealand<\/option>\r\n                                <option value=\"United Kingdom\">United Kingdom<\/option>\r\n                                <option value=\"United States\">United States<\/option>\r\n                                <option value=\"Canada\">Canada<\/option>\r\n                                <option value=\"Germany\">Germany<\/option>\r\n                                <option value=\"France\">France<\/option>\r\n                                <option value=\"Netherlands\">Netherlands<\/option>\r\n                                <option value=\"Japan\">Japan<\/option>\r\n                                <option value=\"South Korea\">South Korea<\/option>\r\n                                <option value=\"China\">China<\/option>\r\n                                <option value=\"India\">India<\/option>\r\n                                <option value=\"Other\">Other<\/option>\r\n                            <\/select>\r\n                            <input type=\"text\" name=\"country_other\" id=\"country_other\" \r\n                                   class=\"yabi-form-input\" \r\n                                   placeholder=\"Please specify your country\"\r\n                                   style=\"display:none; margin-top:10px;\">\r\n                        <\/div>\r\n                        <div class=\"yabi-field-group\">\r\n                            <label>ID Number (Passport \/ KTP) <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"text\" name=\"id_number\" required placeholder=\"Passport or National ID number\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"yabi-step-nav\">\r\n                        <button type=\"button\" class=\"yabi-btn yabi-btn-prev\" data-prev=\"1\" onclick=\"document.getElementById('vol-step-2').style.display='none';document.getElementById('vol-step-1').style.display='block';\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"yabi-btn yabi-btn-next\" data-next=\"3\" id=\"vol-step2-next\" onclick=\"var f=document.getElementById('yabi-volunteer-form');var req=f.querySelectorAll('#vol-step-2 [required]');for(var i=0;i<req.length;i++){if(!req[i].value){alert('Please fill all required fields');return false;}}var act=document.getElementById('selected-activity').value;var dateStart=document.getElementById('vol-date-start').value;var dateFinish=document.getElementById('vol-date-finish').value;var fname=document.querySelector('[name=&quot;first_name&quot;]').value;var lname=document.querySelector('[name=&quot;last_name&quot;]').value;var email=document.querySelector('[name=&quot;email&quot;]').value;var phone=document.querySelector('[name=&quot;mobile_phone&quot;]').value;var country=document.querySelector('[name=&quot;country&quot;]').value;var idNum=document.querySelector('[name=&quot;id_number&quot;]').value;var summary='<table class=yabi-review-table>';summary+='<tr><td>Activity<\/td><td><strong>'+act+'<\/strong><\/td><\/tr>';summary+='<tr><td>Date Start<\/td><td>'+dateStart+'<\/td><\/tr>';summary+='<tr><td>Date Finish<\/td><td>'+(dateFinish||'TBD')+'<\/td><\/tr>';summary+='<tr><td>Name<\/td><td>'+fname+' '+lname+'<\/td><\/tr>';summary+='<tr><td>Email<\/td><td>'+email+'<\/td><\/tr>';summary+='<tr><td>Phone<\/td><td>'+phone+'<\/td><\/tr>';summary+='<tr><td>Country<\/td><td>'+country+'<\/td><\/tr>';summary+='<tr><td>ID Number<\/td><td>'+idNum+'<\/td><\/tr>';summary+='<\/table>';document.getElementById('vol-review-summary').innerHTML=summary;document.getElementById('vol-step-2').style.display='none';document.getElementById('vol-step-3').style.display='block';\">\r\n                            Review & Pay \u2192\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- STEP 3: REVIEW & PAYMENT -->\r\n                <div class=\"yabi-form-step\" id=\"vol-step-3\" style=\"display:none;\">\r\n                    <h3>Step 3: Review & Payment<\/h3>\r\n                    <div id=\"vol-review-summary\" class=\"yabi-review-box\"><\/div>\r\n                    <div class=\"yabi-terms\">\r\n                        <label>\r\n                            <input type=\"checkbox\" id=\"yabi-volunteer-terms\" required>\r\n                            I agree to the <a href=\"#\" target=\"_blank\">Terms & Conditions<\/a>. I understand the physical requirements and health conditions for this volunteer program.\r\n                        <\/label>\r\n                    <\/div>\r\n                    <div class=\"yabi-step-nav\">\r\n                        <button type=\"button\" class=\"yabi-btn yabi-btn-prev\" data-prev=\"2\" onclick=\"document.getElementById('vol-step-3').style.display='none';document.getElementById('vol-step-2').style.display='block';\">\u2190 Back<\/button>\r\n                        <button type=\"submit\" name=\"yabi_volunteer_submit\" class=\"yabi-btn yabi-btn-submit\" id=\"vol-submit-btn\">\r\n                            \u2705 Confirm & Proceed to Payment\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/form>\r\n        <\/div>\r\n                    <\/div>\r\n\r\n    <script type=\"text\/javascript\">\r\n    \/\/ Global function to load schedules - defined FIRST so it's available for onclick\r\n    function loadVolunteerSchedules(activities) {\r\n        console.log('Loading schedules for:', activities);\r\n        console.log('yabiRhino:', typeof yabiRhino !== 'undefined' ? yabiRhino : 'NOT DEFINED');\r\n        \r\n        var container = document.getElementById('vol-schedule-options');\r\n        var loading = document.getElementById('vol-schedule-loading');\r\n        var error = document.getElementById('vol-schedule-error');\r\n        \r\n        if (!loading || !container) {\r\n            console.log('ERROR: Schedule elements not found');\r\n            console.log('loading:', loading, 'container:', container);\r\n            return;\r\n        }\r\n        \r\n        loading.style.display = 'block';\r\n        container.style.display = 'none';\r\n        if (error) error.style.display = 'none';\r\n        \r\n        var ajaxUrl = 'https:\/\/badak.or.id\/wp-admin\/admin-ajax.php';\r\n        console.log('Ajax URL:', ajaxUrl);\r\n        \r\n        var formData = new FormData();\r\n        formData.append('action', 'yabi_get_volunteer_schedules');\r\n        formData.append('activities', activities);\r\n        \r\n        fetch(ajaxUrl, {\r\n            method: 'POST',\r\n            body: formData\r\n        })\r\n        .then(function(response) { \r\n            console.log('Response status:', response.status);\r\n            return response.json(); \r\n        })\r\n.then(function(response) {\r\n            console.log('Response:', response);\r\n            loading.style.display = 'none';\r\n            if (response.success && response.data && response.data.length > 0) {\r\n                var html = '<div class=\"yabi-schedule-radio-list\">';\r\n                response.data.forEach(function(schedule) {\r\n                    var startDate = new Date(schedule.date_start);\r\n                    var finishDate = new Date(schedule.date_finish);\r\n                    var startFormatted = startDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });\r\n                    var finishFormatted = finishDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });\r\n                    \r\n                    html += '<label class=\"yabi-schedule-radio\" onclick=\"this.querySelector(\\'input\\').checked=true;var v=this.querySelector(\\'input\\').value.split(\\'|\\');document.getElementById(\\'vol-date-start\\').value=v[0];document.getElementById(\\'vol-date-finish\\').value=v[1];document.getElementById(\\'vol-step1-next\\').disabled=false;document.getElementById(\\'vol-step1-next\\').classList.remove(\\'yabi-btn-disabled\\')\">';\r\n                    html += '<input type=\"radio\" name=\"schedule_selection\" value=\"' + schedule.date_start + '|' + schedule.date_finish + '\">';\r\n                    html += '<span class=\"yabi-schedule-radio-content\">';\r\n                    html += '<span class=\"yabi-radio-custom\"><\/span>';\r\n                    html += '<span class=\"yabi-radio-dates\">' + startFormatted + ' - ' + finishFormatted + '<\/span>';\r\n                    html += '<span class=\"yabi-radio-check\">\u2713<\/span>';\r\n                    html += '<\/span>';\r\n                    html += '<\/label>';\r\n                });\r\n                html += '<\/div>';\r\n                container.innerHTML = html;\r\n                container.style.display = 'block';\r\n                html += '<\/div>';\r\n                container.innerHTML = html;\r\n                container.style.display = 'block';\r\n                \r\n                \/\/ Add click handlers for radio selection\r\n                container.querySelectorAll('input[name=\"schedule_selection\"]').forEach(function(radio) {\r\n                    radio.addEventListener('change', function() {\r\n                        var values = this.value.split('|');\r\n                        document.getElementById('vol-date-start').value = values[0];\r\n                        document.getElementById('vol-date-finish').value = values[1];\r\n                    });\r\n                });\r\n            } else if (response.data && response.data.length === 0) {\r\n                container.innerHTML = '<p style=\"color:#f39c12;\">No schedules available for ' + activities + '. Please contact administrator.<\/p>';\r\n                container.style.display = 'block';\r\n            } else {\r\n                console.log('Error response:', response);\r\n                if (error) {\r\n                    error.innerHTML = 'Failed to load schedules: ' + (response.data || 'Unknown error');\r\n                    error.style.display = 'block';\r\n                }\r\n            }\r\n        })\r\n        .catch(function(err) {\r\n            loading.style.display = 'none';\r\n            console.log('AJAX Error:', err);\r\n            if (error) {\r\n                error.innerHTML = 'Error loading schedules: ' + err.message;\r\n                error.style.display = 'block';\r\n            }\r\n        });\r\n    }\r\n    \r\n    \/\/ Activity selection handler\r\n    window.selectVolunteerActivity = function(element, activityName) {\r\n        alert('Activity selected: ' + activityName);\r\n        \r\n        var card = element.closest('.yabi-activity-card');\r\n        document.querySelectorAll('.yabi-activity-card').forEach(function(c) {\r\n            c.classList.remove('selected');\r\n        });\r\n        card.classList.add('selected');\r\n        \r\n        var hiddenInput = document.getElementById('selected-activity');\r\n        if (hiddenInput) hiddenInput.value = activityName;\r\n        \r\n        var dateSection = document.getElementById('vol-date-section');\r\n        if (dateSection) dateSection.style.display = 'block';\r\n        \r\n        var nextBtn = document.getElementById('vol-step1-next');\r\n        if (nextBtn) {\r\n            nextBtn.disabled = false;\r\n            nextBtn.classList.remove('yabi-btn-disabled');\r\n        }\r\n        \r\n        loadVolunteerSchedules(activityName);\r\n    };\r\n    <\/script>\r\n    \r\n    <script type=\"text\/javascript\">\r\n    \/\/ Debug: Log form submission\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        var form = document.getElementById('yabi-volunteer-form');\r\n        if (form) {\r\n            console.log('Form found!');\r\n            \r\n            \/\/ Country: Show\/hide Other field\r\n            var countrySelect = document.querySelector('select[name=&quot;country&quot;]');\r\n            var countryOther = document.getElementById('country_other');\r\n            if (countrySelect && countryOther) {\r\n                countrySelect.addEventListener('change', function() {\r\n                    if (this.value === 'Other') {\r\n                        countryOther.style.display = 'block';\r\n                        countryOther.setAttribute('required', 'required');\r\n                    } else {\r\n                        countryOther.style.display = 'none';\r\n                        countryOther.removeAttribute('required');\r\n                        countryOther.value = '';\r\n                    }\r\n                });\r\n            }\r\n            \r\n            form.addEventListener('submit', function(e) {\r\n                console.log('VOLUNTEER FORM SUBMITTED!');\r\n            });\r\n        } else {\r\n            console.log('FORM NOT FOUND!');\r\n        }\r\n    });\r\n    <\/script>\r\n        \r\n        <script type=\"text\/javascript\">\r\n        \/\/ jQuery handlers for activity selection and form navigation\r\n        if (typeof jQuery !== 'undefined') {\r\n        jQuery(document).ready(function($) {\r\n        var selectedActivity = { name: '', cost: '', costFormatted: '' };\r\n        var volunteerCurrency = 'USD';\r\n        var volunteerExchangeRate = 16897;\r\n        var volunteerExchangeRateFormatted = volunteerExchangeRate.toLocaleString('id-ID');\r\n        var activityDays     = { '1 Week': 7, '2 Week': 14 };\r\n\r\n        \/\/ ---- ACTIVITY SELECTION (jQuery backup) ----\r\n        $('.yabi-btn-select-activity').on('click', function() {\r\n            \/\/ This is handled by the inline onclick, but we keep this as backup\r\n            var card = $(this).closest('.yabi-activity-card');\r\n            $('.yabi-activity-card').removeClass('selected');\r\n            card.addClass('selected');\r\n            selectedActivity.name          = card.data('activity');\r\n            selectedActivity.cost          = card.data('cost');\r\n            selectedActivity.costFormatted = card.find('.yabi-activity-price').text();\r\n            $('#selected-activity').val(selectedActivity.name);\r\n            $('#vol-date-section').show();\r\n            $('#vol-step1-next').prop('disabled', false);\r\n        });\r\n\r\n        \/\/ Auto-calculate finish date when start date changes\r\n            $('#vol-date-start').off('change').on('change', function() {\r\n                var startDate = $(this).val();\r\n                if (startDate) {\r\n                    var days     = activityDays[selectedActivity.name] || 7;\r\n                    var start    = new Date(startDate);\r\n                    start.setDate(start.getDate() + days);\r\n                    var finishDate = start.toISOString().split('T')[0];\r\n                    $('#vol-date-finish').val(finishDate);\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ ---- STEP NAVIGATION ----\r\n        $('.yabi-btn-next').on('click', function() {\r\n            var nextStep = $(this).data('next');\r\n            var curStep  = nextStep - 1;\r\n\r\n            \/\/ Validate step 1 date\r\n            if (curStep === 1) {\r\n                if (!$('#vol-date-start').val()) {\r\n                    alert('Please select a start date.');\r\n                    return;\r\n                }\r\n            }\r\n\r\n            \/\/ Validate step 2 fields\r\n            if (curStep === 2) {\r\n                var valid = true;\r\n                $('#vol-step-2 [required]').each(function() {\r\n                    if (!$(this).val()) {\r\n                        $(this).addClass('yabi-field-error');\r\n                        valid = false;\r\n                    } else {\r\n                        $(this).removeClass('yabi-field-error');\r\n                    }\r\n                });\r\n                if (!valid) {\r\n                    alert('Please fill in all required fields.');\r\n                    return;\r\n                }\r\n            }\r\n\r\n            \/\/ Update selection summary for step 2\r\n            if (nextStep === 2) {\r\n                $('#vol-selection-summary').html(\r\n                    '<div class=\"yabi-summary-pill\">\ud83c\udf3f ' + selectedActivity.name + '<\/div>' +\r\n                    '<div class=\"yabi-summary-pill\">\ud83d\udcb0 ' + selectedActivity.costFormatted + '<\/div>' +\r\n                    '<div class=\"yabi-summary-pill\">\ud83d\udcc5 ' + $('#vol-date-start').val() + ' \u2192 ' + ($('#vol-date-finish').val() || 'TBD') + '<\/div>'\r\n                );\r\n            }\r\n\r\n            \/\/ Build review for step 3\r\n            if (nextStep === 3) {\r\n                var firstName = $('[name=\"first_name\"]').val();\r\n                var lastName  = $('[name=\"last_name\"]').val();\r\n                var email     = $('[name=\"email\"]').val();\r\n                var phone     = $('[name=\"mobile_phone\"]').val();\r\n                var country   = $('[name=\"country\"]').val();\r\n                var idNum     = $('[name=\"id_number\"]').val();\r\n                var dob       = $('[name=\"date_of_birth\"]').val();\r\n                var sex       = $('[name=\"sex\"]').val();\r\n\r\n                $('#vol-review-summary').html(\r\n                    '<table class=\"yabi-review-table\">' +\r\n                    '<tr><td>\ud83c\udf3f Activity<\/td><td><strong>' + selectedActivity.name + '<\/strong><\/td><\/tr>' +\r\n                    '<tr><td>\ud83d\udcc5 Date Start<\/td><td>' + $('#vol-date-start').val() + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83d\udcc5 Date Finish<\/td><td>' + ($('#vol-date-finish').val() || 'TBD') + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83d\udcb0 Cost<\/td><td><strong class=\"yabi-amount\">' + selectedActivity.costFormatted + '<\/strong><\/td><\/tr>' +\r\n                    (volunteerCurrency === 'USD' ? '<tr><td>\ud83d\udcb1 Exchange Rate<\/td><td>1 USD = ' + volunteerExchangeRateFormatted + ' IDR<\/td><\/tr>' : '') +\r\n                    '<tr><td>\ud83d\udc64 Name<\/td><td>' + firstName + ' ' + lastName + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83d\udce7 Email<\/td><td>' + email + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83d\udcf1 Phone<\/td><td>' + phone + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83c\udf82 Date of Birth<\/td><td>' + dob + '<\/td><\/tr>' +\r\n                    '<tr><td>\u26a7 Sex<\/td><td>' + sex + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83c\udf0d Country<\/td><td>' + country + '<\/td><\/tr>' +\r\n                    '<tr><td>\ud83e\udeaa ID Number<\/td><td>' + idNum + '<\/td><\/tr>' +\r\n                    '<\/table>'\r\n                );\r\n            }\r\n\r\n            $('.yabi-form-step').hide();\r\n            $('#vol-step-' + nextStep).show();\r\n            updateVolStepIndicator(nextStep);\r\n            $('html, body').animate({ scrollTop: $('#yabi-volunteer-wrap').offset().top - 50 }, 400);\r\n        });\r\n\r\n        $('.yabi-btn-prev').on('click', function() {\r\n            var prevStep = $(this).data('prev');\r\n            $('.yabi-form-step').hide();\r\n            $('#vol-step-' + prevStep).show();\r\n            updateVolStepIndicator(prevStep);\r\n        });\r\n\r\n        function updateVolStepIndicator(step) {\r\n            $('.yabi-step').removeClass('active completed');\r\n            for (var i = 1; i < step; i++) {\r\n                $('[data-step=\"' + i + '\"]').addClass('completed');\r\n            }\r\n            $('[data-step=\"' + step + '\"]').addClass('active');\r\n        }\r\n\r\n        \/\/ ---- PAYMENT BUTTON ----\r\n        $('#yabi-pay-volunteer-btn').on('click', function() {\r\n            var btn     = $(this);\r\n            var orderId = btn.data('order-id');\r\n            var paymentGateway = btn.data('gateway') || 'midtrans';\r\n            var method  = yabiRhino.payment_method;\r\n\r\n            btn.prop('disabled', true).text('Processing...');\r\n            \r\n            \/\/ Determine action based on payment gateway\r\n            var action = (paymentGateway === 'xendit') ? 'yabi_create_volunteer_payment_xendit' : 'yabi_create_volunteer_payment';\r\n\r\n            $.post(yabiRhino.ajax_url, {\r\n                action:   action,\r\n                nonce:    yabiRhino.nonce,\r\n                order_id: orderId\r\n            }, function(response) {\r\n                if (response.success) {\r\n                    \/\/ Handle Xendit response - redirect to invoice URL\r\n                    if (paymentGateway === 'xendit') {\r\n                        if (response.data && response.data.invoice_url) {\r\n                            console.log('Xendit invoice URL received, redirecting...');\r\n                            window.location.href = response.data.invoice_url;\r\n                            return;\r\n                        } else {\r\n                            alert('Failed to create payment: ' + (response.data || 'Unknown error'));\r\n                            btn.prop('disabled', false).text('\ud83d\udcb3 Pay Now');\r\n                            return;\r\n                        }\r\n                    }\r\n                    \r\n                    \/\/ Handle Midtrans response\r\n                    if (method === 'redirect') {\r\n                        window.location.href = response.data.redirect_url;\r\n                    } else {\r\n                        snap.pay(response.data.token, {\r\n                            onSuccess: function(result) {\r\n                                $('#yabi-vol-payment-status-msg')\r\n                                    .removeClass('yabi-msg-error')\r\n                                    .addClass('yabi-msg-success')\r\n                                    .html('\u2705 Payment successful! Redirecting...')\r\n                                    .show();\r\n                                btn.hide();\r\n                                \/\/ Redirect to success page after 2 seconds\r\n                                setTimeout(function() {\r\n                                    window.location.href = 'https:\/\/badak.or.id\/en\/payment-success\/?order_id=' + orderId;\r\n                                }, 2000);\r\n                            },\r\n                            onPending: function(result) {\r\n                                $('#yabi-vol-payment-status-msg')\r\n                                    .addClass('yabi-msg-pending')\r\n                                    .html('\u23f3 Payment pending. Please complete your payment. Order ID: <strong>' + orderId + '<\/strong>')\r\n                                    .show();\r\n                                btn.prop('disabled', false).text('\ud83d\udcb3 Complete Payment');\r\n                            },\r\n                            onError: function(result) {\r\n                                $('#yabi-vol-payment-status-msg')\r\n                                    .addClass('yabi-msg-error')\r\n                                    .html('\u274c Payment failed. Please try again.')\r\n                                    .show();\r\n                                btn.prop('disabled', false).text('\ud83d\udcb3 Try Again');\r\n                            },\r\n                            onClose: function() {\r\n                                btn.prop('disabled', false).text('\ud83d\udcb3 Pay Now');\r\n                            }\r\n                        });\r\n                    }\r\n                } else {\r\n                    alert('Error: ' + response.data);\r\n                    btn.prop('disabled', false).text('\ud83d\udcb3 Pay Now');\r\n                }\r\n            });\r\n        });\r\n        }\r\n    <\/script>\r\n    \n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"w-separator size_medium\"><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Join Paid VolunteersMore Info About Paid Volunteers Join as a Paid Volunteer Experience Rhino conservation firsthand. Join our volunteer program and make a real difference. Step 1: Choose Your Activity Duration \ud83d\udcb1 Exchange Rate: 1 USD = 16,897 IDR \ud83c\udf31 1 Week $1,500.00 \u2713 7 days Experience Select 1 Week \ud83c\udf33 2 Weeks $2,500.00 \u2713...","protected":false},"author":19,"featured_media":4838,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4863","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/comments?post=4863"}],"version-history":[{"count":9,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4863\/revisions"}],"predecessor-version":[{"id":4901,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4863\/revisions\/4901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/media\/4838"}],"wp:attachment":[{"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/media?parent=4863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}