{% extends "base.html" %}

{% block title %}{{ event.name }} - NetEvents{% endblock %}

{% block content %}
<div style="padding: 20px;">
<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;
}
.section-actions {
    margin-bottom: 15px;
}
.staff-table,
.sessions-table,
.attendees-table {
    width: 100%;
}
.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;
}
th.sortable {
    cursor: pointer;
    user-select: none;
}
th.sortable:hover {
    background: #f0f0f0;
}
.sort-icon::before {
    content: '\2195';
    margin-left: 5px;
    opacity: 0.4;
}
th.sort-asc .sort-icon::before {
    content: '\2191';
    opacity: 1;
}
th.sort-desc .sort-icon::before {
    content: '\2193';
    opacity: 1;
}
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.modal-header h2 {
    margin-top: 0;
    color: #dc3545;
}
.modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Wide screen - spread content */
@media (min-width: 1400px) {
    .event-detail {
        max-width: 100%;
    }

    .event-detail .section-box {
        padding: 30px 40px;
    }

    .event-meta-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .staff-section .section-box,
    .breakout-sessions-section .section-box,
    .attendees-section .section-box {
        padding: 25px 30px;
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .event-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

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

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .staff-table,
    .sessions-table,
    .attendees-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }

    .section-box {
        padding: 15px;
    }

    .modal-content {
        padding: 16px;
        margin: 10px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}
</style>
<div class="event-detail">
    <div class="event-header">
        <h1>{{ event.name }}</h1>
        <div class="event-actions">
            <a href="{{ url_for('edit_event', event_id=event.id) }}" class="btn btn-outline">{{ 'edit_event'|t }}</a>
        </div>
    </div>

    {% if event.description %}
    <div class="event-description-box">
        <h3>{{ 'description'|t }}</h3>
        <p>{{ event.description }}</p>
    </div>
    {% endif %}

    <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>
        <p><strong>{{ 'max_attendees'|t }}:</strong> {{ event.max_attendees or ('unlimited'|t) }}</p>
        <p><strong>{{ 'registered_attendees'|t }}:</strong> <span id="attendee-count">{{ attendees|length }}</span></p>
        <p><strong>{{ 'registration_link'|t }}:</strong> <span id="reg-link">{{ url_for('register_event', code=event.code, _external=True) }}</span> <button type="button" style="padding: 2px 6px; font-size: 11px;" onclick="navigator.clipboard.writeText('{{ url_for('register_event', code=event.code, _external=True) }}').then(() => this.textContent = 'Copied!')">Copy</button></p>
    </div>

    <section class="attendee-types-section">
        <div class="section-box">
            <h2>{{ 'attendee_types'|t }}</h2>
            <div class="section-actions">
                <a href="{{ url_for('manage_attendee_types', event_id=event.id) }}" class="btn btn-primary">{{ 'manage_types'|t }}</a>
            </div>

            {% if attendee_types %}
                <table class="types-table">
                    <thead>
                        <tr>
                            <th>{{ 'type_name'|t }}</th>
                            <th>{{ 'price'|t }}</th>
                            <th>{{ 'registration_link'|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 style="color: #27ae60; font-weight: 500;">{{ at.price|format_currency }}</span>
                                    {% else %}
                                        <span style="color: #7f8c8d;">{{ '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>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="no-types" style="color: #888;">{{ 'no_attendee_types_defined'|t }} <a href="{{ url_for('manage_attendee_types', event_id=event.id) }}">{{ 'create_first_type'|t }}</a></p>
            {% endif %}
        </div>
    </section>

    <section class="staff-section">
        <div class="section-box">
            <h2>{{ 'staff'|t }}</h2>
            <div class="section-actions">
                <button type="button" class="btn btn-primary" id="add-staff-btn">{{ 'add_staff'|t }}</button>
            </div>

            <div id="add-staff-form" style="display: none; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px;">
                <form method="POST" action="{{ url_for('manage_event_staff', event_id=event.id) }}" id="staff-inline-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="staff_first_name">{{ 'first_name'|t }}</label>
                            <input type="text" id="staff_first_name" name="first_name" required>
                        </div>
                        <div class="form-group">
                            <label for="staff_last_name">{{ 'last_name'|t }}</label>
                            <input type="text" id="staff_last_name" name="last_name" required>
                        </div>
                        <div class="form-group">
                            <label for="staff_email">{{ 'email'|t }}</label>
                            <input type="email" id="staff_email" name="email" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">{{ 'add_staff_member'|t }}</button>
                    <button type="button" class="btn btn-outline" id="cancel-staff-btn">{{ 'cancel'|t }}</button>
                </form>
                {% if other_events %}
                <form method="POST" action="{{ url_for('batch_add_staff', event_id=event.id) }}" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
                    <div class="form-row" style="align-items: flex-end;">
                        <div class="form-group" style="flex: 1;">
                            <label for="batch_source_event">Or add staff from another event:</label>
                            <select name="source_event_id" id="batch_source_event" required>
                                <option value="">Select event...</option>
                                {% for other_event in other_events %}
                                <option value="{{ other_event.id }}">{{ other_event.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <button type="submit" class="btn btn-secondary">Batch Add</button>
                    </div>
                </form>
                {% endif %}
            </div>

            {% if staff %}
                <table class="staff-table" id="event-staff-table">
                    <thead>
                        <tr>
                            <th data-sort="name" class="sortable">{{ 'name'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="email" class="sortable">{{ 'email'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="status" class="sortable">{{ 'status'|t }} <span class="sort-icon"></span></th>
                            <th>{{ 'actions'|t }}</th>
                        </tr>
                    </thead>
                    <tbody id="event-staff-tbody">
                        {% for member in staff %}
                            <tr data-name="{{ member.first_name }} {{ member.last_name }}" data-email="{{ member.email }}" data-status="{{ member.invite_token }}">
                                <td>{{ member.first_name }} {{ member.last_name }}</td>
                                <td>{{ member.email }}</td>
                                <td>
                                    {% if member.invite_token %}
                                        <span class="badge badge-pending">{{ 'invite_pending'|t }}</span>
                                    {% else %}
                                        <span class="badge badge-success">{{ 'active'|t }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ url_for('edit_staff', event_id=event.id, staff_id=member.id) }}" class="btn btn-sm btn-success">{{ 'view'|t }}</a>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="showDeleteModal({{ member.id }}, '{{ member.first_name }} {{ member.last_name }}', '{{ member.email }}')">{{ 'remove'|t }}</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="no-staff">{{ 'no_staff_yet'|t }}</p>
            {% endif %}
        </div>
    </section>

    <div id="staffDeleteModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>{{ 'remove_staff_member'|t }}</h2>
                <p>{{ 'confirm_remove_staff'|t }} <strong id="staffName"></strong> {{ 'from_event'|t }}?</p>
                <p style="color: #666; font-size: 14px;">{{ 'email'|t }}: <span id="staffEmail"></span></p>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-outline" onclick="closeStaffDeleteModal()">{{ 'cancel'|t }}</button>
                <form id="staffDeleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">{{ 'remove'|t }}</button>
                </form>
            </div>
        </div>
    </div>

    <section class="breakout-sessions-section">
        <div class="section-box">
            <h2>{{ 'breakout_sessions'|t }}</h2>
            <div class="section-actions">
                <a href="{{ url_for('create_breakout_session', event_id=event.id) }}" class="btn btn-primary">{{ 'add_breakout_session'|t }}</a>
            </div>

            {% if breakout_sessions %}
                <table class="sessions-table">
                    <thead>
                        <tr>
                            <th>{{ 'name'|t }}</th>
                            <th>{{ 'time'|t }}</th>
                            <th>{{ 'location'|t }}</th>
                            <th>{{ 'max_attendees'|t }}</th>
                            <th>{{ 'registered'|t }}</th>
                            <th>{{ 'actions'|t }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for session in breakout_sessions %}
                            <tr>
                                <td>{{ session.name }}</td>
                                <td>{{ session.start_time|localized_date }}</td>
                                <td>{{ session.location or '-' }}</td>
                                <td>{{ session.max_attendees or ('unlimited'|t) }}</td>
                                <td>{{ session.registered_count|default(0) }}</td>
                                <td>
                                    <a href="{{ url_for('view_breakout_session', code=session.code) }}" class="btn btn-sm btn-success">{{ 'view'|t }}</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="no-sessions">{{ 'no_breakout_sessions_yet'|t }}</p>
            {% endif %}
        </div>
    </section>

    <section class="attendees-section">
        <div class="section-box">
            <h2>{{ 'registered_attendees'|t }}</h2>
            <div class="section-actions">
                <a href="{{ url_for('register_attendee', code=event.code) }}" class="btn btn-primary">{{ 'add_attendee'|t }}</a>
                <a href="{{ url_for('event_badges', event_id=event.id) }}" class="btn btn-secondary">🖨️ {{ 'print_badges'|t }}</a>
                <a href="{{ url_for('download_rectangular_badges', event_id=event.id) }}" class="btn btn-secondary">🏷️ Rectangular Labels (80x50mm)</a>
                <a href="{{ url_for('download_attendees_excel', event_id=event.id) }}" class="btn btn-secondary">📥 {{ 'download_excel'|t }}</a>
            </div>

            {% if attendees %}
                <form method="POST" action="{{ url_for('batch_assign_attendee_type', event_id=event.id) }}" id="batch-assign-form">
                    <div style="margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px; display: flex; gap: 10px; align-items: center;">
                        <input type="checkbox" id="select-all-attendees" style="width: auto;">
                        <label for="select-all-attendees" style="margin: 0; font-weight: 500;">{{ 'select_all'|t }}</label>
                        <span style="margin-left: 20px;">{{ 'assign_type'|t }}:</span>
                        <select name="attendee_type_id" id="batch-type-select" style="padding: 5px 10px;">
                            <option value="">{{ 'no_type'|t }}</option>
                            {% for at in attendee_types %}
                                <option value="{{ at.id }}">{{ at.name }} {% if at.price and at.price > 0 %}({{ at.price|format_currency }}){% endif %}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" class="btn btn-sm btn-primary">{{ 'apply'|t }}</button>
                        <span id="selected-count" style="color: #888; font-size: 12px;"></span>
                    </div>
                </form>

                <table class="attendees-table" id="attendees-table">
                    <thead>
                        <tr>
                            <th style="width: 40px;"></th>
                            <th data-sort="name" class="sortable">{{ 'name'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="organisation" class="sortable">{{ 'organisation'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="role" class="sortable">{{ 'role'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="type" class="sortable">{{ 'type'|t }} <span class="sort-icon"></span></th>
                            <th data-sort="status" class="sortable">{{ 'status'|t }} <span class="sort-icon"></span></th>
                            <th>{{ 'actions'|t }}</th>
                        </tr>
                    </thead>
                    <tbody id="attendees-tbody">
                        {% for attendee in attendees %}
                            <tr data-name="{{ attendee.first_name }} {{ attendee.last_name }}" data-organisation="{{ attendee.organisation or '' }}" data-role="{{ attendee.role or '' }}" data-status="{{ attendee.checked_in }}" data-type="{{ attendee.attendee_type_name or '' }}">
                                <td>
                                    <input type="checkbox" name="attendee_ids" value="{{ attendee.id }}" class="attendee-checkbox" form="batch-assign-form">
                                </td>
                                <td>{{ attendee.first_name }} {{ attendee.last_name }}</td>
                                <td>{{ (attendee.organisation)|spacify if attendee.organisation else '-' }}</td>
                                <td>{{ (attendee.role)|spacify if attendee.role else '-' }}</td>
                                <td>
                                    {% if attendee.attendee_type_name %}
                                        <span class="badge" style="background: #3498db; color: white;">{{ attendee.attendee_type_name }}</span>
                                    {% else %}
                                        <span style="color: #aaa;">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if attendee.checked_in %}
                                        <span class="badge badge-success">{{ 'checked_in'|t }}</span>
                                    {% else %}
                                        <span class="badge badge-pending">{{ 'not_checked_in'|t }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if not attendee.checked_in %}
                                        <button class="btn btn-sm btn-success checkin-btn" data-attendee-id="{{ attendee.id }}">{{ 'check_in'|t }}</button>
                                    {% else %}
                                        <span class="text-muted">{{ 'checked_in'|t }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="no-attendees">{{ 'no_attendees_yet'|t }}</p>
            {% endif %}
        </div>
    </section>
</div>

<script>
document.getElementById('add-staff-btn').addEventListener('click', function() {
    document.getElementById('add-staff-form').style.display = 'block';
    this.style.display = 'none';
});

document.getElementById('cancel-staff-btn').addEventListener('click', function() {
    document.getElementById('add-staff-form').style.display = 'none';
    document.getElementById('add-staff-btn').style.display = 'inline-block';
});

document.getElementById('staff-inline-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = this;
    const formData = new FormData(form);

    fetch(form.action, {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            location.reload();
        }
    }).catch(error => {
        alert('{{ "error_adding_staff"|t }}');
    });
});
</script>
</div>

<script>
document.querySelectorAll('.checkin-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const attendeeId = this.dataset.attendeeId;
        const eventId = {{ event.id }};

        try {
            const response = await fetch(`/organizer/event/${eventId}/checkin/${attendeeId}`, {
                method: 'POST'
            });

            if (response.ok) {
                // Update status cell (6th td) and remove checkin button
                const row = this.closest('tr');
                row.querySelector('td:nth-child(6)').innerHTML = '<span class="badge badge-success">{{ "checked_in"|t }}</span>';
                this.remove();
                document.getElementById('attendee-count').textContent = parseInt(document.getElementById('attendee-count').textContent) + 1;
            }
        } catch (error) {
            alert('{{ "error_checking_in"|t }}');
        }
    });
});

// Attendee table sorting
const sortableHeaders = document.querySelectorAll('#attendees-table th.sortable');
let currentSort = { column: null, direction: 'asc' };

sortableHeaders.forEach(th => {
    th.addEventListener('click', () => {
        const column = th.dataset.sort;
        const direction = currentSort.column === column && currentSort.direction === 'asc' ? 'desc' : 'asc';
        currentSort = { column, direction };

        sortableHeaders.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
        th.classList.add(direction === 'asc' ? 'sort-asc' : 'sort-desc');

        const tbody = document.getElementById('attendees-tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));

        rows.sort((a, b) => {
            let valA = a.dataset[column] || '';
            let valB = b.dataset[column] || '';

            if (column === 'status') {
                valA = valA === 'True' ? 1 : 0;
                valB = valB === 'True' ? 1 : 0;
            } else {
                valA = valA.toLowerCase();
                valB = valB.toLowerCase();
            }

            if (valA < valB) return direction === 'asc' ? -1 : 1;
            if (valA > valB) return direction === 'asc' ? 1 : -1;
            return 0;
        });

        rows.forEach(row => tbody.appendChild(row));
    });
});

// Staff table sorting
const staffSortableHeaders = document.querySelectorAll('#event-staff-table th.sortable');
let staffCurrentSort = { column: null, direction: 'asc' };

staffSortableHeaders.forEach(th => {
    th.addEventListener('click', () => {
        const column = th.dataset.sort;
        const direction = staffCurrentSort.column === column && staffCurrentSort.direction === 'asc' ? 'desc' : 'asc';
        staffCurrentSort = { column, direction };

        staffSortableHeaders.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
        th.classList.add(direction === 'asc' ? 'sort-asc' : 'sort-desc');

        const tbody = document.getElementById('event-staff-tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));

        rows.sort((a, b) => {
            let valA = a.dataset[column] || '';
            let valB = b.dataset[column] || '';

            if (column === 'status') {
                valA = valA === '' ? 1 : 0;
                valB = valB === '' ? 1 : 0;
            } else {
                valA = valA.toLowerCase();
                valB = valB.toLowerCase();
            }

            if (valA < valB) return direction === 'asc' ? -1 : 1;
            if (valA > valB) return direction === 'asc' ? 1 : -1;
            return 0;
        });

        rows.forEach(row => tbody.appendChild(row));
    });
});

function showDeleteModal(staffId, staffName, staffEmail) {
    document.getElementById('staffName').textContent = staffName;
    document.getElementById('staffEmail').textContent = staffEmail;
    document.getElementById('staffDeleteForm').action = '{{ url_for("delete_staff", event_id=event.id, staff_id=0) }}'.replace('0', staffId);
    document.getElementById('staffDeleteModal').style.display = 'flex';
}

function closeStaffDeleteModal() {
    document.getElementById('staffDeleteModal').style.display = 'none';
}

// Select all attendees checkbox
document.getElementById('select-all-attendees').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.attendee-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
    updateSelectedCount();
});

document.querySelectorAll('.attendee-checkbox').forEach(cb => {
    cb.addEventListener('change', updateSelectedCount);
});

function updateSelectedCount() {
    const selected = document.querySelectorAll('.attendee-checkbox:checked').length;
    document.getElementById('selected-count').textContent = selected > 0 ? `(${selected} {{ 'selected'|t }})` : '';
}

// Copy link function
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);
}

// Initial selected count
updateSelectedCount();
</script>
</div>
{% endblock %}