{% extends 'base.html.twig' %}

{% macro renderCategoryTree(categorie, level) %}
    <li>
        <div class="tree-item {% if categorie.filles|length > 0 %}has-children{% else %}no-children{% endif %} tree-level-{{ level }}" data-id="{{ categorie.id }}">
            <div class="tree-toggle {% if categorie.filles|length > 0 %}has-children expanded{% else %}no-children{% endif %}" onclick="toggleCategory(this)"></div>
            <div class="tree-content">
                <span class="tree-id">#{{ categorie.id }}</span>
                <span class="tree-title">{{ categorie.titre }}</span>
            </div>
            <div class="tree-actions">
                <a href="{{ path('categorie_show', { 'id': categorie.id }) }}" class="btn btn-xs btn-default" title="Afficher"><i class="fa fa-eye"></i></a>
                {% if app.user.aDroit('categorie_modification') %}
                <a href="{{ path('categorie_edit', { 'id': categorie.id }) }}" class="btn btn-xs btn-default" title="Modifier"><i class="fa fa-edit"></i></a>
                {% endif %}
                {% if app.user.aDroit('categorie_suppression') %}
                <a href="{{ path('categorie_delete', { 'id': categorie.id }) }}" class="btn btn-xs btn-danger" title="Supprimer"><i class="fa fa-trash"></i></a>
                {% endif %}
            </div>
        </div>
        {% if categorie.filles|length > 0 %}
            <ul class="tree-children">
                {% for fille in categorie.filles %}
                    {{ _self.renderCategoryTree(fille, level + 1) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Catégories</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered mt-20">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-cube font-green"></i>CATEGORIES</div>

                <div class="actions">
                    {% if app.user.aDroit('categorie_ajout') %}
                    <a href="{{ path('categorie_new') }}" class="btn white"><i class="fa fa-plus"></i> Nouvelle catégorie</a>
                    <button class="btn white hidden-print" onClick="exportTableToExcel('categories', 'CATEGORIES')"><i class="fa fa-download"></i> Exporter</button>
                    {% endif %}
                </div>
        </div>
        <div class="portlet-body">
            <style>
                .tree-view {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                }

                .tree-view li {
                    margin: 0;
                    padding: 0;
                }

                .tree-item {
                    display: flex;
                    align-items: center;
                    padding: 8px 12px;
                    border-radius: 4px;
                    transition: background-color 0.2s ease;
                    position: relative;
                }

                .tree-item:hover {
                    background-color: #f5f5f5;
                }

                .tree-toggle {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                    cursor: pointer;
                    user-select: none;
                    flex-shrink: 0;
                    color: #999;
                    font-size: 12px;
                }

                .tree-toggle:hover {
                    color: #333;
                }

                .tree-toggle.has-children {
                    color: #666;
                }

                .tree-toggle.collapsed::before {
                    content: '▶ ';
                }

                .tree-toggle.expanded::before {
                    content: '▼ ';
                }

                .tree-toggle.no-children {
                    color: transparent;
                    cursor: default;
                }

                .tree-toggle.no-children::before {
                    content: '  ';
                }

                .tree-content {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                }

                .tree-title {
                    flex: 1;
                    font-weight: 500;
                }

                .tree-id {
                    color: #999;
                    font-size: 12px;
                    padding: 2px 6px;
                    background-color: #f0f0f0;
                    border-radius: 3px;
                }

                .tree-actions {
                    display: flex;
                    gap: 4px;
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .tree-item:hover .tree-actions {
                    opacity: 1;
                }

                .tree-actions .btn {
                    padding: 4px 8px;
                    font-size: 12px;
                }

                .tree-children {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                    margin-left: 20px;
                    border-left: 1px solid #ddd;
                    padding-left: 0;
                }

                .tree-children li {
                    margin: 0;
                    padding: 0;
                }

                .tree-item.collapsed ~ .tree-children {
                    display: none;
                }

                .tree-level-0 {
                    padding-left: 0;
                }

                .tree-level-1 {
                    padding-left: 24px;
                }

                .tree-level-2 {
                    padding-left: 48px;
                }

                .tree-level-3 {
                    padding-left: 72px;
                }

                .tree-level-4 {
                    padding-left: 96px;
                }
            </style>

            <div style="margin-bottom: 15px;">
                <button class="btn btn-sm btn-default" onclick="expandAll()"><i class="fa fa-expand"></i> Développer tout</button>
                <button class="btn btn-sm btn-default" onclick="collapseAll()"><i class="fa fa-compress"></i> Réduire tout</button>
            </div>

            <div class="tree-container">
                <ul class="tree-view" id="categories">
                    {% for categorie in categories %}
                        {% if not categorie.parent %}
                            {{ _self.renderCategoryTree(categorie, 0) }}
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

</div>

<script>
    function toggleCategory(toggleElement) {
        const hasChildren = toggleElement.classList.contains('has-children');
        if (!hasChildren) return;

        const treeItem = toggleElement.parentElement;
        const treeChildren = treeItem.nextElementSibling;

        if (!treeChildren || !treeChildren.classList.contains('tree-children')) {
            return;
        }

        toggleElement.classList.toggle('expanded');
        toggleElement.classList.toggle('collapsed');
        treeChildren.style.display = toggleElement.classList.contains('expanded') ? '' : 'none';
    }

    function expandAll() {
        document.querySelectorAll('.tree-toggle.has-children').forEach(toggle => {
            toggle.classList.add('expanded');
            toggle.classList.remove('collapsed');
            const treeItem = toggle.parentElement;
            const treeChildren = treeItem.nextElementSibling;
            if (treeChildren && treeChildren.classList.contains('tree-children')) {
                treeChildren.style.display = '';
            }
        });
    }

    function collapseAll() {
        document.querySelectorAll('.tree-toggle.has-children.expanded').forEach(toggle => {
            toggle.classList.remove('expanded');
            toggle.classList.add('collapsed');
            const treeItem = toggle.parentElement;
            const treeChildren = treeItem.nextElementSibling;
            if (treeChildren && treeChildren.classList.contains('tree-children')) {
                treeChildren.style.display = 'none';
            }
        });
    }
</script>

{% endblock %}