{% extends "base.html" %}

{% block title %}{{ 'connection_requests'|t }} - NetEvents{% endblock %}

{% block content %}
<div class="connection-requests">
    <h1>{{ 'connection_requests'|t }}</h1>
    <p>{{ 'people_scanned_qr'|t }}</p>

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

    {% if requests %}
        <div class="requests-list">
            {% for req in requests %}
            <div class="request-card">
                <div class="request-profile">
                    {% if req.profile_picture %}
                    <img src="{{ url_for('static', filename='uploads/' + req.profile_picture) }}" alt="{{ req.first_name }}" class="profile-photo">
                    {% else %}
                    <div class="profile-photo-placeholder"><span class="first-name">{{ req.first_name[0] }}</span><span class="last-name">{{ req.last_name[0] }}</span></div>
                    {% endif %}
                </div>
                <div class="request-info">
                    <h3><span class="first-name">{{ req.first_name }}</span> <span class="last-name">{{ req.last_name }}</span></h3>
                    <p class="request-email">{{ req.email }}</p>
                    <p class="request-org">{{ req.organisation if req.organisation else '' }}{% if req.role %} - {{ req.role }}{% endif %}</p>
                    {% if req.message %}
                        <p class="request-message">"{{ req.message[:150] }}{% if req.message|length > 150 %}...{% endif %}"</p>
                    {% endif %}
                    {% if req.introduction %}
                        <p class="request-intro">"{{ req.introduction }}"</p>
                    {% endif %}
                    <p class="request-time">{{ 'requested'|t }} {{ req.created_at|localized_date if req.created_at else 'recently' }}</p>
                </div>
                <div class="request-actions">
                    <a href="{{ url_for('respond_to_connection', connection_id=req.id) }}" class="btn btn-outline btn-sm">{{ 'review'|t }}</a>
                    <button class="btn btn-success btn-sm respond-btn" data-connection-id="{{ req.id }}" data-action="approve">{{ 'approve'|t }}</button>
                    <button class="btn btn-danger btn-sm respond-btn" data-connection-id="{{ req.id }}" data-action="reject">{{ 'reject'|t }}</button>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="no-requests">{{ 'no_pending_requests'|t }}</p>
    {% endif %}

    <div class="back-link">
        <a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
    </div>
</div>

<script>
document.querySelectorAll('.respond-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const connectionId = this.dataset.connectionId;
        const action = this.dataset.action;

        try {
            const response = await fetch(`/attendee/connection-request/${connectionId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: action })
            });
            const data = await response.json();

            if (data.success) {
                this.closest('.request-card').remove();
                // If no requests left, reload to show the empty state
                if (!document.querySelector('.request-card')) {
                    location.reload();
                }
            } else {
                showToast(data.error || 'Error processing request', 'error');
            }
        } catch (error) {
            showToast('Error processing request', 'error');
        }
    });
});
</script>
{% endblock %}