<?php
/**
 * Booking Page Template
 *
 * Dedicated page for booking a specific event
 *
 * @package NemtlyBooking
 */

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

// Get event from query
global $wp_query;
$nemtly_booking_event = $wp_query->queried_object;

if ( null === $nemtly_booking_event || 'nemtly_event' !== $nemtly_booking_event->post_type ) {
    // Event not found, show 404
    status_header( 404 );
    nocache_headers();
    include get_404_template();
    return;
}

// Get event data - prefix all variables
$nemtly_booking_event_id       = $nemtly_booking_event->ID;
$nemtly_booking_event_date     = get_post_meta( $nemtly_booking_event_id, 'nemtly_event_date', true );
$nemtly_booking_event_time     = get_post_meta( $nemtly_booking_event_id, 'nemtly_event_time', true );
$nemtly_booking_event_duration = get_post_meta( $nemtly_booking_event_id, 'nemtly_event_duration', true );
$nemtly_booking_location       = get_post_meta( $nemtly_booking_event_id, 'nemtly_location', true );
$nemtly_booking_max_attendees  = get_post_meta( $nemtly_booking_event_id, 'nemtly_max_attendees', true );

// Format dates and times
$nemtly_booking_formatted_date = $nemtly_booking_event_date ? date_i18n( get_option( 'date_format' ), strtotime( $nemtly_booking_event_date ) ) : '';
$nemtly_booking_formatted_time = $nemtly_booking_event_time ? date_i18n( get_option( 'time_format' ), strtotime( $nemtly_booking_event_time ) ) : '';

// Calculate end time
$nemtly_booking_end_time = '';
if ( $nemtly_booking_event_time && $nemtly_booking_event_duration ) {
    $nemtly_booking_end_timestamp = strtotime( $nemtly_booking_event_time ) + ( $nemtly_booking_event_duration * 60 );
    $nemtly_booking_end_time      = date_i18n( get_option( 'time_format' ), $nemtly_booking_end_timestamp );
}

// Check if event is bookable
$nemtly_booking_is_bookable = true; // Add your booking logic here

// Enqueue booking form assets
wp_enqueue_style( 'nemtly-booking-form-styles' );
wp_enqueue_script( 'nemtly-booking-form' );

$nemtly_plugin_settings = get_option( 'nemtly_booking_settings', [] );

wp_localize_script(
    'nemtly-booking-form',
    'nemtlyBookingAjax',
    [
		'nonce'      => wp_create_nonce( 'nemtly_nonce' ),
		'ajaxUrl'    => admin_url( 'admin-ajax.php' ),
		'restUrl'    => rest_url( 'nemtly-booking/v1/' ),
		'restNonce'  => wp_create_nonce( 'wp_rest' ),
		'eventId'    => $nemtly_booking_event_id,
		'eventTitle' => get_the_title( $nemtly_booking_event ),
		'eventDate'  => $nemtly_booking_formatted_date,
		'eventTime'  => $nemtly_booking_formatted_time,
		'location'   => $nemtly_booking_location,
		'captcha'    => [
			'type'          => $nemtly_plugin_settings['captcha_type'] ?? 'disabled',
			'site_key'      => 'turnstile' === ( $nemtly_plugin_settings['captcha_type'] ?? '' )
				? esc_attr( $nemtly_plugin_settings['turnstile_site_key'] ?? '' )
				: '',
			'site_key_name' => 'turnstile',
		],
	]
);
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
    <?php
        printf(
            /* translators: %1$s: Event name, %2$s: Site name */
            esc_html__( 'Book %1$s - %2$s', 'nemtly-booking' ),
            esc_html( get_the_title( $nemtly_booking_event ) ),
            esc_html( get_bloginfo( 'name' ) )
        );
		?>
    </title>
    <?php wp_head(); ?>
</head>
<body <?php body_class( 'nemtly-booking-page' ); ?>>
    <?php wp_body_open(); ?>

    <div class="nb-container nb-mx-auto nb-px-4 nb-py-8">
        <!-- Breadcrumb -->
        <nav class="nb-flex nb-text-sm nb-mb-8" aria-label="<?php esc_attr_e( 'Breadcrumb', 'nemtly-booking' ); ?>">
            <ol class="nb-flex nb-items-center nb-space-x-2">
                <li>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="nb-text-gray-500 hover:nb-text-gray-700">
                        <?php esc_html_e( 'Home', 'nemtly-booking' ); ?>
                    </a>
                </li>
                <li class="nb-flex nb-items-center">
                    <svg class="nb-w-4 nb-h-4 nb-text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                    <a href="<?php echo esc_url( get_permalink( $nemtly_booking_event_id ) ); ?>" class="nb-text-gray-500 hover:nb-text-gray-700">
                        <?php echo esc_html( get_the_title( $nemtly_booking_event ) ); ?>
                    </a>
                </li>
                <li class="nb-flex nb-items-center">
                    <svg class="nb-w-4 nb-h-4 nb-text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                    <span class="nb-text-gray-900"><?php esc_html_e( 'Booking', 'nemtly-booking' ); ?></span>
                </li>
            </ol>
        </nav>

        <!-- Page Header -->
        <header class="nb-text-center nb-mb-12">
            <h1 class="nb-text-4xl nb-font-bold nb-text-gray-900 nb-mb-4">
                <?php
                printf(
                    /* translators: %s: Event name */
                    esc_html__( 'Book %s', 'nemtly-booking' ),
                    esc_html( get_the_title( $nemtly_booking_event ) )
                );
                ?>
            </h1>
            <p class="nb-text-xl nb-text-gray-600">
                <?php esc_html_e( 'Complete the form below to secure your spot at this event.', 'nemtly-booking' ); ?>
            </p>
        </header>

        <div class="nb-grid nb-grid-cols-1 lg:nb-grid-cols-3 nb-gap-12">
            <!-- Event Summary -->
            <div class="nb-lg:nb-col-span-1">
                <div class="nb-bg-white nb-rounded-lg nb-shadow-lg nb-p-6 nb-sticky nb-top-8">
                    <h2 class="nb-text-lg nb-font-semibold nb-text-gray-900 nb-mb-4">
                        <?php esc_html_e( 'Event Details', 'nemtly-booking' ); ?>
                    </h2>

                    <div class="nb-space-y-4">
                        <!-- Event Title -->
                        <div>
                            <h3 class="nb-font-medium nb-text-gray-900"><?php echo esc_html( get_the_title( $nemtly_booking_event ) ); ?></h3>
                        </div>

                        <!-- Date & Time -->
                        <?php if ( $nemtly_booking_formatted_date || $nemtly_booking_formatted_time ) : ?>
                            <div class="nb-flex nb-items-center nb-gap-2 nb-text-gray-600">
                                <svg class="nb-w-5 nb-h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <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>
                                <span>
                                    <?php
                                    if ( $nemtly_booking_formatted_date ) {
										echo esc_html( $nemtly_booking_formatted_date );}
									?>
                                    <?php
                                    if ( $nemtly_booking_formatted_date && $nemtly_booking_formatted_time ) {
										echo ' at ';}
									?>
                                    <?php
                                    if ( $nemtly_booking_formatted_time ) {
										echo esc_html( $nemtly_booking_formatted_time );}
									?>
                                    <?php
                                    if ( $nemtly_booking_end_time ) {
										echo ' - ' . esc_html( $nemtly_booking_end_time );}
									?>
                                </span>
                            </div>
                        <?php endif; ?>

                        <!-- Location -->
                        <?php if ( $nemtly_booking_location ) : ?>
                            <div class="nb-flex nb-items-start nb-gap-2 nb-text-gray-600">
                                <svg class="nb-w-5 nb-h-5 nb-mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                                </svg>
                                <span><?php echo esc_html( $nemtly_booking_location ); ?></span>
                            </div>
                        <?php endif; ?>

                        <!-- Event Description Preview -->
                        <?php if ( $nemtly_booking_event->post_content ) : ?>
                            <div class="nb-pt-4 nb-border-t nb-border-gray-200">
                                <h4 class="nb-font-medium nb-text-gray-900 nb-mb-2">
                                    <?php esc_html_e( 'About this Event', 'nemtly-booking' ); ?>
                                </h4>
                                <div class="nb-prose nb-prose-sm nb-text-gray-600">
                                    <?php echo wp_kses_post( wp_trim_words( $nemtly_booking_event->post_content, 30, '...' ) ); ?>
                                </div>
                                <a href="<?php echo esc_url( get_permalink( $nemtly_booking_event_id ) ); ?>" class="nb-inline-flex nb-items-center nb-gap-1 nb-text-sm nb-text-indigo-600 hover:nb-text-indigo-800 nb-mt-2">
                                    <?php esc_html_e( 'View full details', 'nemtly-booking' ); ?>
                                    <svg class="nb-w-4 nb-h-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Booking Form -->
            <div class="nb-lg:nb-col-span-2">
                <?php if ( $nemtly_booking_is_bookable ) : ?>
                    <div class="nb-bg-white nb-rounded-lg nb-shadow-lg nb-p-8">
                        <h2 class="nb-text-2xl nb-font-bold nb-text-gray-900 nb-mb-6">
                            <?php esc_html_e( 'Complete Your Booking', 'nemtly-booking' ); ?>
                        </h2>

                        <!-- Booking Form Container -->
                        <div id="nb-booking-form-container"
                            data-event-id="<?php echo esc_attr( $nemtly_booking_event_id ); ?>"
                            data-event-title="<?php echo esc_attr( get_the_title( $nemtly_booking_event ) ); ?>"
                            data-event-date="<?php echo esc_attr( $nemtly_booking_event_date ); ?>"
                            data-event-time="<?php echo esc_attr( $nemtly_booking_event_time ); ?>"
                            data-location="<?php echo esc_attr( $nemtly_booking_location ); ?>">
                            <!-- Booking form will be loaded here via JavaScript -->
                            <div class="nb-text-center nb-py-12 nb-text-gray-500">
                                <div class="nb-inline-block nb-animate-spin nb-rounded-full nb-h-8 nb-w-8 nb-border-b-2 nb-border-indigo-600"></div>
                                <p class="nb-mt-4"><?php esc_html_e( 'Loading booking form...', 'nemtly-booking' ); ?></p>
                            </div>
                        </div>
                    </div>
                <?php else : ?>
                    <div class="nb-bg-yellow-50 nb-border nb-border-yellow-200 nb-rounded-lg nb-p-6 nb-text-center">
                        <svg class="nb-w-12 nb-h-12 nb-text-yellow-400 nb-mx-auto nb-mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                        <h3 class="nb-text-lg nb-font-medium nb-text-yellow-800">
                            <?php esc_html_e( 'Booking Not Available', 'nemtly-booking' ); ?>
                        </h3>
                        <p class="nb-mt-2 nb-text-yellow-700">
                            <?php esc_html_e( 'This event is no longer available for booking.', 'nemtly-booking' ); ?>
                        </p>
                        <div class="nb-mt-6">
                            <a href="<?php echo esc_url( get_permalink( $nemtly_booking_event_id ) ); ?>"
                                class="nb-inline-flex nb-items-center nb-gap-2 nb-px-4 nb-py-2 nb-bg-indigo-600 nb-text-white nb-rounded-md nb-font-medium hover:nb-bg-indigo-700">
                                <?php esc_html_e( 'View Event Details', 'nemtly-booking' ); ?>
                            </a>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <?php wp_footer(); ?>
</body>
</html>