{% extends 'base.html' %}

{% block title %}Specialists{% endblock %}
{% block content_title %}Specialists{% endblock %}
{% block content_description %}View Specialists for Tenant{% endblock %}

{% block content %}
<div class="container">
    <form method="POST" action="{{ url_for('interaction_bp.handle_specialist_selection') }}" id="specialistsForm" onsubmit="return validateSpecialistSelection()">
        <div id="specialists-list-view" class="tabulator-list-view"></div>
    </form>
</div>

<!-- Include the list view component -->
{% include 'eveai_list_view.html' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Laad data met een kleine vertraging om de pagina eerst te laten renderen
    setTimeout(() => {
        // Initialize the list view met gepagineerde data en optimalisaties
        const tabulatorTable = EveAI.ListView.initialize('specialists-list-view', {
            data: {{ specialists_data | tojson }},
            columns: {{ columns | tojson }},
            initialSort: {{ initial_sort | tojson }},
            actions: {{ actions | tojson }},
            selectable: true,
            usePagination: true, // Gebruik paginatie in plaats van progressieve lading
            tableHeight: 800 // Hogere tabel voor specialists view
        });

        // Extra debug event listeners
        if (tabulatorTable) {
            console.log('Tabulator tabel succesvol geïnitialiseerd');

            // Voeg een klik-event toe aan de hele tabel container voor een betere gebruikerservaring
            document.querySelector('.tabulator-container').addEventListener('click', function(e) {
                console.log('Tabulator container click event');
                // De specifieke row click events worden afgehandeld door Tabulator zelf
            });
        } else {
            console.error('Tabulator tabel kon niet worden geïnitialiseerd');
        }
    }, 50);
});

// Validation function for form submission
function validateSpecialistSelection() {
    const selectedRow = document.getElementById('specialists-list-view-selected-row');
    const actionButton = document.activeElement;

    // Als de actie geen selectie vereist, ga dan altijd door
    if (actionButton && actionButton.classList.contains('btn-success')) {
        return true;
    }

    if (!selectedRow || !selectedRow.value) {
        alert('Selecteer a.u.b. eerst een specialist.');
        return false;
    }

    try {
        const selection = JSON.parse(selectedRow.value);
        // Controleer of er een specialist is geselecteerd
        if (!selection.value) {
            alert('Selecteer a.u.b. eerst een specialist.');
            return false;
        }
    } catch (e) {
        alert('Er is een fout opgetreden bij het verwerken van de selectie.');
        return false;
    }

    return true;
}
</script>
{% endblock %}