WooDoo/templates/myaccount-calendar.php

<?php
/**
 * Template: Mi cuenta – Reservar una reunión
 */

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'        => 'Cargando…',
        'no_slots'       => 'No hay horarios disponibles para este día.',
        'select_slot'    => 'Selecciona un horario',
        'booking'        => 'Reservando…',
        'book_btn'       => 'Confirmar reserva',
        'cancel_confirm' => '¿Cancelar esta reunión?',
        'cancelling'     => 'Cancelando…',
        'cancelled'      => 'Reunión cancelada.',
        'error'          => 'Ha ocurrido un error. Inténtalo de nuevo.',
    ],
] );

$duration_mins = (int) get_option( 'woodoo_meeting_duration', 30 );
?>

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

    <!-- ── Próximas reuniones ─────────────────────────────────────────── -->
    <div class="woodoo-section">
        <h3>Tus próximas reuniones</h3>
        <div id="woodoo-meetings-list">
            <?php if ( empty( $upcoming ) ) : ?>
                <p class="woodoo-empty">No tienes reuniones programadas.</p>
            <?php else : ?>
                <div class="woodoo-meetings-grid">
                    <?php foreach ( $upcoming as $event ) :
                        $start_ts = strtotime( $event['start'] );
                        $end_ts   = strtotime( $event['stop'] );

                        $meses = [ '', 'ene', 'feb', 'mar', 'abr', 'may', 'jun',
                                   'jul', 'ago', 'sep', 'oct', 'nov', 'dic' ];
                        $mes   = $meses[ (int) gmdate( 'n', $start_ts ) ];
                    ?>
                        <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( $mes ); ?></span>
                            </div>
                            <div class="woodoo-meeting-card__info">
                                <strong><?php echo esc_html( $event['name'] ); ?></strong>
                                <span class="woodoo-meeting-card__time">
                                    <?php echo esc_html( gmdate( 'H:i', $start_ts ) . ' – ' . 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">
                                        Unirse a la videollamada
                                    </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'] ); ?>">
                                    Cancelar
                                </button>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- ── Reservar nueva reunión ─────────────────────────────────────── -->
    <div class="woodoo-section">
        <h3>Reservar una nueva reunión</h3>
        <p class="woodoo-desc">
            Las reuniones tienen una duración de <?php echo esc_html( $duration_mins ); ?> minutos.
            Selecciona una fecha para ver la disponibilidad.
        </p>

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

            <div class="woodoo-field">
                <label for="woodoo-booking-date">Selecciona una fecha</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>

            <div id="woodoo-slots-wrap" style="display:none;">
                <div class="woodoo-field">
                    <label>Horarios disponibles</label>
                    <div id="woodoo-slots-grid" class="woodoo-slots-grid"></div>
                </div>
            </div>

            <div id="woodoo-booking-confirm" style="display:none;">
                <div class="woodoo-field">
                    <label for="woodoo-booking-notes">Notas (opcional)</label>
                    <textarea id="woodoo-booking-notes" name="notes" rows="3"
                              placeholder="¿De qué te gustaría hablar?"></textarea>
                </div>

                <div class="woodoo-selected-slot-display">
                    <strong>Seleccionado:</strong>
                    <span id="woodoo-selected-slot-label"></span>
                </div>

                <button id="woodoo-book-btn" class="woodoo-btn woodoo-btn--primary" disabled>
                    Confirmar reserva
                </button>
            </div>

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

</div>