{% extends 'base.html' %}
{% from 'macros.html' import render_selectable_table, render_pagination, render_filter_field, render_date_filter_field, render_collapsible_section, render_selectable_sortable_table_with_dict_headers %}

{% block title %}Documents{% endblock %}

{% block content_title %}Documents{% endblock %}
{% block content_description %}View Documents for Tenant{% endblock %}
{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}

{% block content %}
    <!-- Filter Form -->
    {% set filter_form %}
        <form method="GET" action="{{ url_for('document_bp.documents') }}">
            {{ render_filter_field('catalog_id', 'Catalog', filter_options['catalog_id'], filters.get('catalog_id', [])) }}
            {{ render_filter_field('validity', 'Validity', filter_options['validity'], filters.get('validity', [])) }}

            <button type="submit" class="btn btn-primary">Apply Filters</button>
        </form>
    {% endset %}

    {{ render_collapsible_section('Filter', 'Filter Options', filter_form) }}

    <div class="form-group mt-3">
        <form method="POST" action="{{ url_for('document_bp.handle_document_selection') }}" id="documentsForm">
            <!-- Documents Table -->
            {{ render_selectable_sortable_table_with_dict_headers(
                headers=[
                    {"text": "ID", "sort": "id"},
                    {"text": "Name", "sort": "name"},
                    {"text": "Catalog", "sort": "catalog_name"},
                    {"text": "Valid From", "sort": "valid_from"},
                    {"text": "Valid To", "sort": "valid_to"}
                ],
                rows=rows,
                selectable=True,
                id="documentsTable",
                sort_by=sort_by,
                sort_order=sort_order
            ) }}
            <div class="form-group mt-3 d-flex justify-content-between">
                <div>
                    <button type="submit" name="action" value="edit_document" class="btn btn-primary" onclick="return validateTableSelection('documentsForm')">Edit Document</button>
                    <button type="submit" name="action" value="document_versions" class="btn btn-secondary" onclick="return validateTableSelection('documentsForm')">Show Document Versions</button>
                    <button type="submit" name="action" value="refresh_document" class="btn btn-secondary" onclick="return validateTableSelection('documentsForm')">Refresh Document (new version)</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block content_footer %}
    {{ render_pagination(pagination, 'document_bp.documents') }}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('documentsTable');
    const headers = table.querySelectorAll('th.sortable');

    headers.forEach(header => {
        header.addEventListener('click', function() {
            const sortBy = this.dataset.sort;
            let sortOrder = 'asc';

            if (this.querySelector('.fa-sort-up')) {
                sortOrder = 'desc';
            } else if (this.querySelector('.fa-sort-down')) {
                sortOrder = 'none';
            }

            window.location.href = updateQueryStringParameter(window.location.href, 'sort_by', sortBy);
            window.location.href = updateQueryStringParameter(window.location.href, 'sort_order', sortOrder);
        });
    });

    function updateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }

    table.addEventListener('change', function(event) {
        if (event.target.type === 'radio') {
            var selectedRow = event.target.closest('tr');
            var documentId = selectedRow.cells[1].textContent;
            console.log('Selected Document ID:', documentId);
        }
    });
});
</script>
{% endblock %}