{"id":7129,"date":"2026-03-05T09:43:06","date_gmt":"2026-03-05T14:43:06","guid":{"rendered":"https:\/\/junix.churchdev.com\/volunteers-needed\/"},"modified":"2026-03-05T09:43:06","modified_gmt":"2026-03-05T14:43:06","slug":"volunteers-needed","status":"publish","type":"page","link":"https:\/\/www.churchdev.com\/demo\/transformation\/volunteers-needed\/","title":{"rendered":"Volunteer Opportunities"},"content":{"rendered":"    <div class=\"all-events-signups\">\r\n        \r\n                <!-- Position Filter -->\r\n        <div class=\"position-filter-section\">\r\n            <h2>Volunteer Opportunities<\/h2>\r\n            <div style=\"margin-bottom: 30px;\">\r\n                <label for=\"position-filter\"><strong>Filter by position:<\/strong><\/label>\r\n                <select id=\"position-filter\" class=\"position-filter-dropdown\">\r\n                    <option value=\"\">All Positions<\/option>\r\n                                            <option value=\"Flowers\">\r\n                            Flowers                        <\/option>\r\n                                            <option value=\"Greeters\">\r\n                            Greeters                        <\/option>\r\n                                    <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"filtered-results\" style=\"display:none;\">\r\n            <h3 id=\"results-title\"><\/h3>\r\n            <div id=\"results-content\"><\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"all-events-list\">\r\n                \r\n                \r\n        <div class=\"event-signup-section\" id=\"event-7156\" data-event-id=\"7156\">\r\n            \r\n                        <h3 class=\"event-signup-heading\">\r\n                <a href=\"https:\/\/www.churchdev.com\/demo\/transformation\/events\/sunday-service\/\">Sunday Service<\/a>\r\n            <\/h3>\r\n                        \r\n                        \r\n                        \r\n                                                <p class=\"event-recurring-info\">\r\n                        <em>Recurring Event - Every Week<\/em>\r\n                    <\/p>\r\n                    \r\n                    <!-- Show full signup interface even on all-events page -->\r\n                                            <h4 class=\"signup-sheet-title\">Sunday Service Volenteers<\/h4>\r\n                                        \r\n                                        \r\n                    <div class=\"signup-date-selector\">\r\n                        <label for=\"signup-date-select-7156\"><strong>Select Date:<\/strong><\/label>\r\n                        <select id=\"signup-date-select-7156\" class=\"signup-date-dropdown\" data-event-id=\"7156\">\r\n                            <option value=\"\">Choose a date...<\/option>\r\n                            <option value=\"2026-04-19\">Sunday, April 19, 2026<\/option><option value=\"2026-04-26\">Sunday, April 26, 2026<\/option><option value=\"2026-05-03\">Sunday, May 3, 2026<\/option><option value=\"2026-05-10\">Sunday, May 10, 2026<\/option><option value=\"2026-05-17\">Sunday, May 17, 2026<\/option><option value=\"2026-05-24\">Sunday, May 24, 2026<\/option><option value=\"2026-05-31\">Sunday, May 31, 2026<\/option><option value=\"2026-06-07\">Sunday, June 7, 2026<\/option><option value=\"2026-06-14\">Sunday, June 14, 2026<\/option><option value=\"2026-06-21\">Sunday, June 21, 2026<\/option><option value=\"2026-06-28\">Sunday, June 28, 2026<\/option><option value=\"2026-07-05\">Sunday, July 5, 2026<\/option>                        <\/select>\r\n                    <\/div>\r\n                    \r\n                    <div id=\"signup-positions-container-7156\" class=\"signup-positions-container\" style=\"display:none;\">\r\n                        <!-- Positions will be loaded via AJAX when date is selected -->\r\n                    <\/div>\r\n                                \r\n                    <\/div>\r\n        \r\n                \r\n                <\/div><!-- #all-events-list -->\r\n            <\/div>\r\n    \r\n    <!-- Single Modal for All Events -->\r\n    <div id=\"signup-modal\" class=\"signup-modal\" style=\"display:none;\">\r\n        <div class=\"signup-modal-content\">\r\n            <span class=\"signup-modal-close\">&times;<\/span>\r\n            <h2 id=\"signup-modal-title\">Sign Up<\/h2>\r\n            <p id=\"signup-modal-event-info\" style=\"color: #666; font-size: 0.9em;\"><\/p>\r\n            <form id=\"signup-form\">\r\n                <input type=\"hidden\" name=\"event_id\" id=\"signup-event-id\">\r\n                <input type=\"hidden\" name=\"occurrence_date\" id=\"signup-occurrence-date\">\r\n                <input type=\"hidden\" name=\"position_index\" id=\"signup-position-index\">\r\n                <input type=\"hidden\" name=\"action\" value=\"cd_submit_signup\">\r\n                \r\n                <p>\r\n                    <label>Your Name *<\/label>\r\n                    <input type=\"text\" name=\"signup_name\" id=\"signup-name\" required value=\"\">\r\n                <\/p>\r\n                \r\n                <p>\r\n                    <label>Email *<\/label>\r\n                    <input type=\"email\" name=\"signup_email\" id=\"signup-email\" required value=\"\">\r\n                <\/p>\r\n                \r\n                <p>\r\n                    <label>Phone<\/label>\r\n                    <input type=\"tel\" name=\"signup_phone\" id=\"signup-phone\">\r\n                <\/p>\r\n                \r\n                <p class=\"signup-quantity-field\">\r\n                    <label>Quantity<\/label>\r\n                    <input type=\"number\" name=\"quantity\" id=\"signup-quantity\" value=\"1\" min=\"1\" max=\"10\">\r\n                <\/p>\r\n                \r\n                <p class=\"signup-notes-field\">\r\n                    <label>Comments\/Notes<\/label>\r\n                    <textarea name=\"notes\" id=\"signup-notes\" rows=\"3\"><\/textarea>\r\n                <\/p>\r\n                \r\n                <p>\r\n                    <button type=\"submit\" class=\"button button-primary\">Submit Signup<\/button>\r\n                    <button type=\"button\" class=\"button signup-modal-close\">Cancel<\/button>\r\n                <\/p>\r\n                \r\n                <div id=\"signup-error\" class=\"signup-error\" style=\"display:none;\"><\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <style>\r\n    .event-signup-sheet, .single-event-signup { margin: 20px 0; }\r\n    .all-events-signups { margin: 20px 0; }\r\n    .event-signup-section { margin-bottom: 50px; }\r\n    .event-signup-heading { margin-bottom: 10px; }\r\n    .event-signup-heading a { text-decoration: none; color: #0073aa; }\r\n    .event-signup-heading a:hover { text-decoration: underline; }\r\n    .event-recurring-info, .event-date-info { margin: 5px 0 15px; color: #666; }\r\n    .signup-sheet-title { margin-bottom: 10px; }\r\n    .signup-sheet-description { margin-bottom: 20px; }\r\n    .signup-date-selector { margin-bottom: 20px; }\r\n    .signup-date-dropdown, .position-filter-dropdown { width: 100%; max-width: 400px; padding: 10px; font-size: 16px; }\r\n    .position-filter-section { margin-bottom: 30px; padding: 20px; background: #f9f9f9; border-left: 4px solid #0073aa; color: #333; }\r\n    .signup-items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }\r\n    .signup-items-table th, .signup-items-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }\r\n    .signup-items-table th { background: #f5f5f5; font-weight: bold; color: #333; }\r\n    .signup-items-table td.position-name { width: 50%; }\r\n    .signup-items-table td.slots-col { text-align: center; white-space: nowrap; }\r\n    .signups-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 0.9em; color: #666; }\r\n    .signups-list strong { color: #333; }\r\n    .slots-status { font-size: 0.95em; white-space: nowrap; }\r\n    .slots-full { font-style: italic; }\r\n    .signup-btn { background: #0073aa; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; }\r\n    .signup-btn:hover { background: #005177; }\r\n    .signup-btn:disabled { background: #ccc; cursor: not-allowed; }\r\n    .signup-login-required { padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107; }\r\n    \r\n    \/* Modal Styles *\/\r\n    .signup-modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); overflow-y: auto; }\r\n    .signup-modal-content { background: #fff; margin: 5% auto; padding: 30px; width: 90%; max-width: 500px; border-radius: 8px; position: relative; }\r\n    .signup-modal-close { position: absolute; right: 15px; top: 15px; font-size: 28px; font-weight: bold; cursor: pointer; color: #999; line-height: 1; }\r\n    .signup-modal-close:hover { color: #000; }\r\n    .signup-modal-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }\r\n    .signup-modal-content input, .signup-modal-content textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }\r\n    .signup-modal-content p { margin-bottom: 15px; }\r\n    .signup-modal-content button[type=\"submit\"] { background: #0073aa; color: #fff; }\r\n    .signup-error { color: #dc3232; background: #fef7f7; padding: 10px; border-left: 4px solid #dc3232; margin-top: 15px; }\r\n    .signup-quantity-field { display: none; }\r\n    <\/style>\r\n    \r\n    <script>\r\n    jQuery(document).ready(function($) {\r\n        const modal = $('#signup-modal');\r\n        const showFilters = true;\r\n        const showSingle = false;\r\n        \r\n                \/\/ Handle position filter\r\n        $('#position-filter').on('change', function() {\r\n            const selectedPosition = $(this).val();\r\n            \r\n            if (!selectedPosition) {\r\n                $('#filtered-results').hide();\r\n                $('#all-events-list').show();\r\n                return;\r\n            }\r\n            \r\n            $('#all-events-list').hide();\r\n            $('#results-content').html('<p>Loading...<\/p>');\r\n            $('#filtered-results').show();\r\n            $('#results-title').text('Opportunities for: ' + selectedPosition);\r\n            \r\n            $.ajax({\r\n                url: 'https:\/\/www.churchdev.com\/demo\/transformation\/wp-admin\/admin-ajax.php',\r\n                type: 'POST',\r\n                data: {\r\n                    action: 'cd_filter_by_position',\r\n                    position_name: selectedPosition\r\n                },\r\n                success: function(response) {\r\n                    if (response.success) {\r\n                        $('#results-content').html(response.data.html);\r\n                    } else {\r\n                        $('#results-content').html('<p>No upcoming opportunities found for this position.<\/p>');\r\n                    }\r\n                },\r\n                error: function() {\r\n                    $('#results-content').html('<p style=\"color: red;\">Error loading results.<\/p>');\r\n                }\r\n            });\r\n        });\r\n                \r\n        \/\/ Handle date selection for recurring events\r\n        $(document).on('change', '.signup-date-dropdown', function() {\r\n            const $dropdown = $(this);\r\n            const selectedDate = $dropdown.val();\r\n            const eventId = $dropdown.data('event-id');\r\n            const $container = $('#signup-positions-container-' + eventId);\r\n            \r\n            if (!selectedDate) {\r\n                $container.hide();\r\n                return;\r\n            }\r\n            \r\n            $.ajax({\r\n                url: 'https:\/\/www.churchdev.com\/demo\/transformation\/wp-admin\/admin-ajax.php',\r\n                type: 'POST',\r\n                data: {\r\n                    action: 'cd_load_event_signup_positions',\r\n                    event_id: eventId,\r\n                    occurrence_date: selectedDate,\r\n                    nonce: 'ea80a4eeaa'\r\n                },\r\n                beforeSend: function() {\r\n                    $container.html('<p>Loading...<\/p>').show();\r\n                },\r\n                success: function(response) {\r\n                    if (response.success) {\r\n                        $container.html(response.data).show();\r\n                    } else {\r\n                        $container.html('<p style=\"color: red;\">Error loading positions.<\/p>');\r\n                    }\r\n                },\r\n                error: function() {\r\n                    $container.html('<p style=\"color: red;\">Error loading positions.<\/p>');\r\n                }\r\n            });\r\n        });\r\n        \r\n        \/\/ Handle signup button click\r\n        $(document).on('click', '.signup-btn', function() {\r\n            const $btn = $(this);\r\n            const eventId = $btn.data('event-id');\r\n            const positionIndex = $btn.data('position-index');\r\n            const positionName = $btn.data('position-name');\r\n            const allowMultiple = $btn.data('allow-multiple');\r\n            const occurrenceDate = $btn.data('occurrence-date');\r\n            const eventTitle = $btn.data('event-title');\r\n            const eventDateFormatted = $btn.data('event-date-formatted');\r\n            \r\n            $('#signup-event-id').val(eventId);\r\n            $('#signup-position-index').val(positionIndex);\r\n            $('#signup-occurrence-date').val(occurrenceDate);\r\n            $('#signup-modal-title').text('Sign Up: ' + positionName);\r\n            $('#signup-modal-event-info').text(eventTitle + ' - ' + eventDateFormatted);\r\n            \r\n            if (allowMultiple) {\r\n                $('.signup-quantity-field').show();\r\n            } else {\r\n                $('.signup-quantity-field').hide();\r\n                $('#signup-quantity').val(1);\r\n            }\r\n            \r\n            modal.show();\r\n        });\r\n        \r\n        \/\/ Close modal\r\n        $('.signup-modal-close').on('click', function() {\r\n            modal.hide();\r\n            $('#signup-error').hide();\r\n            $('#signup-form')[0].reset();\r\n        });\r\n        \r\n        $(window).on('click', function(e) {\r\n            if ($(e.target).is('.signup-modal')) {\r\n                modal.hide();\r\n                $('#signup-error').hide();\r\n                $('#signup-form')[0].reset();\r\n            }\r\n        });\r\n        \r\n        \/\/ Handle form submission\r\n        $('#signup-form').on('submit', function(e) {\r\n            e.preventDefault();\r\n            \r\n            const $form = $(this);\r\n            const $button = $form.find('button[type=\"submit\"]');\r\n            const originalText = $button.text();\r\n            \r\n            $button.prop('disabled', true).text('Submitting...');\r\n            $('#signup-error').hide();\r\n            \r\n            $.ajax({\r\n                url: 'https:\/\/www.churchdev.com\/demo\/transformation\/wp-admin\/admin-ajax.php',\r\n                type: 'POST',\r\n                data: $form.serialize(),\r\n                success: function(response) {\r\n                    if (response.success) {\r\n                        alert(response.data.message);\r\n                        modal.hide();\r\n                        $('#signup-form')[0].reset();\r\n                        \r\n                        if (showFilters) {\r\n                            const currentFilter = $('#position-filter').val();\r\n                            if (currentFilter) {\r\n                                $('#position-filter').trigger('change');\r\n                            } else {\r\n                                location.reload();\r\n                            }\r\n                        } else {\r\n                            location.reload();\r\n                        }\r\n                    } else {\r\n                        $('#signup-error').html(response.data.message).show();\r\n                        $button.prop('disabled', false).text(originalText);\r\n                    }\r\n                },\r\n                error: function() {\r\n                    $('#signup-error').html('Error submitting signup. Please try again.').show();\r\n                    $button.prop('disabled', false).text(originalText);\r\n                }\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"class_list":{"0":"post-7129","1":"page","2":"type-page","3":"status-publish","5":"entry","6":"override"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/pages\/7129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/comments?post=7129"}],"version-history":[{"count":0,"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/pages\/7129\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.churchdev.com\/demo\/transformation\/wp-json\/wp\/v2\/media?parent=7129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}