{% extends "base.html" %}

{% block content %}
<h2>Мероприятие: {{ event.name }}</h2>

<!-- Statistics and Export Section -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; color: white; flex-wrap: wrap; gap: 15px;">
    <div style="display: flex; gap: 30px; align-items: center; flex-wrap: wrap;">
        <div style="text-align: center;">
            <div style="font-size: 28px; font-weight: bold;" id="totalGuests">0</div>
            <div style="font-size: 14px;">Всего приглашенных</div>
        </div>
        <div style="text-align: center;">
            <div style="font-size: 28px; font-weight: bold; color: #2ecc71;" id="checkedInGuests">0</div>
            <div style="font-size: 14px;">Зарегалось</div>
        </div>
        <div style="text-align: center;">
            <div style="font-size: 28px; font-weight: bold; color: #e74c3c;" id="notCheckedInGuests">0</div>
            <div style="font-size: 14px;">Не зарегалось</div>
        </div>
        <div style="text-align: center;">
            <div style="font-size: 28px; font-weight: bold;" id="checkinPercentage">0%</div>
            <div style="font-size: 14px;">Ход регистрации</div>
        </div>
    </div>
    <div style="display: flex; gap: 10px;">
        <button onclick="openFilterModal()" class="btn" style="background: #f39c12; font-size: 16px; padding: 12px 24px; white-space: nowrap;">
            🔍 Фильтры
        </button>
        <a href="{{ url_for('export_event_stats', event_id=event.id) }}" class="btn" style="background: #27ae60; font-size: 16px; padding: 12px 24px; white-space: nowrap;">
            📊 Экспорт статистики
        </a>
    </div>
</div>

<!-- Active Filters Display -->
<div id="activeFilters" style="display: none; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <strong>Активные фильтры:</strong>
        <button onclick="clearAllFilters()" class="btn btn-small" style="background: #dc3545; padding: 5px 10px; font-size: 12px;">Сбросить фильтры</button>
    </div>
    <div id="activeFiltersList" style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px;"></div>
</div>

<!-- Filter Modal -->
<div id="filterModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background: white; border-radius: 10px; padding: 30px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="margin: 0;">Фильтровать список</h3>
            <button onclick="closeFilterModal()" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666;">&times;</button>
        </div>
        
        <!-- Search filter -->
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Быстрый поиск:</label>
            <input type="text" id="quickSearch" placeholder="Поиск по всему списку..." 
                   style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;"
                   oninput="applyQuickSearch()">
        </div>
        
        <hr style="margin: 20px 0; border: none; border-top: 1px solid #eee;">
        
        <!-- Column-specific filters -->
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 10px; font-weight: bold;">Фильтровать по столбцу:</label>
            <div id="columnFilters">
                <!-- Dynamic column filters will be added here -->
            </div>
        </div>
        
        <!-- Check-in status filter -->
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 10px; font-weight: bold;">Статус регистрации:</label>
            <select id="statusFilter" onchange="applyFilters()" 
                    style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
                <option value="all">Все</option>
                <option value="checked_in">Зареган</option>
                <option value="not_checked_in">Не зареган</option>
            </select>
        </div>
        
        <div style="display: flex; gap: 10px; justify-content: flex-end;">
            <button onclick="clearAllFilters()" class="btn" style="background: #6c757d;">Очистить фильтры</button>
            <button onclick="applyFiltersAndClose()" class="btn" style="background: #28a745;">Применить фильтры</button>
        </div>
    </div>
</div>

<!-- Edit Guest Modal -->
<div id="editModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1001; justify-content: center; align-items: center;">
    <div style="background: white; border-radius: 10px; padding: 30px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="margin: 0;">Изменить запись</h3>
            <button onclick="closeEditModal()" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666;">&times;</button>
        </div>
        
        <form id="editGuestForm" onsubmit="saveGuestEdit(event)">
            <input type="hidden" id="editGuestId">
            
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: 500;">Фамилия:</label>
                <input type="text" id="editSurname" required 
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
            
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: 500;">Имя:</label>
                <input type="text" id="editName" required 
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
            
            <div id="editSecondNameField" style="margin-bottom: 15px; display: none;">
                <label style="display: block; margin-bottom: 5px; font-weight: 500;">Отчество:</label>
                <input type="text" id="editSecondName" 
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
            
            <div id="editAdditionalFields" style="margin-bottom: 15px;">
                <!-- Dynamic additional fields will be added here -->
            </div>
            
            <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                <button type="button" onclick="closeEditModal()" class="btn" style="background: #6c757d;">Отмена</button>
                <button type="submit" class="btn" style="background: #28a745;">Сохранить изменения</button>
            </div>
        </form>
    </div>
</div>

<div style="margin: 20px 0;">
    <h3>Поиск по фамилии</h3>
    
    <!-- Letter Buttons -->
    <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px;">
        <button class="btn letter-btn active" onclick="searchByLetter('ALL')" style="background: #28a745;">
            ВСЕ
        </button>
        {% for letter in letters %}
        <button class="btn letter-btn" onclick="searchByLetter('{{ letter }}')">{{ letter }}</button>
        {% endfor %}
    </div>
    
    <!-- Two-Letter Combinations -->
    <div id="twoLetterButtons" style="display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">
        <h4 style="width: 100%;">Подробный поиск:</h4>
        <div id="twoLetterContainer" style="display: flex; flex-wrap: wrap; gap: 5px;"></div>
    </div>
    
    <!-- Search Results -->
    <div id="results" style="margin-top: 20px;">
        <div style="text-align: center; padding: 40px; color: #666;">
            <p>Загружаю список...</p>
        </div>
    </div>
</div>

<script>
let currentEventId = {{ event.id }};
let currentColumns = [];
let currentGuests = [];
let filteredGuests = [];
let currentSearchTerm = 'ALL';
let allGuests = [];
let activeFilters = {};
let quickSearchTerm = '';

// Sorting state
let sortColumn = null;
let sortDirection = 'asc'; // 'asc' or 'desc'

function searchByLetter(letter) {
    currentSearchTerm = letter;
    
    document.querySelectorAll('.letter-btn').forEach(btn => {
        btn.style.background = '#667eea';
        btn.classList.remove('active');
    });
    
    const buttons = document.querySelectorAll('.letter-btn');
    buttons.forEach(btn => {
        if (btn.textContent.trim() === letter) {
            btn.style.background = '#764ba2';
            btn.classList.add('active');
        }
    });
    
    if (letter === 'ALL') {
        document.getElementById('twoLetterButtons').style.display = 'none';
        fetchGuests(letter);
    } else if (letter.length === 1) {
        fetchAllGuestsForCombinations(letter);
    } else {
        document.getElementById('twoLetterButtons').style.display = 'none';
        fetchGuests(letter);
    }
}

function fetchAllGuestsForCombinations(firstLetter) {
    const url = `/api/search_guests/${currentEventId}?term=${encodeURIComponent(firstLetter)}`;
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            allGuests = data.guests;
            const combinations = generateTwoLetterCombinations(firstLetter, data.guests);
            showTwoLetterButtonsDynamic(firstLetter, combinations);
            currentColumns = data.columns;
            currentGuests = data.guests;
            applyFilters();
        })
        .catch(error => {
            console.error('Error fetching guests:', error);
            document.getElementById('results').innerHTML = '<p style="color: red; text-align: center;">Error loading guests. Please try again.</p>';
        });
}

function generateTwoLetterCombinations(firstLetter, guests) {
    const secondChars = new Set();
    
    guests.forEach(guest => {
        const surname = guest.surname || '';
        if (surname.length >= 2) {
            const secondChar = surname.charAt(1);
            secondChars.add(secondChar);
        }
    });
    
    const combinations = Array.from(secondChars).sort((a, b) => {
        return a.localeCompare(b, undefined, { sensitivity: 'base' });
    });
    
    return combinations;
}

function showTwoLetterButtonsDynamic(firstLetter, combinations) {
    const container = document.getElementById('twoLetterButtons');
    const buttonContainer = document.getElementById('twoLetterContainer');
    
    container.style.display = 'block';
    
    if (combinations.length === 0) {
        buttonContainer.innerHTML = '<p style="color: #666;">No further refinement available</p>';
        return;
    }
    
    let html = '';
    combinations.forEach(secondChar => {
        const combination = firstLetter + secondChar;
        const escapedCombination = combination.replace(/'/g, "\\'").replace(/"/g, '&quot;');
        html += `
            <button class="btn" 
                    onclick="searchByLetter('${escapedCombination}')"
                    style="margin: 2px; font-size: 14px; padding: 8px 12px;">
                ${combination}
            </button>
        `;
    });
    
    buttonContainer.innerHTML = html;
}

function fetchGuests(searchTerm) {
    document.getElementById('results').innerHTML = '<div style="text-align: center; padding: 40px; color: #666;"><p>Загружаю список...</p></div>';
    
    const url = `/api/search_guests/${currentEventId}?term=${encodeURIComponent(searchTerm)}`;
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            currentColumns = data.columns;
            currentGuests = data.guests;
            // Reset sort when fetching new data
            sortColumn = null;
            sortDirection = 'asc';
            applyFilters();
        })
        .catch(error => {
            console.error('Error fetching guests:', error);
            document.getElementById('results').innerHTML = '<p style="color: red; text-align: center;">Error loading guests. Please try again.</p>';
        });
}

// Sorting function
function sortGuests(column) {
    // Toggle sort direction if clicking the same column
    if (sortColumn === column) {
        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
        sortColumn = column;
        sortDirection = 'asc';
    }
    
    // Sort the filtered guests
    filteredGuests.sort((a, b) => {
        let valueA, valueB;
        
        // Get values based on column type
        if (column === 'name') {
            valueA = a.name || '';
            valueB = b.name || '';
        } else if (column === 'surname') {
            valueA = a.surname || '';
            valueB = b.surname || '';
        } else if (column === 'second_name') {
            valueA = a.second_name || '';
            valueB = b.second_name || '';
        } else if (column === 'status') {
            valueA = a.checked_in ? 1 : 0;
            valueB = b.checked_in ? 1 : 0;
        } else {
            // Additional data columns
            valueA = (a.additional_data && a.additional_data[column]) || '';
            valueB = (b.additional_data && b.additional_data[column]) || '';
        }
        
        // Compare values
        let comparison = 0;
        if (typeof valueA === 'number' && typeof valueB === 'number') {
            comparison = valueA - valueB;
        } else {
            // String comparison with locale support
            comparison = String(valueA).localeCompare(String(valueB), undefined, { 
                sensitivity: 'base',
                numeric: true 
            });
        }
        
        return sortDirection === 'asc' ? comparison : -comparison;
    });
    
    // Redisplay with sorted data
    displayResults(filteredGuests, currentColumns);
}

// Edit Guest Functions
function openEditModal(guestId) {
    const guest = currentGuests.find(g => g.id === guestId);
    if (!guest) return;
    
    document.getElementById('editGuestId').value = guestId;
    document.getElementById('editSurname').value = guest.surname || '';
    document.getElementById('editName').value = guest.name || '';
    
    const secondNameField = document.getElementById('editSecondNameField');
    if (currentColumns.includes('second_name')) {
        secondNameField.style.display = 'block';
        document.getElementById('editSecondName').value = guest.second_name || '';
    } else {
        secondNameField.style.display = 'none';
    }
    
    const additionalFieldsContainer = document.getElementById('editAdditionalFields');
    let additionalHtml = '';
    
    const additionalCols = currentColumns.filter(col => !['name', 'surname', 'second_name'].includes(col));
    
    additionalCols.forEach(col => {
        const value = guest.additional_data[col] || '';
        const displayName = /^[a-zA-Z]/.test(col) ? 
            col.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : col;
        
        additionalHtml += `
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: 500;">${displayName}:</label>
                <input type="text" name="additional_${col}" data-column="${col}" value="${escapeHtml(value)}"
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
        `;
    });
    
    additionalFieldsContainer.innerHTML = additionalHtml;
    document.getElementById('editModal').style.display = 'flex';
}

function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
}

function saveGuestEdit(event) {
    event.preventDefault();
    
    const guestId = document.getElementById('editGuestId').value;
    const name = document.getElementById('editName').value.trim();
    const surname = document.getElementById('editSurname').value.trim();
    const secondName = document.getElementById('editSecondName')?.value.trim() || '';
    
    if (!name || !surname) {
        alert('Фамилия и Имя обязательны для заполнения');
        return;
    }
    
    const additionalData = {};
    document.querySelectorAll('#editAdditionalFields input').forEach(input => {
        const column = input.dataset.column;
        additionalData[column] = input.value.trim();
    });
    
    const updateData = {
        name: name,
        surname: surname,
        second_name: secondName,
        additional_data: additionalData
    };
    
    const submitBtn = document.querySelector('#editGuestForm button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.textContent = 'Сохраняю...';
    
    fetch(`/api/update_guest/${guestId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(updateData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            updateGuestInArrays(data.guest);
            closeEditModal();
            applyFilters();
            showToast('Guest updated successfully!', 'success');
        } else {
            alert('Ошибка: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Ошибка:', error);
        alert('An error occurred while saving. Please try again.');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Save Changes';
    });
}

function updateGuestInArrays(updatedGuest) {
    const currentIndex = currentGuests.findIndex(g => g.id === updatedGuest.id);
    if (currentIndex !== -1) {
        currentGuests[currentIndex] = {...currentGuests[currentIndex], ...updatedGuest};
    }
    
    const filteredIndex = filteredGuests.findIndex(g => g.id === updatedGuest.id);
    if (filteredIndex !== -1) {
        filteredGuests[filteredIndex] = {...filteredGuests[filteredIndex], ...updatedGuest};
    }
    
    if (allGuests.length > 0) {
        const allIndex = allGuests.findIndex(g => g.id === updatedGuest.id);
        if (allIndex !== -1) {
            allGuests[allIndex] = {...allGuests[allIndex], ...updatedGuest};
        }
    }
}

function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 25px;
        background: ${type === 'success' ? '#28a745' : '#dc3545'};
        color: white;
        border-radius: 5px;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        animation: slideInRight 0.3s ease-out;
        font-weight: 500;
    `;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOutRight 0.3s ease-out';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// Filter functions
function openFilterModal() {
    document.getElementById('filterModal').style.display = 'flex';
    buildColumnFilters();
    document.getElementById('statusFilter').value = activeFilters.status || 'all';
    document.getElementById('quickSearch').value = quickSearchTerm;
}

function closeFilterModal() {
    document.getElementById('filterModal').style.display = 'none';
}

function buildColumnFilters() {
    const container = document.getElementById('columnFilters');
    let html = '';
    
    currentColumns.forEach(column => {
        if (['name', 'surname', 'second_name'].includes(column)) return;
        
        const uniqueValues = new Set();
        currentGuests.forEach(guest => {
            let value = guest.additional_data[column] || '';
            if (value) uniqueValues.add(value);
        });
        
        if (uniqueValues.size > 0) {
            const sortedValues = Array.from(uniqueValues).sort((a, b) => {
                return a.localeCompare(b, undefined, { sensitivity: 'base' });
            });
            
            const displayName = /^[a-zA-Z]/.test(column) ? 
                column.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : column;
            
            html += `
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 500;">${displayName}:</label>
                    <select class="column-filter" data-column="${column}" onchange="updateColumnFilter(this)" 
                            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                        <option value="">ВСЕ</option>
                        ${sortedValues.map(val => `<option value="${escapeHtml(val)}" ${activeFilters[column] === val ? 'selected' : ''}>${val}</option>`).join('')}
                    </select>
                </div>
            `;
        }
    });
    
    if (html === '') {
        html = '<p style="color: #666;">Нет дополнительных столбцов для применения фильтра.</p>';
    }
    
    container.innerHTML = html;
}

function updateColumnFilter(selectElement) {
    const column = selectElement.dataset.column;
    const value = selectElement.value;
    
    if (value) {
        activeFilters[column] = value;
    } else {
        delete activeFilters[column];
    }
    
    updateActiveFiltersDisplay();
}

function applyQuickSearch() {
    quickSearchTerm = document.getElementById('quickSearch').value.toLowerCase();
    applyFilters();
}

function applyFilters() {
    filteredGuests = [...currentGuests];
    
    if (quickSearchTerm) {
        filteredGuests = filteredGuests.filter(guest => {
            const searchableText = [
                guest.name, guest.surname, guest.second_name,
                ...Object.values(guest.additional_data)
            ].join(' ').toLowerCase();
            return searchableText.includes(quickSearchTerm);
        });
    }
    
    Object.entries(activeFilters).forEach(([column, value]) => {
        if (column === 'status') return;
        filteredGuests = filteredGuests.filter(guest => {
            const guestValue = guest.additional_data[column] || '';
            return guestValue === value;
        });
    });
    
    if (activeFilters.status === 'checked_in') {
        filteredGuests = filteredGuests.filter(guest => guest.checked_in);
    } else if (activeFilters.status === 'not_checked_in') {
        filteredGuests = filteredGuests.filter(guest => !guest.checked_in);
    }
    
    // Re-apply sort if active
    if (sortColumn) {
        const currentSortColumn = sortColumn;
        const currentSortDirection = sortDirection;
        sortColumn = null; // Reset to trigger new sort
        sortGuests(currentSortColumn);
        sortDirection = currentSortDirection;
    }
    
    updateActiveFiltersDisplay();
    displayResults(filteredGuests, currentColumns);
}

function applyFiltersAndClose() {
    const statusValue = document.getElementById('statusFilter').value;
    if (statusValue && statusValue !== 'all') {
        activeFilters.status = statusValue;
    } else {
        delete activeFilters.status;
    }
    
    quickSearchTerm = document.getElementById('quickSearch').value.toLowerCase();
    applyFilters();
    closeFilterModal();
}

function clearAllFilters() {
    activeFilters = {};
    quickSearchTerm = '';
    document.getElementById('quickSearch').value = '';
    document.getElementById('statusFilter').value = 'all';
    
    document.querySelectorAll('.column-filter').forEach(select => {
        select.value = '';
    });
    
    filteredGuests = [...currentGuests];
    updateActiveFiltersDisplay();
    displayResults(filteredGuests, currentColumns);
}

function updateActiveFiltersDisplay() {
    const container = document.getElementById('activeFilters');
    const listContainer = document.getElementById('activeFiltersList');
    
    const allFilters = {...activeFilters};
    if (quickSearchTerm) allFilters['Search'] = quickSearchTerm;
    
    const filterKeys = Object.keys(allFilters);
    
    if (filterKeys.length === 0) {
        container.style.display = 'none';
        return;
    }
    
    container.style.display = 'block';
    
    let html = '';
    filterKeys.forEach(key => {
        const value = allFilters[key];
        const displayKey = key === 'Search' ? 'Search' : 
            (/^[a-zA-Z]/.test(key) ? key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : key);
        const displayValue = key === 'status' ? (value === 'checked_in' ? 'Checked In' : 'Not Checked In') : value;
        
        html += `
            <span style="background: #667eea; color: white; padding: 5px 10px; border-radius: 15px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px;">
                ${displayKey}: ${displayValue}
                <button onclick="removeFilter('${key}')" style="background: none; border: none; color: white; cursor: pointer; font-size: 16px; padding: 0; line-height: 1;">&times;</button>
            </span>
        `;
    });
    
    listContainer.innerHTML = html;
}

function removeFilter(key) {
    if (key === 'Search') {
        quickSearchTerm = '';
        document.getElementById('quickSearch').value = '';
    } else {
        delete activeFilters[key];
    }
    
    applyFilters();
    
    if (document.getElementById('filterModal').style.display === 'flex') {
        if (key === 'status') {
            document.getElementById('statusFilter').value = 'all';
        } else if (key !== 'Search') {
            const select = document.querySelector(`.column-filter[data-column="${key}"]`);
            if (select) select.value = '';
        }
    }
}

function updateStatsDisplay(total, checkedIn) {
    const notCheckedIn = total - checkedIn;
    const percentage = total > 0 ? Math.round((checkedIn / total) * 100) : 0;
    
    document.getElementById('totalGuests').textContent = total;
    document.getElementById('checkedInGuests').textContent = checkedIn;
    document.getElementById('notCheckedInGuests').textContent = notCheckedIn;
    document.getElementById('checkinPercentage').textContent = percentage + '%';
    
    const percentageElement = document.getElementById('checkinPercentage');
    if (percentage >= 80) {
        percentageElement.style.color = '#2ecc71';
    } else if (percentage >= 50) {
        percentageElement.style.color = '#f39c12';
    } else {
        percentageElement.style.color = '#e74c3c';
    }
}

function displayResults(guests, columns) {
    const resultsDiv = document.getElementById('results');
    
    const checkedInCount = guests.filter(g => g.checked_in).length;
    updateStatsDisplay(guests.length, checkedInCount);
    
    if (guests.length === 0) {
        resultsDiv.innerHTML = '<p style="color: #666; text-align: center; padding: 20px;">No guests found for this search.</p>';
        return;
    }
    
    // Build sort indicators for each column
    const getSortIndicator = (column) => {
        if (sortColumn !== column) {
            return '<span class="sort-indicator">⇅</span>';
        }
        return sortDirection === 'asc' ? 
            '<span class="sort-indicator active">▲</span>' : 
            '<span class="sort-indicator active">▼</span>';
    };
    
    let html = `
        <div style="overflow-x: auto;">
            <table id="guestTable">
                <thead>
                    <tr>
                        <th class="sortable-header" onclick="sortGuests('surname')">
                            Фамилия ${getSortIndicator('surname')}
                        </th>
                        <th class="sortable-header" onclick="sortGuests('name')">
                            Имя ${getSortIndicator('name')}
                        </th>
                        ${columns.includes('second_name') ? `
                        <th class="sortable-header" onclick="sortGuests('second_name')">
                            Отчество ${getSortIndicator('second_name')}
                        </th>` : ''}
                        ${columns.filter(col => !['name', 'surname', 'second_name'].includes(col))
                            .map(col => {
                                let displayName = col;
                                if (/^[a-zA-Z]/.test(col)) {
                                    displayName = col.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                                }
                                return `
                                <th class="sortable-header" onclick="sortGuests('${col.replace(/'/g, "\\'")}')">
                                    ${displayName} ${getSortIndicator(col)}
                                </th>`;
                            }).join('')}
                        <th class="sortable-header" onclick="sortGuests('status')">
                            Статус ${getSortIndicator('status')}
                        </th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    guests.forEach((guest, index) => {
        const checkedInClass = guest.checked_in ? 'checked-in' : 'not-checked-in';
        const rowClass = guest.checked_in ? 'row-checked-in' : '';
        
        let statusHtml = guest.checked_in ? '✓ Зареган' : 'Не зареган';
        if (guest.checked_in && guest.checked_in_at) {
            const checkinTime = new Date(guest.checked_in_at).toLocaleString();
            statusHtml += `<br><small style="font-size: 11px;">${checkinTime}</small>`;
        }
        
        html += `
            <tr id="guest-row-${guest.id}" class="${rowClass}">
                <td>${escapeHtml(guest.surname)}</td>
                <td>${escapeHtml(guest.name)}</td>
                ${columns.includes('second_name') ? `<td>${escapeHtml(guest.second_name || '-')}</td>` : ''}
                ${columns.filter(col => !['name', 'surname', 'second_name'].includes(col))
                    .map(col => `<td>${escapeHtml(guest.additional_data[col] || '-')}</td>`).join('')}
                <td class="${checkedInClass}" id="status-cell-${guest.id}">
                    ${statusHtml}
                </td>
                <td>
                    <div style="display: flex; gap: 5px;">
                        <button class="btn btn-small ${guest.checked_in ? 'btn-uncheck' : 'btn-checkin'}" 
                                onclick="toggleCheckIn(${guest.id}, ${!guest.checked_in})"
                                id="checkin-btn-${guest.id}">
                            ${guest.checked_in ? 'Снять рег' : 'Зарегать'}
                        </button>
                        <button class="btn btn-small btn-edit" 
                                onclick="openEditModal(${guest.id})">
                            ✏️ Правка
                        </button>
                    </div>
                </td>
            </tr>
        `;
    });
    
    html += '</tbody></table></div>';
    
    const filterInfo = Object.keys(activeFilters).length > 0 || quickSearchTerm ? 
        '<div style="margin-top: 5px; color: #666; font-style: italic;">Результат фильтра • Нажмите на заголовок столбца для сортировки</div>' : 
        '<div style="margin-top: 5px; color: #666; font-style: italic;">Нажмите на заголовок столбца для сортировки</div>';
    
    html += filterInfo;
    
    resultsDiv.innerHTML = html;
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function toggleCheckIn(guestId, checkIn) {
    const action = checkIn ? 'check in' : 'uncheck';
    const guest = currentGuests.find(g => g.id === guestId);
    const guestName = guest ? `${guest.name} ${guest.surname}` : 'this guest';
    
    if (confirm(`Confirm ${action} for ${guestName}?`)) {
        const button = document.getElementById(`checkin-btn-${guestId}`);
        if (button) {
            button.disabled = true;
            button.textContent = 'Processing...';
        }
        
        fetch(`/api/checkin/${guestId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ check_in: checkIn })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const guestIndex = currentGuests.findIndex(g => g.id === guestId);
                if (guestIndex !== -1) {
                    currentGuests[guestIndex].checked_in = checkIn;
                    currentGuests[guestIndex].checked_in_at = data.checked_in_at;
                }
                
                const filteredIndex = filteredGuests.findIndex(g => g.id === guestId);
                if (filteredIndex !== -1) {
                    filteredGuests[filteredIndex].checked_in = checkIn;
                    filteredGuests[filteredIndex].checked_in_at = data.checked_in_at;
                }
                
                if (allGuests.length > 0) {
                    const allGuestIndex = allGuests.findIndex(g => g.id === guestId);
                    if (allGuestIndex !== -1) {
                        allGuests[allGuestIndex].checked_in = checkIn;
                        allGuests[allGuestIndex].checked_in_at = data.checked_in_at;
                    }
                }
                
                updateGuestRow(guestId, checkIn, data.checked_in_at);
                
                const totalGuests = filteredGuests.length;
                const checkedInCount = filteredGuests.filter(g => g.checked_in).length;
                updateStatsDisplay(totalGuests, checkedInCount);
            } else {
                alert('Error: ' + data.message);
                if (button) {
                    button.disabled = false;
                    button.textContent = checkIn ? 'Зарегать' : 'Снять рег';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
            if (button) {
                button.disabled = false;
                button.textContent = checkIn ? 'Зарегать' : 'Снять рег';
            }
        });
    }
}

function updateGuestRow(guestId, checkedIn, checkedInAt) {
    const row = document.getElementById(`guest-row-${guestId}`);
    const button = document.getElementById(`checkin-btn-${guestId}`);
    const statusCell = document.getElementById(`status-cell-${guestId}`);
    
    if (!row || !button || !statusCell) {
        console.error('Could not find elements for guest', guestId);
        return;
    }
    
    if (checkedIn) {
        row.classList.add('row-checked-in');
    } else {
        row.classList.remove('row-checked-in');
    }
    
    statusCell.className = checkedIn ? 'checked-in' : 'not-checked-in';
    
    let statusHtml = checkedIn ? '✓ Зареган' : 'Не зареган';
    if (checkedIn && checkedInAt) {
        const checkinTime = new Date(checkedInAt).toLocaleString();
        statusHtml += `<br><small style="font-size: 11px;">${checkinTime}</small>`;
    }
    statusCell.innerHTML = statusHtml;
    
    button.className = `btn btn-small ${checkedIn ? 'btn-uncheck' : 'btn-checkin'}`;
    button.textContent = checkedIn ? 'Зарегать' : 'Снять рег';
    button.disabled = false;
    button.onclick = () => toggleCheckIn(guestId, !checkedIn);
}

// Close modals when clicking outside
window.onclick = function(event) {
    const filterModal = document.getElementById('filterModal');
    const editModal = document.getElementById('editModal');
    
    if (event.target === filterModal) closeFilterModal();
    if (event.target === editModal) closeEditModal();
}

// Add toast animations
const toastStyle = document.createElement('style');
toastStyle.textContent = `
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOutRight {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
`;
document.head.appendChild(toastStyle);

// Load all guests on page load
document.addEventListener('DOMContentLoaded', function() {
    searchByLetter('ALL');
});
</script>

<style>
    .row-checked-in {
        background-color: #d4edda !important;
    }
    
    .row-checked-in:hover {
        background-color: #c3e6cb !important;
    }
    
    .btn-checkin {
        background: #28a745;
    }
    
    .btn-checkin:hover {
        background: #218838;
    }
    
    .btn-uncheck {
        background: #dc3545;
    }
    
    .btn-uncheck:hover {
        background: #c82333;
    }
    
    .btn-edit {
        background: #3498db;
    }
    
    .btn-edit:hover {
        background: #2980b9;
    }
    
    .btn-small {
        padding: 5px 10px;
        font-size: 14px;
    }
    
    .checked-in {
        color: #155724;
        font-weight: bold;
    }
    
    .not-checked-in {
        color: #721c24;
    }
    
    .letter-btn.active {
        background: #764ba2 !important;
        transform: scale(1.05);
    }
    
    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    
    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    th {
        background-color: #f8f9fa;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    /* Sortable header styles */
    .sortable-header {
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s;
        white-space: nowrap;
    }
    
    .sortable-header:hover {
        background-color: #e9ecef !important;
    }
    
    .sort-indicator {
        color: #ccc;
        font-size: 12px;
        margin-left: 5px;
    }
    
    .sort-indicator.active {
        color: #667eea;
        font-weight: bold;
    }
    
    tr:hover {
        background-color: #f5f5f5;
    }
    
    .row-checked-in:hover {
        background-color: #c3e6cb !important;
    }
    
    #twoLetterButtons {
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    #filterModal > div,
    #editModal > div {
        animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .column-filter:focus,
    #quickSearch:focus,
    #statusFilter:focus,
    #editGuestForm input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }
</style>
{% endblock %}