{% 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 style="background: #e8f4f8; border: 1px solid #b8daE3; border-radius: 5px; padding: 15px; margin-bottom: 20px;">
                <p style="margin: 0;"><strong>{{ 'registration_type'|t }}:</strong> {{ preselected_type.name }}
                {% if preselected_type.price and preselected_type.price > 0 %}
                    <span style="color: #27ae60; margin-left: 10px;">{{ preselected_type.price|format_currency }}</span>
                {% else %}
                    <span style="color: #7f8c8d; margin-left: 10px;">{{ '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="6">
                </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>

<style>
.event-registration-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.event-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.event-header h1 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.event-meta-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.event-meta-box p {
    margin: 5px 0;
}

.event-description-box {
    margin-top: 15px;
    color: #555;
}

.registration-content {
    display: grid;
    gap: 30px;
}

.registration-form-section {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.registration-form-section h2 {
    margin-bottom: 20px;
    color: #2c3e50;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.char-count {
    display: block;
    text-align: right;
    color: #888;
    font-size: 12px;
    margin-top: 4px;
}

.btn-block {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
}

.login-link {
    text-align: center;
    margin-top: 15px;
    color: #666;
}

.breakout-sessions-section {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.breakout-sessions-section h2 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.section-intro {
    color: #666;
    margin-bottom: 20px;
}

.session-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.session-info {
    flex: 1;
}

.session-info h3 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.session-info p {
    margin: 5px 0;
    color: #555;
}

.session-actions {
    margin-left: 20px;
}

.full-label {
    background: #e74c3c;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.no-sessions {
    text-align: center;
    color: #888;
    padding: 30px;
}

.registration-complete {
    margin-top: 30px;
    padding: 20px;
    background: #d4edda;
    border-radius: 8px;
    text-align: center;
}

.registration-complete p {
    margin-bottom: 15px;
}

.registration-complete a {
    display: inline-block;
}

.breakout-sessions-selection {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.breakout-sessions-selection > label {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.selection-hint {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.sessions-checkboxes {
    display: grid;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.session-checkbox-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s;
}

.session-checkbox-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.session-checkbox-item.session-full {
    opacity: 0.6;
    background: #f5f5f5;
}

.session-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    margin-top: 4px;
    cursor: pointer;
}

.session-checkbox-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.session-checkbox-item label {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.session-checkbox-item label strong {
    display: block;
    color: #2c3e50;
    margin-bottom: 5px;
}

.session-checkbox-item label span {
    display: block;
    font-size: 13px;
    color: #666;
}

.session-checkbox-item label .session-time {
    color: #3498db;
    font-weight: 500;
}

.session-checkbox-item label .session-location {
    color: #888;
}

.session-checkbox-item label .session-capacity {
    margin-top: 5px;
    font-weight: 500;
}

.session-checkbox-item label .session-capacity.full {
    color: #e74c3c;
}
</style>

<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 {
                alert(data.error || '{{ "error_occurred"|t }}');
            }
        } catch (error) {
            alert('{{ "error_processing_request"|t }}');
        }
    });
});
</script>
{% endblock %}