<?php /* Template Name: Homepage */ get_header(); ?>

<div class="uk-cover-container uk-text-center banner">
    <canvas class="uk-visible@m" width="" height="600"></canvas>
    <canvas class="uk-hidden@m" width="" height="450"></canvas>

	<img uk-img data-src="<?php the_post_thumbnail_url('full'); ?>" data-width data-height uk-cover>


	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle">
        <div>
           <h1>JET BLACK MOUNTAIN</h1>
		   <h3 class="yellow">Live Music That Moves You!</h3>
		   <p>Country hits, classic rock, and pop from B.C.’s premier four-piece band.</p>
		   <p class="uk-text-center"><a href="<?php echo home_url(); ?>/contact-us/" class="yellow_button">Contact Us!</a></p>
        </div>
    </div>
</div>
<div class="uk-container">

<h2 class="uk-text-center uk-margin-large-top">Upcoming Events</h2>
<?php
// Query for Upcoming Events
$upcoming_args = [
    'post_type'      => 'events',
    'posts_per_page' => -1,
    'meta_key'       => 'date_of_event',
    'orderby'        => 'meta_value',
    'order'          => 'ASC',
    'meta_query'     => [
        [
            'key'     => 'date_of_event',
            'value'   => current_time('Y-m-d H:i:s'),
            'compare' => '>=',
            'type'    => 'DATETIME',
        ],
    ],
];

$upcoming_query = new WP_Query($upcoming_args);

if ($upcoming_query->have_posts()) : ?>
    
    <div class="event-list uk-child-width-1-4@m uk-grid-match uk-grid-small" uk-grid>
    <?php while ($upcoming_query->have_posts()) : $upcoming_query->the_post();
        $event_date = get_field('date_of_event'); // ACF field for date and time
        $formatted_date = date("F j, Y g:i a", strtotime($event_date));?>
        <div>
			<div class="single_event_box">
				<h4><?php the_title(); ?></h4>
				<?php if ( has_post_thumbnail() ) : ?> 
					<div class=" uk-text-center banner">
						<img uk-img data-src="<?php the_post_thumbnail_url('medium'); ?>" data-width data-height>
					</div>
				<?php endif; ?>
				<p><?php echo esc_html($formatted_date); ?></p>
			</div>
        </div>
        <?php
    endwhile; ?>
    </div>
<?php else : ?>
    <h3 class="uk-text-center">No upcoming events schedule, check back soon!</h3>
	<p class="uk-text-center"><a href="<?php echo home_url(); ?>/contact-us/" class="yellow_button">Want to book us?</a></p>
<?php endif;

// Reset post data
wp_reset_postdata();

// Query for Past Events
$past_args = [
    'post_type'      => 'events',
    'posts_per_page' => -1,
    'meta_key'       => 'date_of_event',
    'orderby'        => 'meta_value',
    'order'          => 'DESC',
    'meta_query'     => [
        [
            'key'     => 'date_of_event',
            'value'   => current_time('Y-m-d H:i:s'),
            'compare' => '<',
            'type'    => 'DATETIME',
        ],
    ],
];

$past_query = new WP_Query($past_args);

if ($past_query->have_posts()) : ?>
    <h2 class="uk-text-center uk-margin-large-top">Past Events</h2>
    <div class="event-list uk-child-width-1-4@m uk-grid-match uk-grid-small" uk-grid>
    <?php while ($past_query->have_posts()) : $past_query->the_post();
        $event_date = get_field('date_of_event'); // ACF field for date and time
        $formatted_date = date("F j, Y g:i a", strtotime($event_date));
        ?>
        <div>
			<div class="single_event_box">
				<h4><?php the_title(); ?></h4>
				<?php if ( has_post_thumbnail() ) : ?> 
					<div class=" uk-text-center banner">
						<img uk-img data-src="<?php the_post_thumbnail_url('medium'); ?>" data-width data-height>
					</div>
				<?php endif; ?>
				<p><?php echo esc_html($formatted_date); ?></p>
			</div>
        </div>
        <?php
    endwhile;
    echo '</div>';
else :
    echo '<p>No past events found.</p>';
endif;

// Reset post data
wp_reset_postdata();
?>
</div>

<div class="uk-container">
	<main role="main">
			<section>

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

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

					<?php the_content(); ?>

					<br class="clear">

					<?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-label uk-float-right' ); ?>

				</article>

			<?php endwhile; ?><?php endif; ?>

			</section>
	</main>
</div>
<?php get_footer(); ?>
