{% extends "base.html" %}

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

{% block content %}
<style>
.section-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.section-box h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50;
}
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.form-group {
    flex: 1;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.types-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.types-table th,
.types-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.types-table th {
    background: #f8f9fa;
    font-weight: 600;
}
.types-table tr:hover {
    background: #f8f9fa;
}
.price {
    font-weight: 500;
    color: #27ae60;
}
.price.free {
    color: #7f8c8d;
}
.back-link {
    margin-bottom: 20px;
    display: inline-block;
}
</style>

<div class="attendee-types-page">
    <a href="{{ url_for('event_detail', code=event.code) }}" class="back-link">&larr; {{ 'back_to_event'|t }}</a>

    <h1>{{ 'attendee_types'|t }} - {{ event.name }}</h1>

    <div class="section-box">
        <h2>{{ 'create_attendee_type'|t }}</h2>
        <form method="POST" action="{{ url_for('manage_attendee_types', event_id=event.id) }}">
            <div class="form-row">
                <div class="form-group">
                    <label for="name">{{ 'type_name'|t }} *</label>
                    <input type="text" id="name" name="name" placeholder="{{ 'e_g_vip_speaker_student'|t }}" required>
                </div>
                <div class="form-group">
                    <label for="price">{{ 'price'|t }} ({{ 'optional'|t }})</label>
                    <input type="number" id="price" name="price" step="0.01" min="0" placeholder="0.00">
                    <small style="color: #666;">{{ 'leave_empty_for_free'|t }}</small>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">{{ 'create_type'|t }}</button>
        </form>
    </div>

    <div class="section-box">
        <h2>{{ 'existing_types'|t }}</h2>

        {% if attendee_types %}
            <table class="types-table">
                <thead>
                    <tr>
                        <th>{{ 'name'|t }}</th>
                        <th>{{ 'price'|t }}</th>
                        <th>{{ 'registration_link'|t }}</th>
                        <th>{{ 'actions'|t }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for at in attendee_types %}
                        <tr>
                            <td><strong>{{ at.name }}</strong></td>
                            <td>
                                {% if at.price and at.price > 0 %}
                                    <span class="price">{{ at.price|format_currency }}</span>
                                {% else %}
                                    <span class="price free">{{ 'free'|t }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <code style="background: #f0f0f0; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                                    {{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}
                                </code>
                                <button type="button" class="btn btn-sm" style="padding: 2px 8px; margin-left: 8px;"
                                        onclick="copyLink('{{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}')">
                                    {{ 'copy'|t }}
                                </button>
                            </td>
                            <td>
                                <form method="GET" action="{{ url_for('edit_attendee_type', event_id=event.id, type_id=at.id) }}" style="display: inline;">
                                    <button type="submit" class="btn btn-sm" style="background: #2563eb; color: #fff; padding: 4px 10px; margin-right: 5px;">{{ 'edit'|t }}</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p class="no-types" style="color: #888; text-align: center; padding: 20px;">
                {{ 'no_attendee_types_yet'|t }}
            </p>
        {% endif %}
    </div>
</div>

<script>
function copyLink(url) {
    // Try modern clipboard API first
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            alert('{{ 'link_copied'|t }}');
        }, function(err) {
            // Fallback for HTTP sites
            fallbackCopy(url);
        });
    } else {
        // Fallback for older browsers or HTTP sites
        fallbackCopy(url);
    }
}

function fallbackCopy(url) {
    var textArea = document.createElement('textarea');
    textArea.value = url;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '-9999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
        var successful = document.execCommand('copy');
        if (successful) {
            alert('{{ 'link_copied'|t }}');
        } else {
            alert('{{ 'copy_failed'|t }}');
        }
    } catch (err) {
        alert('{{ 'copy_failed'|t }}');
    }
    document.body.removeChild(textArea);
}
</script>
{% endblock %}