<?php
/**
 * Events Display Template - New Layout
 *
 * @package NemtlyBooking
 * @since 1.0.0
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get events data - prefix all variables
$nemtly_booking_events          = isset( $events ) ? $events : [];
$nemtly_booking_show_filters    = isset( $show_filters ) ? $show_filters : true;
$nemtly_booking_show_pagination = isset( $show_pagination ) ? $show_pagination : true;
$nemtly_booking_active_filter   = isset( $active_filter ) ? $active_filter : 'all';
?>

<div class="nb-events-display">
    <?php if ( $nemtly_booking_show_filters ) : ?>
        <div class="nb-flex nb-gap-4 nb-mb-8 nb-justify-center nb-flex-wrap">
            <button
                class="nb-px-6 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200 <?php echo 'all' === $nemtly_booking_active_filter ? 'nb-bg-slate-600 nb-border-slate-600' : ''; ?>"
                data-filter="all"
            >
                <?php esc_html_e( 'All Events', 'nemtly-booking' ); ?>
            </button>
            <button
                class="nb-px-6 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200 <?php echo 'today' === $nemtly_booking_active_filter ? 'nb-bg-slate-600 nb-border-slate-600' : ''; ?>"
                data-filter="today"
            >
                <?php esc_html_e( 'Today', 'nemtly-booking' ); ?>
            </button>
            <button
                class="nb-px-6 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200 <?php echo 'this-week' === $nemtly_booking_active_filter ? 'nb-bg-slate-600 nb-border-slate-600' : ''; ?>"
                data-filter="this-week"
            >
                <?php esc_html_e( 'This Week', 'nemtly-booking' ); ?>
            </button>
            <button
                class="nb-px-6 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200 <?php echo 'this-month' === $nemtly_booking_active_filter ? 'nb-bg-slate-600 nb-border-slate-600' : ''; ?>"
                data-filter="this-month"
            >
                <?php esc_html_e( 'This Month', 'nemtly-booking' ); ?>
            </button>
        </div>
    <?php endif; ?>

    <?php if ( empty( $nemtly_booking_events ) ) : ?>
        <div class="nb-text-center nb-py-12 nb-text-gray-600">
            <p><?php esc_html_e( 'No upcoming events found.', 'nemtly-booking' ); ?></p>
        </div>
    <?php else : ?>
        <!-- Events Display using new layout -->
        <div class="nb-bg-white nb-py-24 md:nb-py-32">
            <div class="nb-mx-auto nb-grid nb-max-w-7xl nb-grid-cols-1 nb-gap-20 nb-px-6 lg:nb-px-8 xl:nb-grid-cols-5">
                <div class="nb-max-w-2xl xl:nb-col-span-2">
                    <h2 class="nb-text-pretty nb-text-4xl nb-font-semibold nb-tracking-tight nb-text-gray-900 sm:nb-text-5xl">
                        <?php esc_html_e( 'Upcoming Events', 'nemtly-booking' ); ?>
                    </h2>
                    <p class="nb-mt-6 nb-text-lg nb-leading-8 nb-text-gray-600">
                        <?php esc_html_e( 'Discover our exciting lineup of events and activities. Join us for unforgettable experiences and connect with like-minded individuals.', 'nemtly-booking' ); ?>
                    </p>
                </div>
                <ul role="list" class="nb-divide-y nb-divide-gray-200 xl:nb-col-span-3" id="nb-events-grid">
                    <?php foreach ( $nemtly_booking_events as $nemtly_booking_event ) : ?>
                        <li class="nb-flex nb-flex-col nb-gap-10 nb-py-12 first:nb-pt-0 last:nb-nb-0 sm:nb-flex-row">
                            <div class="nb-aspect-[4/5] nb-w-52 nb-flex-none nb-rounded-2xl nb-object-cover nb-outline nb-outline-1 nb--outline-offset-1 nb-outline-black/5">
                                <?php if ( ! empty( $nemtly_booking_event['featured_image'] ) ) : ?>
                                    <img
                                        src="<?php echo esc_url( $nemtly_booking_event['featured_image'] ); ?>"
                                        alt="<?php echo esc_attr( $nemtly_booking_event['title'] ); ?>"
                                        class="nb-aspect-[4/5] nb-w-52 nb-flex-none nb-rounded-2xl nb-object-cover nb-outline nb-outline-1 nb--outline-offset-1 nb-outline-black/5"
                                        loading="lazy"
                                    />
                                <?php else : ?>
                                    <div class="nb-aspect-[4/5] nb-w-52 nb-flex-none nb-rounded-2xl nb-bg-gray-100 nb-flex nb-items-center nb-justify-center nb-outline nb-outline-1 nb--outline-offset-1 nb-outline-black/5">
                                        <span class="nb-text-4xl">📅</span>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div class="nb-max-w-xl nb-flex-auto">
                                <h3 class="nb-text-lg nb-leading-8 nb-font-semibold nb-tracking-tight nb-text-gray-900">
                                    <?php echo esc_html( $nemtly_booking_event['title'] ); ?>
                                </h3>
                                <p class="nb-text-base nb-leading-7 nb-text-gray-600">
                                    <?php
                                    if ( ! empty( $nemtly_booking_event['date'] ) && ! empty( $nemtly_booking_event['time'] ) ) {
                                        echo esc_html( sprintf( '%s at %s', $nemtly_booking_event['date'], $nemtly_booking_event['time'] ) );
                                    } elseif ( ! empty( $nemtly_booking_event['date'] ) ) {
                                        echo esc_html( $nemtly_booking_event['date'] );
                                    } elseif ( ! empty( $nemtly_booking_event['time'] ) ) {
                                        echo esc_html( $nemtly_booking_event['time'] );
                                    }
                                    ?>
                                </p>
                                <?php if ( ! empty( $nemtly_booking_event['location'] ) ) : ?>
                                    <p class="nb-text-base nb-leading-7 nb-text-gray-600">
                                        📍 <?php echo esc_html( $nemtly_booking_event['location'] ); ?>
                                    </p>
                                <?php endif; ?>
                                <p class="nb-mt-6 nb-text-base nb-leading-7 nb-text-gray-600">
                                    <?php
                                    if ( ! empty( $nemtly_booking_event['description'] ) ) {
                                        $nemtly_booking_description = wp_trim_words( $nemtly_booking_event['description'], 30, '...' );
                                        echo esc_html( $nemtly_booking_description );
                                    } else {
                                        esc_html_e( 'No description available.', 'nemtly-booking' );
                                    }
                                    ?>
                                </p>
                                <ul role="list" class="nb-mt-6 nb-flex nb-gap-x-6">
                                    <li>
                                        <button
                                            class="nb-text-gray-400 hover:nb-text-gray-500 nb-bg-transparent nb-border-none nb-cursor-pointer"
                                            data-event-id="<?php echo esc_attr( $nemtly_booking_event['id'] ); ?>"
                                            onclick="handleViewEvent(<?php echo esc_js( $nemtly_booking_event['id'] ); ?>)"
                                        >
                                            <span class="nb-sr-only"><?php esc_html_e( 'View Event', 'nemtly-booking' ); ?></span>
                                            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="nb-w-5 nb-h-5">
                                                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                            </svg>
                                        </button>
                                    </li>
                                    <?php if ( ! empty( $nemtly_booking_event['is_bookable'] ) && $nemtly_booking_event['is_bookable'] ) : ?>
                                        <li>
                                            <button
                                                class="nb-text-gray-400 hover:nb-text-gray-500 nb-bg-transparent nb-border-none nb-cursor-pointer"
                                                data-event-id="<?php echo esc_attr( $nemtly_booking_event['id'] ); ?>"
                                                onclick="handleBookEvent(<?php echo esc_js( $nemtly_booking_event['id'] ); ?>)"
                                            >
                                                <span class="nb-sr-only"><?php esc_html_e( 'Book Event', 'nemtly-booking' ); ?></span>
                                                <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="nb-w-5 nb-h-5">
                                                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                        </li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>

        <?php if ( $nemtly_booking_show_pagination && ! empty( $pagination ) ) : ?>
            <?php
            // Prefix pagination variable
            $nemtly_booking_pagination = $pagination;
            ?>
            <div class="nb-flex nb-justify-center nb-gap-2 nb-mt-8" id="nb-events-pagination">
                <?php if ( $nemtly_booking_pagination['current_page'] > 1 ) : ?>
                    <button class="nb-px-3 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200" onclick="handlePageChange(<?php echo esc_js( $nemtly_booking_pagination['current_page'] - 1 ); ?>)">
                        ← <?php esc_html_e( 'Previous', 'nemtly-booking' ); ?>
                    </button>
                <?php endif; ?>

                <?php
                $nemtly_booking_start_page = max( 1, $nemtly_booking_pagination['current_page'] - 2 );
                $nemtly_booking_end_page   = min( $nemtly_booking_pagination['total_pages'], $nemtly_booking_pagination['current_page'] + 2 );

                for ( $nemtly_booking_i = $nemtly_booking_start_page; $nemtly_booking_i <= $nemtly_booking_end_page; $nemtly_booking_i++ ) :
					?>
                    <button
                        class="nb-px-3 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200 <?php echo $nemtly_booking_i === $nemtly_booking_pagination['current_page'] ? 'nb-bg-slate-600 nb-text-white nb-border-slate-600' : ''; ?>"
                        onclick="handlePageChange(<?php echo esc_js( $nemtly_booking_i ); ?>)"
                    >
                        <?php echo esc_html( $nemtly_booking_i ); ?>
                    </button>
                <?php endfor; ?>

                <?php if ( $nemtly_booking_pagination['current_page'] < $nemtly_booking_pagination['total_pages'] ) : ?>
                    <button class="nb-px-3 nb-py-2 nb-rounded-md nb-border nb-border-gray-300 nb-bg-white nb-text-gray-700 nb-font-medium hover:nb-bg-gray-50 focus:nb-outline-none focus:nb-ring-2 focus:nb-ring-indigo-500 focus:nb-ring-offset-2 nb-transition-all nb-duration-200" onclick="handlePageChange(<?php echo esc_js( $nemtly_booking_pagination['current_page'] + 1 ); ?>)">
                        <?php esc_html_e( 'Next', 'nemtly-booking' ); ?> →
                    </button>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
</div>