{% extends "base.html" %}
{% load i18n static short_name %}

{% block head %}
<link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
<style>
    .dropdown-item-checkbox {
        padding-left: 2.25rem !important;
        position: relative;
    }
    .dropdown-item-checkbox:hover {
        background-color: rgba(47, 62, 139, 0.08);
    }
    .dropdown-item-checkbox .form-check-input {
        margin-left: -1.5rem;
        cursor: pointer;
    }
    .dropdown-item-checkbox .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    .dropdown-item-checkbox .form-check-label {
        cursor: pointer;
        user-select: none;
        transition: color 0.15s ease-in-out;
    }
    .dropdown-item-checkbox .form-check-input:checked + .form-check-label {
        font-weight: 600;
        color: #0f172a !important;
    }
    th.sortable:hover {
        background-color: rgba(47, 62, 139, 0.08) !important;
    }
</style>
{% endblock head %}

{% block main %}
<div id="main">
<div class="d-flex flex-column sidebar pe-3" id="sidebar">
    <a href="{% url 'authorizations:new_authorization' %}" class="nav-link d-flex align-items-center p-2" target="_blank" rel="noopener">
        <i class="bi bi-box-arrow-up-right" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate 'Formulaire public' %}"></i>
        <span class="ms-2 text d-none d-md-inline">{% translate "Formulaire public" %}</span>
    </a>
    <a href="{% url 'authorizations:authorization_list' %}" class="nav-link d-flex align-items-center p-2 active">
        <i class="bi bi-list-ul" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate 'Liste' %}"></i>
        <span class="ms-2 text d-none d-md-inline">{% translate "Liste des demandes" %}</span>
    </a>
</div>

<div id="content-wrapper">
<div class="container-fluid py-3">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h4 mb-0">
            <i class="bi bi-file-earmark-text me-2"></i>{% translate "Demandes d'autorisation d'occupation de l'espace public" %}
        </h1>
        <a href="{% url 'authorizations:new_authorization' %}" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener">
            <i class="bi bi-box-arrow-up-right"></i> {% translate "Formulaire public" %}
        </a>
    </div>

    <!-- Filter form -->
    <form method="get" class="card mb-3 shadow-sm">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-xl-3 col-md-4">
                    <label for="{{ filter_form.search_text.id_for_label }}" class="form-label small fw-semibold">
                        {% translate "Recherche" %}
                    </label>
                    {{ filter_form.search_text }}
                </div>
                <div class="col-xl-3 col-md-4">
                    <label class="form-label small fw-semibold">{% translate "Type" %}</label>
                    <div class="dropdown">
                        <button class="btn btn-light border w-100 text-start d-flex justify-content-between align-items-center dropdown-toggle" 
                                type="button" 
                                id="typeDropdownMenuButton" 
                                data-bs-toggle="dropdown" 
                                data-bs-auto-close="outside" 
                                aria-expanded="false"
                                style="background-color: #fff; border-color: #dee2e6; color: #212529; font-size: 0.875rem; padding: 0.4375rem 0.75rem; border-radius: 6px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;">
                            <span id="selected-types-label" class="text-truncate me-2">{% translate "Tous les types" %}</span>
                            <span class="badge rounded-pill bg-primary d-none" id="selected-types-badge">0</span>
                        </button>
                        <div class="dropdown-menu p-3 shadow-lg" aria-labelledby="typeDropdownMenuButton" style="max-height: 350px; overflow-y: auto; min-width: 320px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); z-index: 1050;">
                            <div class="mb-2 pb-2 border-bottom d-flex align-items-center justify-content-between gap-2">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted" style="font-size: 0.8rem;"></i></span>
                                    <input type="text" id="type-search-input" class="form-control bg-light border-start-0 ps-0" placeholder="{% translate 'Rechercher un type...' %}" style="font-size: 0.8rem;">
                                </div>
                                <button type="button" class="btn btn-link btn-xs p-0 text-decoration-none text-danger small flex-shrink-0" id="clear-types-btn" style="font-size: 0.75rem;">
                                    <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                </button>
                            </div>
                            <div id="type-choices-list">
                                {% for choice in filter_form.authorization_type %}
                                <div class="form-check dropdown-item-checkbox p-2 rounded d-flex align-items-center" style="transition: background-color 0.2s; margin-bottom: 2px;">
                                    {{ choice.tag }}
                                    <label class="form-check-label ms-2 cursor-pointer w-100 text-truncate" for="{{ choice.id_for_label }}" style="font-size: 0.85rem; color: #495057; cursor: pointer; user-select: none;">
                                        {{ choice.choice_label }}
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                            <div id="type-no-results" class="text-center text-muted py-3 d-none" style="font-size: 0.8rem;">
                                {% translate "Aucun type correspondant" %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-4">
                    <label class="form-label small fw-semibold">{% translate "Agent" %}</label>
                    <div class="dropdown">
                        <button class="btn btn-light border w-100 text-start d-flex justify-content-between align-items-center dropdown-toggle" 
                                type="button" 
                                id="agentDropdownMenuButton" 
                                data-bs-toggle="dropdown" 
                                data-bs-auto-close="outside" 
                                aria-expanded="false"
                                style="background-color: #fff; border-color: #dee2e6; color: #212529; font-size: 0.875rem; padding: 0.4375rem 0.75rem; border-radius: 6px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;">
                            <span id="selected-agents-label" class="text-truncate me-2">{% translate "Tous les agents" %}</span>
                            <span class="badge rounded-pill bg-primary d-none" id="selected-agents-badge">0</span>
                        </button>
                        <div class="dropdown-menu p-3 shadow-lg" aria-labelledby="agentDropdownMenuButton" style="max-height: 350px; overflow-y: auto; min-width: 280px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); z-index: 1050;">
                            <div class="mb-2 pb-2 border-bottom d-flex align-items-center justify-content-between gap-2">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted" style="font-size: 0.8rem;"></i></span>
                                    <input type="text" id="agent-search-input" class="form-control bg-light border-start-0 ps-0" placeholder="{% translate 'Rechercher un agent...' %}" style="font-size: 0.8rem;">
                                </div>
                                <button type="button" class="btn btn-link btn-xs p-0 text-decoration-none text-danger small flex-shrink-0" id="clear-agents-btn" style="font-size: 0.75rem;">
                                    <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                </button>
                            </div>
                            <div id="agent-choices-list">
                                {% for choice in filter_form.agent %}
                                <div class="form-check dropdown-item-checkbox p-2 rounded d-flex align-items-center" style="transition: background-color 0.2s; margin-bottom: 2px;">
                                    {{ choice.tag }}
                                    <label class="form-check-label ms-2 cursor-pointer w-100 text-truncate" for="{{ choice.id_for_label }}" style="font-size: 0.85rem; color: #495057; cursor: pointer; user-select: none;">
                                        {{ choice.choice_label }}
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                            <div id="agent-no-results" class="text-center text-muted py-3 d-none" style="font-size: 0.8rem;">
                                {% translate "Aucun agent correspondant" %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-2 col-md-6">
                    <div class="form-check mt-2">
                        {{ filter_form.include_archives }}
                        <label class="form-check-label" for="{{ filter_form.include_archives.id_for_label }}">
                            {{ filter_form.include_archives.label }}
                        </label>
                    </div>
                </div>
                <div class="col-xl-2 col-md-6 d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="bi bi-search"></i> {% translate "Filtrer" %}
                    </button>
                    <a href="{% url 'authorizations:authorization_list' %}" class="btn btn-secondary btn-sm">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </div>
        </div>
    </form>

    <!-- Results table -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Code" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Type" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Statut" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Demandeur" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Agent" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Localisation" %} <i class="bi bi-arrow-down-up ms-1 text-muted" style="font-size: 0.8rem;"></i></th>
                            <th class="sortable" style="cursor: pointer; user-select: none;">{% translate "Date de création" %} <i class="bi bi-arrow-down ms-1 text-primary" style="font-size: 0.8rem;"></i></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for auth in authorizations %}
                        <tr>
                            <td data-sort="{{ auth.code|default:'' }}">{{ auth.code|default:"—" }}</td>
                            <td data-sort="{{ auth.get_type_display }}"><span class="badge bg-secondary">{{ auth.get_type_display }}</span></td>
                            <td data-sort="{{ auth.status }}">
                                {% if auth.status == 1 %}
                                    <span class="badge bg-warning text-dark">{{ auth.get_status_display }}</span>
                                {% elif auth.status == 2 %}
                                    <span class="badge bg-info text-dark">{{ auth.get_status_display }}</span>
                                {% elif auth.status == 3 %}
                                    <span class="badge bg-success">{{ auth.get_status_display }}</span>
                                {% elif auth.status == 4 %}
                                    <span class="badge bg-danger">{{ auth.get_status_display }}</span>
                                {% else %}
                                    <span class="badge bg-light text-dark">{{ auth.get_status_display }}</span>
                                {% endif %}
                            </td>
                            <td data-sort="{{ auth.applicant_name }}">{{ auth.applicant_name }}</td>
                            <td data-sort="{{ auth.agent|short_name|default:'' }}">{{ auth.agent|short_name|default:"—" }}</td>
                            <td data-sort="{{ auth.location }}" class="text-truncate" style="max-width: 200px;" title="{{ auth.location }}">{{ auth.location }}</td>
                            <td data-sort="{{ auth.creation_date|date:'Y-m-d-H-i-s' }}">{{ auth.creation_date|date:"d/m/Y" }}</td>
                            <td>
                                <a href="{% url 'authorizations:authorization_detail' auth.pk %}" class="btn btn-xs btn-outline-primary btn-sm">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                {% translate "Aucune demande trouvée." %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div><!-- /container -->
</div><!-- /content-wrapper -->
</div><!-- /main -->
{% endblock main %}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Type dropdown management
    const checkboxes = document.querySelectorAll('#type-choices-list input[type="checkbox"]');
    const label = document.getElementById('selected-types-label');
    const badge = document.getElementById('selected-types-badge');
    const clearBtn = document.getElementById('clear-types-btn');
    const searchInput = document.getElementById('type-search-input');
    const noResults = document.getElementById('type-no-results');

    function updateDropdownLabel() {
        const checked = Array.from(checkboxes).filter(cb => cb.checked);
        const count = checked.length;
        
        if (count === 0) {
            label.textContent = "{% translate 'Tous les types' %}";
            badge.classList.add('d-none');
        } else if (count === 1) {
            const labelText = checked[0].nextElementSibling.textContent.trim();
            label.textContent = labelText;
            badge.textContent = '1';
            badge.classList.remove('d-none');
        } else {
            label.textContent = `${count} {% translate 'types sélectionnés' %}`;
            badge.textContent = count;
            badge.classList.remove('d-none');
        }
    }

    updateDropdownLabel();

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateDropdownLabel);
    });

    if (clearBtn) {
        clearBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            checkboxes.forEach(cb => {
                cb.checked = false;
            });
            updateDropdownLabel();
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', () => {
            const query = searchInput.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            let visibleCount = 0;

            const items = document.querySelectorAll('#type-choices-list .dropdown-item-checkbox');
            items.forEach(item => {
                const labelText = item.querySelector('.form-check-label').textContent.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
                if (labelText.includes(query)) {
                    item.classList.remove('d-none');
                    visibleCount++;
                } else {
                    item.classList.add('d-none');
                }
            });

            if (visibleCount === 0) {
                noResults.classList.remove('d-none');
            } else {
                noResults.classList.add('d-none');
            }
        });

        searchInput.addEventListener('click', (e) => {
            e.stopPropagation();
        });
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });
    }

    // Agent dropdown management
    const agentCheckboxes = document.querySelectorAll('#agent-choices-list input[type="checkbox"]');
    const agentLabel = document.getElementById('selected-agents-label');
    const agentBadge = document.getElementById('selected-agents-badge');
    const clearAgentsBtn = document.getElementById('clear-agents-btn');
    const agentSearchInput = document.getElementById('agent-search-input');
    const agentNoResults = document.getElementById('agent-no-results');

    function updateAgentDropdownLabel() {
        const checked = Array.from(agentCheckboxes).filter(cb => cb.checked);
        const count = checked.length;
        
        if (count === 0) {
            agentLabel.textContent = "{% translate 'Tous les agents' %}";
            agentBadge.classList.add('d-none');
        } else if (count === 1) {
            const labelText = checked[0].nextElementSibling.textContent.trim();
            agentLabel.textContent = labelText;
            agentBadge.textContent = '1';
            agentBadge.classList.remove('d-none');
        } else {
            agentLabel.textContent = `${count} {% translate 'agents sélectionnés' %}`;
            agentBadge.textContent = count;
            agentBadge.classList.remove('d-none');
        }
    }

    updateAgentDropdownLabel();

    agentCheckboxes.forEach(cb => {
        cb.addEventListener('change', updateAgentDropdownLabel);
    });

    if (clearAgentsBtn) {
        clearAgentsBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            agentCheckboxes.forEach(cb => {
                cb.checked = false;
            });
            updateAgentDropdownLabel();
        });
    }

    if (agentSearchInput) {
        agentSearchInput.addEventListener('input', () => {
            const query = agentSearchInput.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            let visibleCount = 0;

            const items = document.querySelectorAll('#agent-choices-list .dropdown-item-checkbox');
            items.forEach(item => {
                const labelText = item.querySelector('.form-check-label').textContent.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
                if (labelText.includes(query)) {
                    item.classList.remove('d-none');
                    visibleCount++;
                } else {
                    item.classList.add('d-none');
                }
            });

            if (visibleCount === 0) {
                agentNoResults.classList.remove('d-none');
            } else {
                agentNoResults.classList.add('d-none');
            }
        });

        agentSearchInput.addEventListener('click', (e) => {
            e.stopPropagation();
        });
        agentSearchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });
    }

    // Dynamic table sorting
    const headers = document.querySelectorAll('th.sortable');
    const tbody = document.querySelector('table tbody');
    let currentSortedColIndex = 6; // Date de création index
    let currentAscending = false;   // descending by default (date de création desc)

    headers.forEach((header) => {
        header.addEventListener('click', () => {
            const columnIndex = Array.from(header.parentNode.children).indexOf(header);
            const isSameColumn = (columnIndex === currentSortedColIndex);
            
            if (isSameColumn) {
                currentAscending = !currentAscending;
            } else {
                currentSortedColIndex = columnIndex;
                currentAscending = true; // default to ascending on new column
            }

            // Update header icons
            headers.forEach(h => {
                const icon = h.querySelector('i.bi');
                if (icon) {
                    icon.className = 'bi bi-arrow-down-up ms-1 text-muted';
                }
            });

            const activeIcon = header.querySelector('i.bi');
            if (activeIcon) {
                activeIcon.className = currentAscending ? 'bi bi-arrow-up ms-1 text-primary' : 'bi bi-arrow-down ms-1 text-primary';
            }

            // Sort table rows
            const rows = Array.from(tbody.querySelectorAll('tr'));
            if (rows.length === 0 || (rows.length === 1 && rows[0].querySelector('td[colspan]'))) {
                return; // no rows or empty message row
            }

            rows.sort((rowA, rowB) => {
                const cellA = rowA.children[columnIndex];
                const cellB = rowB.children[columnIndex];
                
                const valA = (cellA.getAttribute('data-sort') || cellA.textContent).trim();
                const valB = (cellB.getAttribute('data-sort') || cellB.textContent).trim();

                // Check if numeric
                const numA = Number(valA);
                const numB = Number(valB);
                const isNumeric = !isNaN(numA) && !isNaN(numB) && valA !== '' && valB !== '';

                let comparison = 0;
                if (isNumeric) {
                    comparison = numA - numB;
                } else {
                    comparison = valA.localeCompare(valB, undefined, { numeric: true, sensitivity: 'base' });
                }

                return currentAscending ? comparison : -comparison;
            });

            // Re-append sorted rows
            rows.forEach(row => tbody.appendChild(row));
        });
    });
});
</script>
{% endblock script %}