{"id":4858,"date":"2026-03-31T14:03:47","date_gmt":"2026-03-31T07:03:47","guid":{"rendered":"https:\/\/badak.or.id\/?page_id=4858"},"modified":"2026-04-02T14:36:12","modified_gmt":"2026-04-02T07:36:12","slug":"join-rhino-guardian","status":"publish","type":"page","link":"https:\/\/badak.or.id\/en\/join-rhino-guardian\/","title":{"rendered":"Join Rhino Guardian"},"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 Rhino Guardian<\/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\/rhino-guardian\/\" class=\"w-text-h\"><span class=\"w-text-value\">More Info About Rhino Guardiian<\/span><\/a><\/h3><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section><section class=\"l-section wpb_row height_medium\"><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=\"wpb_text_column\"><div class=\"wpb_wrapper\">    <div class=\"yabi-guardian-container\">\r\n        <!-- Use WordPress jQuery that's already enqueued -->\r\n        <script type=\"text\/javascript\">\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            console.log('YABI Guardian: DOM loaded');\r\n            \r\n            \/\/ Package selection\r\n            var packageCards = document.querySelectorAll('.yabi-package-card');\r\n            packageCards.forEach(function(card) {\r\n                card.addEventListener('click', function() {\r\n                    var id = this.getAttribute('data-package-id');\r\n                    var name = this.getAttribute('data-package-name');\r\n                    var price = this.getAttribute('data-package-price');\r\n                    console.log('Package selected:', id, name, price);\r\n                    \r\n                    document.querySelectorAll('.yabi-package-card').forEach(function(c) {\r\n                        c.classList.remove('selected');\r\n                    });\r\n                    this.classList.add('selected');\r\n                    \r\n                    var hiddenInput = document.getElementById('selected-package-id');\r\n                    if (hiddenInput) hiddenInput.value = id;\r\n                    \r\n                    var nextBtn = document.getElementById('step2-next');\r\n                    if (nextBtn) {\r\n                        nextBtn.disabled = false;\r\n                        nextBtn.classList.remove('yabi-btn-disabled');\r\n                    }\r\n                    console.log('Hidden field set to:', id);\r\n                });\r\n            });\r\n            \r\n            \/\/ Rhino selection - Select button click\r\n            var selectBtns = document.querySelectorAll('.yabi-btn-select-rhino');\r\n            selectBtns.forEach(function(btn) {\r\n                btn.addEventListener('click', function(e) {\r\n                    e.stopPropagation();\r\n                    var card = this.closest('.yabi-rhino-card');\r\n                    var id = card.getAttribute('data-rhino-id');\r\n                    var name = card.getAttribute('data-rhino-name');\r\n                    console.log('Rhino selected:', id, name);\r\n                    \r\n                    document.querySelectorAll('.yabi-rhino-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-rhino-id');\r\n                    if (hiddenInput) hiddenInput.value = id;\r\n                    \r\n                    \/\/ Go to next step\r\n                    document.getElementById('step-1').style.display = 'none';\r\n                    document.getElementById('step-2').style.display = 'block';\r\n                });\r\n            });\r\n            \r\n            \/\/ Card click for visual selection only\r\n            var rhinoCards = document.querySelectorAll('.yabi-rhino-card');\r\n            rhinoCards.forEach(function(card) {\r\n                card.addEventListener('click', function(e) {\r\n                    \/\/ Ignore if clicking on buttons\r\n                    if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON' || e.target.closest('button') || e.target.closest('a')) {\r\n                        return;\r\n                    }\r\n                    var id = this.getAttribute('data-rhino-id');\r\n                    var name = this.getAttribute('data-rhino-name');\r\n                    \r\n                    document.querySelectorAll('.yabi-rhino-card').forEach(function(c) {\r\n                        c.classList.remove('selected');\r\n                    });\r\n                    this.classList.add('selected');\r\n                    \r\n                    var hiddenInput = document.getElementById('selected-rhino-id');\r\n                    if (hiddenInput) hiddenInput.value = id;\r\n                });\r\n            });\r\n            \r\n            \/\/ Next buttons\r\n            var nextBtns = document.querySelectorAll('.yabi-btn-next');\r\n            nextBtns.forEach(function(btn) {\r\n                btn.addEventListener('click', function() {\r\n                    var next = parseInt(this.getAttribute('data-next'));\r\n                    var current = next - 1;\r\n                    console.log('Next clicked, current:', current, 'next:', next);\r\n                    \r\n                    if (current === 1) {\r\n                        var rhinoId = document.getElementById('selected-rhino-id');\r\n                        if (!rhinoId || !rhinoId.value) {\r\n                            \/\/alert('Please select a Rhino');\r\n                            return;\r\n                        }\r\n                    }\r\n                    if (current === 2) {\r\n                        var packageId = document.getElementById('selected-package-id');\r\n                        if (!packageId || !packageId.value) {\r\n                            \/\/alert('Please select a Package');\r\n                            return;\r\n                        }\r\n                    }\r\n                    \r\n                    var currentStep = document.getElementById('step-' + current);\r\n                    var nextStep = document.getElementById('step-' + next);\r\n                    if (currentStep) currentStep.style.display = 'none';\r\n                    if (nextStep) nextStep.style.display = 'block';\r\n                    console.log('Moved to step:', next);\r\n                });\r\n            });\r\n            \r\n            \/\/ Previous buttons\r\n            var prevBtns = document.querySelectorAll('.yabi-btn-prev');\r\n            prevBtns.forEach(function(btn) {\r\n                btn.addEventListener('click', function() {\r\n                    var prev = parseInt(this.getAttribute('data-prev'));\r\n                    var current = prev + 1;\r\n                    console.log('Prev clicked, current:', current, 'prev:', prev);\r\n                    \r\n                    var currentStep = document.getElementById('step-' + current);\r\n                    var prevStep = document.getElementById('step-' + prev);\r\n                    if (currentStep) currentStep.style.display = 'none';\r\n                    if (prevStep) prevStep.style.display = 'block';\r\n                });\r\n            });\r\n            \r\n            \/\/ Form submit\r\n            var form = document.getElementById('yabi-guardian-form');\r\n            if (form) {\r\n                console.log('Guardian form found, adding submit handler');\r\n                form.addEventListener('submit', function(e) {\r\n                    console.log('Guardian Form submitting...');\r\n                    var rhinoId = document.getElementById('selected-rhino-id');\r\n                    var packageId = document.getElementById('selected-package-id');\r\n                    \r\n                    if (!rhinoId || !rhinoId.value) {\r\n                        alert('Please select a Rhino');\r\n                        e.preventDefault();\r\n                        return false;\r\n                    }\r\n                    if (!packageId || !packageId.value) {\r\n                        alert('Please select a Package');\r\n                        e.preventDefault();\r\n                        return false;\r\n                    }\r\n                    console.log('Guardian Form validated');\r\n                });\r\n            } else {\r\n                console.log('Guardian form not found on this page');\r\n            }\r\n            \r\n            \/\/ Step 3 to 4 - Build review summary\r\n            var step3Btn = document.getElementById('step3-next');\r\n            if (step3Btn) {\r\n                step3Btn.addEventListener('click', function() {\r\n                    console.log('Step 3 -> 4: Building review summary');\r\n                    \r\n                    \/\/ Country validation for Other\r\n                    var countrySelect = document.querySelector('#step-3 select[name=\"country\"]');\r\n                    var countryOther = document.getElementById('country_other');\r\n                    if (countrySelect && countrySelect.value === 'Other' && (!countryOther || !countryOther.value.trim())) {\r\n                        alert('Please specify your country if selecting Other');\r\n                        return false;\r\n                    }\r\n                    \r\n                    var rhinoId = document.getElementById('selected-rhino-id');\r\n                    var packageId = document.getElementById('selected-package-id');\r\n                    \r\n                    if (!rhinoId || !rhinoId.value || !packageId || !packageId.value) {\r\n                        alert('Please complete all previous steps');\r\n                        return;\r\n                    }\r\n                    \r\n                    \/\/ Get selected elements\r\n                    var selectedRhino = document.querySelector('.yabi-rhino-card.selected');\r\n                    var selectedPackage = document.querySelector('.yabi-package-card.selected');\r\n                    \r\n                    var rhinoName = '';\r\n                    if (selectedRhino) {\r\n                        var h4 = selectedRhino.querySelector('h4');\r\n                        if (h4) rhinoName = h4.textContent;\r\n                    }\r\n                    if (!rhinoName) rhinoName = rhinoId.value;\r\n                    \r\n                    var packageName = '';\r\n                    var packagePrice = '';\r\n                    var packageDuration = '';\r\n                    if (selectedPackage) {\r\n                        var pkgH4 = selectedPackage.querySelector('h4');\r\n                        if (pkgH4) packageName = pkgH4.textContent;\r\n                        var priceEl = selectedPackage.querySelector('.yabi-package-price');\r\n                        if (priceEl) packagePrice = priceEl.textContent;\r\n                        var durationEl = selectedPackage.querySelector('.yabi-package-duration');\r\n                        if (durationEl) packageDuration = durationEl.textContent;\r\n                    }\r\n                    if (!packageName) packageName = 'Package #' + packageId.value;\r\n                    \r\n                    var reviewDiv = document.getElementById('guardian-review-summary');\r\n                    if (reviewDiv) {\r\n                        reviewDiv.innerHTML = \r\n                            '<p><strong>Rhino:<\/strong> ' + rhinoName + '<\/p>' +\r\n                            '<p><strong>Package:<\/strong> ' + packageName + '<\/p>' +\r\n                            '<p><strong>Duration:<\/strong> ' + packageDuration + '<\/p>' +\r\n                            '<p><strong>Price:<\/strong> ' + packagePrice + '<\/p>';\r\n                        console.log('Review summary built:', rhinoName, packageName, packagePrice);\r\n                    }\r\n                });\r\n            }\r\n\r\n            \/\/ Country: Show\/hide Other field\r\n            var countrySelect = document.querySelector('#step-3 select[name=\"country\"]');\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.focus();\r\n                    } else {\r\n                        countryOther.style.display = 'none';\r\n                        countryOther.value = '';\r\n                    }\r\n                });\r\n            }\r\n            \r\n            console.log('YABI Guardian: All event listeners attached');\r\n        });\r\n        <\/script>\r\n        <div class=\"yabi-form-header\">\r\n            <h2>Become a Rhino Guardian<\/h2>\r\n            <p>Adopt a Sumatran Rhino and help protect this critically endangered species.<\/p>\r\n        <\/div>\r\n        \r\n        <form method=\"post\" id=\"yabi-guardian-form\" class=\"yabi-form\">\r\n            <input type=\"hidden\" id=\"yabi_guardian_nonce\" name=\"yabi_guardian_nonce\" value=\"93054c5dba\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/4858\" \/>            \r\n            <!-- Step 1: Select Rhino -->\r\n            <div class=\"yabi-form-step\" id=\"step-1\">\r\n<h3>Step 1: Choose a Rhino to Protect<\/h3>\r\n                                <!--<p class=\"yabi-debug\">Found 10 rhinos<\/p>-->\r\n                <div class=\"yabi-rhino-grid\">\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-01\" \r\n                         data-rhino-name=\"Bina\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Bina-500px.jpg\" alt=\"Bina\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Bina<\/h4>\r\n                            <p><strong>Age:<\/strong> 47 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-01\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-02\" \r\n                         data-rhino-name=\"Ratu\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Ratu-2-500px.jpg\" alt=\"Ratu\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Ratu<\/h4>\r\n                            <p><strong>Age:<\/strong> 26 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-02\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-03\" \r\n                         data-rhino-name=\"Rosa\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Rosa-500px.jpg\" alt=\"Rosa\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Rosa<\/h4>\r\n                            <p><strong>Age:<\/strong> 25 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-03\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-04\" \r\n                         data-rhino-name=\"Andalas\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Andalas-500px.jpg\" alt=\"Andalas\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Andalas<\/h4>\r\n                            <p><strong>Age:<\/strong> 25 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Male<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-04\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-05\" \r\n                         data-rhino-name=\"Andatu\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Andatu-500px.jpg\" alt=\"Andatu\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Andatu<\/h4>\r\n                            <p><strong>Age:<\/strong> 14 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Male<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-05\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-06\" \r\n                         data-rhino-name=\"Harapan\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Harapan-500px.jpg\" alt=\"Harapan\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Harapan<\/h4>\r\n                            <p><strong>Age:<\/strong> 19 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Male<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-06\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-07\" \r\n                         data-rhino-name=\"Delilah\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Delilah-500px.jpg\" alt=\"Delilah\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Delilah<\/h4>\r\n                            <p><strong>Age:<\/strong> 10 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-07\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-08\" \r\n                         data-rhino-name=\"Sedah Mirah\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Sedah-Meriah-500px.jpg\" alt=\"Sedah Mirah\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Sedah Mirah<\/h4>\r\n                            <p><strong>Age:<\/strong> 4 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-08\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-09\" \r\n                         data-rhino-name=\"Anggi\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Anggi-500px.jpg\" alt=\"Anggi\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Anggi<\/h4>\r\n                            <p><strong>Age:<\/strong> 3 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-09\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-rhino-card\" \r\n                         data-rhino-id=\"Rhino-10\" \r\n                         data-rhino-name=\"Indra\">\r\n                        <div class=\"yabi-rhino-photo\">\r\n                                                        <img decoding=\"async\" src=\"https:\/\/badak.or.id\/wp-content\/uploads\/2026\/03\/Indra-500px.jpg\" alt=\"Indra\">\r\n                                                    <\/div>\r\n                        <div class=\"yabi-rhino-info\">\r\n                            <h4>Indra<\/h4>\r\n                            <p><strong>Age:<\/strong> 3 years<\/p>\r\n                            <p><strong>Sex:<\/strong> Female<\/p>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-buttons\">\r\n                            <a href=\"?rhino=Rhino-10\" class=\"yabi-btn yabi-btn-detail\">More Detail<\/a>\r\n                            <button type=\"button\" class=\"yabi-btn yabi-btn-select-rhino\">Select<\/button>\r\n                        <\/div>\r\n                        <div class=\"yabi-rhino-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n                                <input type=\"hidden\" name=\"rhino_id\" id=\"selected-rhino-id\" required>\r\n            <\/div>\r\n            \r\n            <!-- Step 2: Select Package -->\r\n            <div class=\"yabi-form-step\" id=\"step-2\" style=\"display:none;\">\r\n                <h3>Step 2: Choose a Guardian Package<\/h3>\r\n                                <!--<p class=\"yabi-debug\">Found 3 packages<\/p>-->\r\n                <div class=\"yabi-package-grid\">\r\n                                        <div class=\"yabi-package-card\" \r\n                         data-package-id=\"1\" \r\n                         data-package-name=\"Tier I\"\r\n                         data-package-price=\"100000.00\"\r\n                         data-package-duration=\"1 Month\">\r\n                        <h4>Tier I<\/h4>\r\n                        <p class=\"yabi-package-price\">Rp 100.000<\/p>\r\n                        <p class=\"yabi-package-duration\">\u23f1 1 Month<\/p>\r\n                                                <div class=\"yabi-package-desc\"><p>- E-sertifikat,<br \/>\n- Newsletter Sahabat Badak<br \/>\n- Laporan Adopsi digital dan Foto Badak<\/p>\n<\/div>\r\n                                                <div class=\"yabi-package-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-package-card\" \r\n                         data-package-id=\"2\" \r\n                         data-package-name=\"Tier II\"\r\n                         data-package-price=\"500000.00\"\r\n                         data-package-duration=\"6 Month\">\r\n                        <h4>Tier II<\/h4>\r\n                        <p class=\"yabi-package-price\">Rp 500.000<\/p>\r\n                        <p class=\"yabi-package-duration\">\u23f1 6 Month<\/p>\r\n                                                <div class=\"yabi-package-desc\"><p>- E-sertifikat<br \/>\n- Newsletter Sahabat Badak<br \/>\n- Laporan Adopsi digital dan Foto Badak<br \/>\n- Laporan Kuartal<br \/>\n- Boneka badak sebagai souvenir<\/p>\n<\/div>\r\n                                                <div class=\"yabi-package-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                        <div class=\"yabi-package-card\" \r\n                         data-package-id=\"3\" \r\n                         data-package-name=\"Tier III\"\r\n                         data-package-price=\"1000000.00\"\r\n                         data-package-duration=\"12 Month\">\r\n                        <h4>Tier III<\/h4>\r\n                        <p class=\"yabi-package-price\">Rp 1.000.000<\/p>\r\n                        <p class=\"yabi-package-duration\">\u23f1 12 Month<\/p>\r\n                                                <div class=\"yabi-package-desc\"><p>- E-sertifikat<br \/>\n- Newsletter Sahabat Badak<br \/>\n- Laporan Adopsi digital dan Foto Badak<br \/>\n- Laporan Kuartal<br \/>\n- Boneka badak sebagai souvenir<br \/>\n- Kaos spesial edisi program Rhino Guardian Alliance<\/p>\n<\/div>\r\n                                                <div class=\"yabi-package-select-overlay\"><span>\u2713 Selected<\/span><\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n                                <input type=\"hidden\" name=\"paket_id\" id=\"selected-package-id\" required>\r\n                <div class=\"yabi-step-nav\">\r\n                    <button type=\"button\" class=\"yabi-btn yabi-btn-prev\" data-prev=\"1\" onclick=\"document.getElementById('step-2').style.display='none';document.getElementById('step-1').style.display='block';\">\u2190 Back<\/button>\r\n                    <button type=\"button\" class=\"yabi-btn yabi-btn-next\" data-next=\"3\" id=\"step2-next\" disabled onclick=\"var p=document.getElementById('selected-package-id');if(!p||!p.value){alert('Please select a Package');return false;}document.getElementById('step-2').style.display='none';document.getElementById('step-3').style.display='block';\">Next: Your Details \u2192<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Step 3: Personal Details -->\r\n            <div class=\"yabi-form-step\" id=\"step-3\" style=\"display:none;\">\r\n                <h3>Step 3: Your Details<\/h3>\r\n                <div class=\"yabi-form-fields\">\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>\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>\r\n                    <\/div>\r\n                    <div class=\"yabi-field-group\">\r\n                        <label>Email <span class=\"req\">*<\/span><\/label>\r\n                        <input type=\"email\" name=\"email\" required>\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>\r\n                    <\/div>\r\n                    <div class=\"yabi-field-group\">\r\n                        <label>Date of Birth<\/label>\r\n                        <input type=\"date\" name=\"date_of_birth\">\r\n                    <\/div>\r\n                    <div class=\"yabi-field-group\">\r\n                        <label>Sex<\/label>\r\n                        <select name=\"sex\">\r\n                            <option value=\"\">-- Select --<\/option>\r\n                            <option value=\"Male\">Male<\/option>\r\n                            <option value=\"Female\">Female<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"yabi-field-group yabi-field-full\">\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=\"Philippines\">Philippines<\/option>\r\n                            <option value=\"Vietnam\">Vietnam<\/option>\r\n                            <option value=\"Myanmar\">Myanmar<\/option>\r\n                            <option value=\"Cambodia\">Cambodia<\/option>\r\n                            <option value=\"Laos\">Laos<\/option>\r\n                            <option value=\"Brunei\">Brunei<\/option>\r\n                            <option value=\"East Timor\">East Timor<\/option>\r\n                            <option value=\"United States\">United States<\/option>\r\n                            <option value=\"United Kingdom\">United Kingdom<\/option>\r\n                            <option value=\"Australia\">Australia<\/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=\"Netherlands\">Netherlands<\/option>\r\n                            <option value=\"Germany\">Germany<\/option>\r\n                            <option value=\"France\">France<\/option>\r\n                            <option value=\"Canada\">Canada<\/option>\r\n    <option value=\"Other\">Other<\/option>\r\n<\/select>\r\n    <input type=\"text\" name=\"country_other\" id=\"country_other\" class=\"yabi-form-input\" style=\"display:none; margin-top:10px;\" placeholder=\"Please specify your country\">\r\n                    <\/div>\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('step-3').style.display='none';document.getElementById('step-2').style.display='block';\">\u2190 Back<\/button>\r\n                    <button type=\"button\" class=\"yabi-btn yabi-btn-next\" data-next=\"4\" id=\"step3-next\" onclick=\"var f=document.getElementById('yabi-guardian-form');var req=f.querySelectorAll('#step-3 [required]');for(var i=0;i<req.length;i++){if(!req[i].value){alert('Please fill all required fields');return false;}}var rhinoId=document.getElementById('selected-rhino-id');var packageId=document.getElementById('selected-package-id');if(!rhinoId||!rhinoId.value){alert('Please select a Rhino');return false;}if(!packageId||!packageId.value){alert('Please select a Package');return false;}var selectedRhino=document.querySelector('.yabi-rhino-card.selected');var selectedPackage=document.querySelector('.yabi-package-card.selected');var rhinoName='';if(selectedRhino){var h4=selectedRhino.querySelector('h4');if(h4)rhinoName=h4.textContent;}if(!rhinoName)rhinoName=rhinoId.value;var packageName='';var packagePrice='';var packageDuration='';if(selectedPackage){var pkgH4=selectedPackage.querySelector('h4');if(pkgH4)packageName=pkgH4.textContent;var priceEl=selectedPackage.querySelector('.yabi-package-price');if(priceEl)packagePrice=priceEl.textContent;var durationEl=selectedPackage.querySelector('.yabi-package-duration');if(durationEl)packageDuration=durationEl.textContent;}if(!packageName)packageName='Package #'+packageId.value;var reviewDiv=document.getElementById('guardian-review-summary');if(reviewDiv){reviewDiv.innerHTML='<p><strong>Rhino:<\/strong> '+rhinoName+'<\/p><p><strong>Package:<\/strong> '+packageName+'<\/p><p><strong>Duration:<\/strong> '+packageDuration+'<\/p><p><strong>Price:<\/strong> '+packagePrice+'<\/p>';}document.getElementById('step-3').style.display='none';document.getElementById('step-4').style.display='block';\">Review & Pay \u2192<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Step 4: Review -->\r\n            <div class=\"yabi-form-step\" id=\"step-4\" style=\"display:none;\">\r\n                <h3>Step 4: Review & Payment<\/h3>\r\n                <div id=\"guardian-review-summary\" class=\"yabi-review-box\"><\/div>\r\n                <div class=\"yabi-terms\">\r\n                    <label>\r\n                        <input type=\"checkbox\" id=\"yabi-guardian-terms\" required>\r\n                        I agree to the Terms & Conditions.\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=\"3\" onclick=\"document.getElementById('step-4').style.display='none';document.getElementById('step-3').style.display='block';\">\u2190 Back<\/button>\r\n                    <button type=\"submit\" name=\"yabi_guardian_submit\" class=\"yabi-btn yabi-btn-submit\">\u2705 Confirm & Proceed to Payment<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/form>\r\n    <\/div>\r\n    \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Join Rhino GuardianMore Info About Rhino Guardiian Become a Rhino Guardian Adopt a Sumatran Rhino and help protect this critically endangered species. Step 1: Choose a Rhino to Protect Bina Age: 47 years Sex: Female More Detail Select \u2713 Selected Ratu Age: 26 years Sex: Female More Detail Select \u2713 Selected Rosa Age: 25 years...","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-4858","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4858","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=4858"}],"version-history":[{"count":6,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4858\/revisions"}],"predecessor-version":[{"id":4892,"href":"https:\/\/badak.or.id\/en\/wp-json\/wp\/v2\/pages\/4858\/revisions\/4892"}],"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=4858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}