WooDoo/templates/myaccount-calendar.php

<?php
/**
 * Template: My Account – Book a Meeting
 *
 * Variables available:
 *   $upcoming     array   Upcoming booked meetings from Odoo
 *   $partner_id   int     Odoo partner ID (0 if unlinked)
 *   $user         WP_User Current user
 */

defined( 'ABSPATH' ) || exit;

wp_enqueue_style(  'woodoo-frontend' );
wp_enqueue_script( 'woodoo-frontend' );
wp_localize_script( 'woodoo-frontend', 'WooDooCalendar', [
    'nonce'    => wp_create_nonce( 'woodoo_calendar' ),
    'ajax_url' => admin_url( 'admin-ajax.php' ),
    'i18n'     => [
        'loading'         => __( 'Loading…', 'woodoo' ),
        'no_slots'        => __( 'No available slots for this day.', 'woodoo' ),
        'select_slot'     => __( 'Select a time slot', 'woodoo' ),
        'booking'         => __( 'Booking…', 'woodoo' ),
        'book_btn'        => __( 'Book this slot', 'woodoo' ),
        'cancel_confirm'  => __( 'Cancel this meeting?', 'woodoo' ),
        'cancelling'      => __( 'Cancelling…', 'woodoo' ),
        'cancelled'       => __( 'Meeting cancelled.', 'woodoo' ),
        'error'           => __( 'Something went wrong. Please try again.', 'woodoo' ),
    ],
] );
?>

<div class="woodoo-calendar-wrap">

    <!-- ── Upcoming Meetings ──────────────────────────────────────────── -->
    <div class="woodoo-section">
        <h3><?php esc_html_e( 'Your Upcoming Meetings', 'woodoo' ); ?></h3>
        <div id="woodoo-meetings-list">
            <?php if ( empty( $upcoming ) ) : ?>
                <p class="woodoo-empty"><?php esc_html_e( 'No upcoming meetings scheduled.', 'woodoo' ); ?></p>
            <?php else : ?>
                <div class="woodoo-meetings-grid">
                    <?php foreach ( $upcoming as $event ) :
                        $start_ts = strtotime( $event['start'] );
                        $end_ts   = strtotime( $event['stop'] );
                    ?>
                        <div class="woodoo-meeting-card" data-event-id="<?php echo esc_attr( $event['id'] ); ?>">
                            <div class="woodoo-meeting-card__date">
                                <span class="woodoo-meeting-card__day"><?php echo esc_html( gmdate( 'd', $start_ts ) ); ?></span>
                                <span class="woodoo-meeting-card__month"><?php echo esc_html( gmdate( 'M', $start_ts ) ); ?></span>
                            </div>
                            <div class="woodoo-meeting-card__info">
                                <strong><?php echo esc_html( $event['name'] ); ?></strong>
                                <span class="woodoo-meeting-card__time">
                                    <?php printf(
                                        '%s – %s',
                                        esc_html( gmdate( 'H:i', $start_ts ) ),
                                        esc_html( gmdate( 'H:i', $end_ts ) )
                                    ); ?>
                                </span>
                                <?php if ( ! empty( $event['videocall_location'] ) ) : ?>
                                    <a href="<?php echo esc_url( $event['videocall_location'] ); ?>"
                                       target="_blank" rel="noopener" class="woodoo-meeting-card__video">
                                        <?php esc_html_e( 'Join Video Call', 'woodoo' ); ?>
                                    </a>
                                <?php elseif ( ! empty( $event['location'] ) ) : ?>
                                    <span class="woodoo-meeting-card__loc">
                                        <?php echo esc_html( $event['location'] ); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                            <div class="woodoo-meeting-card__actions">
                                <button class="woodoo-cancel-meeting woodoo-btn woodoo-btn--sm woodoo-btn--outline"
                                        data-event-id="<?php echo esc_attr( $event['id'] ); ?>">
                                    <?php esc_html_e( 'Cancel', 'woodoo' ); ?>
                                </button>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- ── Book New Meeting ───────────────────────────────────────────── -->
    <div class="woodoo-section">
        <h3><?php esc_html_e( 'Book a New Meeting', 'woodoo' ); ?></h3>
        <p class="woodoo-desc">
            <?php printf(
                esc_html__( 'Slots are %d minutes. Pick a date to see availability.', 'woodoo' ),
                (int) get_option( 'woodoo_meeting_duration', 30 )
            ); ?>
        </p>

        <div class="woodoo-booking-form">

            <!-- Date picker -->
            <div class="woodoo-field">
                <label for="woodoo-booking-date">
                    <?php esc_html_e( 'Select Date', 'woodoo' ); ?>
                </label>
                <input type="date"
                       id="woodoo-booking-date"
                       name="booking_date"
                       min="<?php echo esc_attr( gmdate( 'Y-m-d', strtotime( '+1 day' ) ) ); ?>"
                       max="<?php echo esc_attr( gmdate( 'Y-m-d', strtotime( '+60 days' ) ) ); ?>">
            </div>

            <!-- Slot list (populated via JS) -->
            <div id="woodoo-slots-wrap" style="display:none;">
                <div class="woodoo-field">
                    <label><?php esc_html_e( 'Available Slots', 'woodoo' ); ?></label>
                    <div id="woodoo-slots-grid" class="woodoo-slots-grid">
                        <!-- Slots injected by JS -->
                    </div>
                </div>
            </div>

            <!-- Booking confirmation -->
            <div id="woodoo-booking-confirm" style="display:none;">
                <div class="woodoo-field">
                    <label for="woodoo-booking-notes">
                        <?php esc_html_e( 'Notes (optional)', 'woodoo' ); ?>
                    </label>
                    <textarea id="woodoo-booking-notes" name="notes" rows="3"
                              placeholder="<?php esc_attr_e( 'What would you like to discuss?', 'woodoo' ); ?>"></textarea>
                </div>

                <div class="woodoo-selected-slot-display">
                    <strong><?php esc_html_e( 'Selected:', 'woodoo' ); ?></strong>
                    <span id="woodoo-selected-slot-label"></span>
                </div>

                <button id="woodoo-book-btn" class="woodoo-btn woodoo-btn--primary" disabled>
                    <?php esc_html_e( 'Confirm Booking', 'woodoo' ); ?>
                </button>
            </div>

            <!-- Success message -->
            <div id="woodoo-booking-success" class="woodoo-notice woodoo-success" style="display:none;"></div>

            <!-- Error message -->
            <div id="woodoo-booking-error" class="woodoo-notice woodoo-error" style="display:none;"></div>
        </div>
    </div>

</div>