<cfset id = 157297>
<cfquery name="getc" datasource="cg22">
	select copy,title from columntable where id = #id#
</cfquery>
<cfset newtitle = rereplacenocase(getc.title,'Family Fun - ','','all')>
<cfinclude template="/header.cfm">

	

		<!-- Content
		============================================= -->
		<section id="content">
			<div class="content-wrap" style="overflow: visible;">

				<!-- Wave Shape Divider
				============================================= -->
				<div class="wave-bottom" style="position: absolute; top: -12px; left: 0; width: 100%; background-image: url('demos/course/images/wave-3.svg'); height: 12px; z-index: 2; background-repeat: repeat-x; transform: rotate(180deg);"></div>

				<div class="container">

					<div class="heading-block border-bottom-0 my-4 text-center">
						<h1><Cfoutput>#newtitle#</Cfoutput></h1>
						<br>
					<cfoutput>	<div style="text-align:left;">#getc.copy#</div></cfoutput>
					</div>


<cfquery name="getExperiences" datasource="#ds#">
    SELECT * FROM familyfun_experiences
where status = 1 and full_name <> ''
</cfquery>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

  
    <form id="experienceForm" action="experiences-send.cfm" method="POST">
    
                  
                      <table>

  <cfoutput query="getExperiences">

<tr><Td style="min-width:250px;"><strong>Name of Xperience</strong></td><td>#full_name#</td></tr>
<tr><Td><strong>Address</strong></td><td>#address#<br>#address2#</td></tr>

<tr><Td><strong>URL</strong></td><td>#website#</td></tr>
<tr><Td><strong>Description</strong></td><td>#Description#</td></tr>

<tr><Td><strong>Is Xperience sensory friendly?</strong></td><td>#sensory_friendly#</td></tr>
<tr><Td><strong>Category</strong></td><td>#experience_nature#</td></tr>
<tr><Td><strong>Indoors/Outdoors</strong></td><td>#indoors_outdoors#</td></tr>
<tr><Td><strong>Duration of Xperience</strong></td><td>#experience_duration#</td></tr>

<tr><Td><strong>Approximate ## of People</strong></td><td>#appropriate_ppl#</td></tr>
<tr><Td><strong>Age Range for Xperience</strong></td><td>#age_range_attendees#</td></tr>

<tr><Td><strong>What days</strong></td><td>#justdays#</td></tr>

<tr><Td><strong>Times</strong></td><td>#times_days_offered#</td></tr>
<tr><Td><strong>Is there an educational component to Xperiences</strong></td><td>#educational_component#</td></tr>
<Tr><td colspan="2"><hr></td></Tr>
</cfoutput>

         </table>
<hr>
         
        
        <input type="submit" value="Contact Experiences">
    </form>
<script>
    var table = $('#experiences').DataTable();

    var experienceCheckbox = $('.experienceCheckbox');
    experienceCheckbox.change(function() {
        if ($('.experienceCheckbox:checked').length > 3) {
            $(this).prop('checked', false);
            alert('You may only select 3 experiences at a time.');
        }
    });

    $('#experienceForm').on('submit', function(event) {
        var selectedExperiences = $('.experienceCheckbox:checked').map(function() {
            return $(this).val();
        }).get();

        if (selectedExperiences.length > 0) {
            // Remove previous hidden input if it exists
            $('input[name="selectedExperiences"]').remove();

            // Create a new hidden input
            $('<input>').attr({
                type: 'hidden',
                name: 'selectedExperiences',
                value: selectedExperiences.join(',')
            }).appendTo('#experienceForm');
        } else {
            event.preventDefault();
            alert('Please select at least one experience.');
        }

        // Debug: Alert the form data before it's sent
        alert($('#experienceForm').serialize());
    });
</script>


</body>
</html>


			</div>
		</section><!-- #content end -->


<cfinclude template="/footer.cfm">