<?php
/**
 * Template Name: Individual Memberships
 *
 * Template for displaying a page without sidebar even if a sidebar widget is published.
 *
 * @package understrap
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>

<?php if ( is_front_page() ) : ?>
  <?php get_template_part( 'global-templates/hero' ); ?>
<?php endif; ?>


<div class="sub-image" style="background-image: url(<?php echo get_the_post_thumbnail_url( $post->ID, 'full' ); ?>)">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 text-center"></div>
        </div>
    </div>
</div>

<div class="wrapper" id="full-width-page-wrapper">

	<div class="<?php echo esc_attr( $container ); ?>" id="content">

		<div class="row">

			<div class="col-md-6 content-area" id="primary">

				<main class="site-main" id="main" role="main">

					<?php while ( have_posts() ) : the_post(); ?>

						<?php get_template_part( 'loop-templates/content', 'page' ); ?>

						<?php
						// If comments are open or we have at least one comment, load up the comment template.
						if ( comments_open() || get_comments_number() ) :
							comments_template();
						endif;
						?>

					<?php endwhile; // end of the loop. ?>

				</main><!-- #main -->

			</div><!-- #primary -->

            <div class="col-md-5 offset-1 content-area">
                    <h2>Become a Member</h2>
                    <p>Ready to join the PHCDC? Click/tap the button below to jump over to our membership portal where you can create you new Penn Hills CDC membership.</p>
                    <hr>
                    <a href="https://members.pennhillscdc.org/register" class="btn btn-lg btn-success btn-block">Register Now &nbsp; <i class="fas fa-arrow-right"></i></a>

					<br/><br/><br/><br/>
                    <h2>Renew Your Membership</h2>
                    <p>Past and existing members can renew their membership through the PHCDC membership portal. If you don't know your password, try the password reset function.</p>
                    <hr>
                    <a href="https://members.pennhillscdc.org/" class="btn btn-lg btn-success btn-block">Renew Now &nbsp; <i class="fas fa-arrow-right"></i></a>
            </div>
            

		</div><!-- .row end -->

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

</div><!-- #full-width-page-wrapper -->

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#plan').change(function() {
            var plan = $(this).val();
            if (plan==1) {
                $('#plan1').css('display','flex');
                $('#plan2').css('display','none');
            }
            if (plan==2) {
                $('#plan1').css('display','none');
                $('#plan2').css('display','flex');
            }
        });
        $('#plan, #years, #donation').change(function() {
            var plan = parseFloat($('#plan').val());
            var years = parseFloat($('#years').val());
            var donation = parseFloat($('#donation').val());
            var subtotal = (plan==1 ? 20 : 30) * years;
            var total = subtotal + donation;
            $('#subtotal').val(subtotal);
            $('#total, #total-dummy').val(total);
        });
    });
</script>

<style type="text/css">
    #plan2 {
        display: none;
    }
    .form-group label {
        color: #3f7038;
    }
</style>

<?php get_footer(); ?>