{% extends "base.html" %}

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

{% block content %}
<style>
.staff-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.staff-table 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 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal-header {
    margin-bottom: 20px;
}
.modal-header h2 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}
.modal-header p {
    margin: 0;
    color: #666;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
</style>
<div class="event-staff">
    <div class="staff-header">
        <h1>{{ 'staff_for'|t }} {{ event.name }}</h1>
        <a href="{{ url_for('event_detail', code=event.code) }}" class="btn btn-outline">{{ 'back_to_event'|t }}</a>
    </div>

    <section class="add-staff-form">
        <h2>{{ 'add_staff_member'|t }}</h2>
        <form method="POST" action="{{ url_for('manage_event_staff', event_id=event.id) }}" class="staff-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-actions">
                <button type="submit" class="btn btn-primary">{{ 'add_staff_member'|t }}</button>
            </div>
        </form>
    </section>

    <section class="staff-list">
        <h2>{{ 'current_staff'|t }} ({{ staff_members|length }})</h2>
        {% if staff_members %}
            <table class="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="staff-tbody">
                    {% for staff in staff_members %}
                        <tr data-name="{{ staff.first_name }} {{ staff.last_name }}" data-email="{{ staff.email }}" data-status="{{ staff.invite_used }}">
                            <td>{{ staff.first_name }} {{ staff.last_name }}</td>
                            <td>{{ staff.email }}</td>
                            <td>
                                {% if staff.invite_used %}
                                    <span class="badge badge-success">{{ 'active'|t }}</span>
                                {% else %}
                                    <span class="badge badge-pending">{{ 'invite_pending'|t }}</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{{ url_for('edit_staff', event_id=event.id, staff_id=staff.id) }}" class="btn btn-sm btn-outline">{{ 'edit'|t }}</a>
                                <button type="button" class="btn btn-sm btn-danger" onclick="showDeleteModal({{ staff.id }}, '{{ staff.first_name }} {{ staff.last_name }}')">{{ 'remove'|t }}</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p class="no-staff">{{ 'no_staff_yet'|t }}</p>
        {% endif %}
    </section>
</div>

<div id="deleteModal" 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>?</p>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn btn-outline" onclick="closeDeleteModal()">{{ 'cancel'|t }}</button>
            <form id="deleteForm" method="POST" style="display: inline;">
                <button type="submit" class="btn btn-danger">{{ 'remove'|t }}</button>
            </form>
        </div>
    </div>
</div>

<script>
const sortableHeaders = document.querySelectorAll('.staff-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('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 === '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));
    });
});

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

function closeDeleteModal() {
    document.getElementById('deleteModal').style.display = 'none';
}
{% endblock %}