conference/templates/attendee/event_register.html

{% extends "base.html" %}

{% block title %}{{ 'register_for'|t }} {{ event.name }} - NetEvents{% endblock %}

{% block content %}
<div class="event-registration-page">
    <div class="event-header">
        <h1>{{ event.name }}</h1>
        <div class="event-meta-box">
            <p><strong>{{ 'start'|t }}:</strong> {{ event.start_time|localized_date if event.start_time else 'TBD' }}</p>
            {% if event.end_time %}
            <p><strong>{{ 'end'|t }}:</strong> {{ event.end_time|localized_date }}</p>
            {% endif %}
            <p><strong>{{ 'location'|t }}:</strong> {{ event.location }}</p>
        </div>
        {% if event.description %}
        <div class="event-description-box">
            <p>{{ event.description }}</p>
        </div>
        {% endif %}
    </div>

    <div class="registration-content">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="alert alert-info">
                    {% for message in messages %}
                        <p>{{ message }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        {% if not registered %}
        <!-- Registration Form with Breakout Sessions -->
        <div class="registration-form-section">
            <h2>{{ 'register_as_attendee'|t }}</h2>
            {% if preselected_type %}
            <div class="alert alert-info">
                <p class="m-0"><strong>{{ 'registration_type'|t }}:</strong> {{ preselected_type.name }}
                {% if preselected_type.price and preselected_type.price > 0 %}
                    <span class="text-success ml-2">{{ preselected_type.price|format_currency }}</span>
                {% else %}
                    <span class="text-muted ml-2">{{ 'free'|t }}</span>
                {% endif %}
                </p>
            </div>
            {% endif %}
            <form method="POST" action="{{ url_for('register_event', code=event.code) }}" id="registration-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="first_name">{{ 'first_name'|t }}</label>
                        <input type="text" id="first_name" name="first_name" required>
                    </div>
                    <div class="form-group">
                        <label for="last_name">{{ 'last_name'|t }}</label>
                        <input type="text" id="last_name" name="last_name" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email">{{ 'email'|t }}</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div class="form-group">
                    <label for="organisation">{{ 'organisation'|t }}</label>
                    <input type="text" id="organisation" name="organisation">
                </div>

                <div class="form-group">
                    <label for="role">{{ 'role_profession'|t }}</label>
                    <input type="text" id="role" name="role">
                </div>

                <div class="form-group">
                    <label for="phone">{{ 'phone'|t }}</label>
                    <input type="tel" id="phone" name="phone">
                </div>

                <div class="form-group">
                    <label for="linkedin">{{ 'linkedin'|t }}</label>
                    <input type="url" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/...">
                </div>

                <div class="form-group">
                    <label for="introduction">{{ 'about_me'|t }}</label>
                    <textarea id="introduction" name="introduction" maxlength="254" rows="3"></textarea>
                    <small class="char-count"><span id="introduction_count">0</span>/254</small>
                </div>

                <div class="form-group">
                    <label for="password">{{ 'password'|t }}</label>
                    <input type="password" id="password" name="password" required minlength="8">
                </div>

                <div class="form-group">
                    <label for="confirm_password">{{ 'confirm_password'|t }}</label>
                    <input type="password" id="confirm_password" name="confirm_password" required>
                </div>

                {% if sessions %}
                <div class="form-group breakout-sessions-selection">
                    <label>{{ 'select_breakout_sessions'|t }}</label>
                    <p class="selection-hint">{{ 'select_breakout_sessions_hint'|t }}</p>
                    <div class="sessions-checkboxes">
                        {% for session in sessions %}
                        <div class="session-checkbox-item {% if session.max_attendees and session.rsvp_count >= session.max_attendees %}session-full{% endif %}">
                            <input type="checkbox" id="session_{{ session.id }}" name="breakout_sessions" value="{{ session.id }}"
                                   {% if session.max_attendees and session.rsvp_count >= session.max_attendees %}disabled{% endif %}>
                            <label for="session_{{ session.id }}">
                                <strong>{{ session.name }}</strong>
                                <span class="session-time">{{ session.start_time|localized_date('%H:%M') if session.start_time else '' }} - {{ session.end_time|localized_date('%H:%M') if session.end_time else '' }}</span>
                                <span class="session-location">{{ session.location }}</span>
                                {% if session.max_attendees %}
                                    <span class="session-capacity {% if session.rsvp_count >= session.max_attendees %}full{% endif %}">
                                        {{ session.rsvp_count }}/{{ session.max_attendees }} {{ 'spots'|t }}
                                    </span>
                                {% else %}
                                    <span class="session-capacity">{{ session.rsvp_count }} {{ 'registered'|t }}</span>
                                {% endif %}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <button type="submit" class="btn btn-primary btn-block">{{ 'register_for_event'|t }}</button>
            </form>
            <p class="login-link">{{ 'already_registered'|t }} <a href="{{ url_for('login') }}">{{ 'login'|t }}</a></p>
        </div>
        {% else %}
        <!-- Breakout Sessions Section -->
        <div class="breakout-sessions-section">
            <h2>{{ 'breakout_sessions'|t }}</h2>
            <p class="section-intro">{{ 'choose_sessions_intro'|t }}</p>

            {% if sessions %}
                <div class="sessions-list">
                    {% for session in sessions %}
                    <div class="session-card" data-session-code="{{ session.id }}">
                        <div class="session-info">
                            <h3>{{ session.name }}</h3>
                            <p><strong>{{ 'time'|t }}:</strong> {{ session.start_time|localized_date('%H:%M') if session.start_time else '' }} - {{ session.end_time|localized_date('%H:%M') if session.end_time else '' }}</p>
                            <p><strong>{{ 'location'|t }}:</strong> {{ session.location }}</p>
                            {% if session.max_attendees %}
                                <p><strong>{{ 'capacity'|t }}:</strong> <span class="rsvp-count">{{ session.rsvp_count }}</span> / {{ session.max_attendees }}</p>
                            {% else %}
                                <p><strong>{{ 'registered'|t }}:</strong> {{ session.rsvp_count }}</p>
                            {% endif %}
                            {% if session.description %}
                                <p>{{ session.description }}</p>
                            {% endif %}
                        </div>
                        <div class="session-actions">
                            {% if session.my_rsvp_status == 'registered' %}
                                <button class="btn btn-secondary rsvp-btn" data-session-code="{{ session.id }}" data-action="cancel">{{ 'cancel_rsvp'|t }}</button>
                            {% elif session.my_rsvp_status == 'cancelled' %}
                                <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.id }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
                            {% else %}
                                {% if not session.max_attendees or session.rsvp_count < session.max_attendees %}
                                    <button class="btn btn-primary rsvp-btn" data-session-code="{{ session.id }}" data-action="rsvp">{{ 'rsvp'|t }}</button>
                                {% else %}
                                    <span class="full-label">{{ 'session_full'|t }}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="no-sessions">{{ 'no_breakout_sessions'|t }}</p>
            {% endif %}

            <div class="registration-complete">
                <p>{{ 'you_are_registered'|t }} <strong>{{ event.name }}</strong>!</p>
                <a href="{{ url_for('login') }}" class="btn btn-outline">{{ 'go_to_login'|t }}</a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var intro = document.getElementById('introduction');
    var countEl = document.getElementById('introduction_count');
    if (intro && countEl) {
        intro.addEventListener('input', function() {
            countEl.textContent = intro.value.length;
        });
    }
});

document.querySelectorAll('.rsvp-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const sessionCode = this.dataset.sessionCode;
        const action = this.dataset.action;
        const endpoint = action === 'rsvp'
            ? `/attendee/breakout-session/${sessionCode}/rsvp`
            : `/attendee/breakout-session/${sessionCode}/cancel-rsvp`;

        try {
            const response = await fetch(endpoint, { method: 'POST' });
            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                showToast(data.error || '{{ "error_occurred"|t }}', 'error');
            }
        } catch (error) {
            showToast('{{ "error_processing_request"|t }}', 'error');
        }
    });
});
</script>
{% endblock %}