<?php
/**
 * Template Name: Events Page
 *
 * @package Acharya_Rajnikant
 */

get_header();
?>


<!-- Page Hero Section -->
<section class="page-hero py-5 mb-5"
    style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); min-height: 40vh; display: flex; align-items: center;">
    <div class="container text-center text-white position-relative" style="z-index: 2;">
        <h1 class="display-3 fw-bold mb-3 animate-fade-in-up text-white">
            <?php the_title(); ?>
        </h1>
        <?php acharyarajnikant_breadcrumb(); ?>
    </div>
    <!-- <div class="hero-overlay"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('<?php echo get_template_directory_uri(); ?>/assets/images/pattern.png'); opacity: 0.1;">
    </div> -->
</section>

<section class="events-section py-5">
    <div class="container">
        <div class="row g-5">
            <?php
            $events_query = new WP_Query(array(
                'post_type' => 'event',
                'posts_per_page' => -1,
                'post_status' => 'publish',
                // You could add meta_key ordering here if you want to sort by date
            ));

            if ($events_query->have_posts()):
                while ($events_query->have_posts()):
                    $events_query->the_post();
                    $event_date = get_field('event_date') ?: 'Date To Be Announced';
                    $event_venue = get_field('event_venue') ?: 'Venue TBD';
                    $event_address = get_field('event_address') ?: '';
                    $event_location = get_field('event_location') ?: 'Location TBD';
                    $event_time = get_field('event_time') ?: 'Time TBD';
                    $event_image = get_the_post_thumbnail_url() ?: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=800&auto=format&fit=crop';
                    ?>
                                <div class="col-lg-6">
                                    <div class="event-card-modern h-100">
                                        <div class="event-map-top">
                                            <img src="<?php echo esc_url($event_image); ?>" class="w-100 h-100 object-fit-cover"
                                            alt="<?php the_title_attribute(); ?>">
                                    </div>
                                    <div class="event-details-body d-flex flex-column align-items-center">
                                        <h3 class="event-card-title">
                                            <?php the_title(); ?>
                                        </h3>

                                        <div class="event-info-item">
                                            <span class="event-info-label">तारीख: &nbsp;</span>
                                            <span class="event-info-value">
                                                <?php echo esc_html($event_date); ?>
                                            </span>
                                        </div>

                                        <div class="event-info-item">
                                            <span class="event-info-label">कार्यक्रम का स्थान: &nbsp;</span>
                                            <span class="event-info-value">
                                                <?php echo esc_html($event_venue); ?>
                                            </span>
                                        </div>

                                        <?php if ($event_address): ?>
                                                <div class="event-address">
                                                    <?php echo esc_html($event_address); ?>
                                                </div>
                                        <?php endif; ?>

                                        <div class="event-info-item">
                                            <span class="event-info-label">जगह: &nbsp;</span>
                                            <span class="event-info-value">
                                                <?php echo esc_html($event_location); ?>
                                            </span>
                                        </div>

                                        <div class="event-info-item">
                                            <span class="event-info-label">समय: &nbsp;</span>
                                            <span class="event-info-value">
                                                <?php echo esc_html($event_time); ?>
                                            </span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <?php
                endwhile;
                wp_reset_postdata();
            else:
                ?>
                    <div class="col-12 text-center">
                        <p class="text-muted">No upcoming events currently scheduled. Please check back later.</p>
                    </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php get_template_part('template-parts/content', 'cta'); ?>

<?php
get_footer();