{% set level = (user.level - rootLevel) +1 %}
{% set userObj = getUser(user.id) %}
{% set backgroundColor %}
    {% if level == 1 %}
        #54595F     {# Main row, level 1 (light gray) #}
    {% elseif level == 2 %}
        #7A7A7A    {# First level of collapse, level 2 (lighter gray) #}
    {% elseif level == 3 %}
        #262D35     {# Second level of collapse, level 3 (lightest gray) #}
    {% endif %}
{% endset %}


{% if user.customer is defined and user.customer is not empty and user.customer > 0%}
    {% set hasCustomers = true %}
{% else %}
    {% set hasCustomers = false %}
{% endif %}

{% if user.partner is defined and user.partner is not empty and user.partner > 0 %}
    {% set hasPartners = true %}
{% else %}
    {% set hasPartners = false %}
{% endif %}

{% block stylesheets %}
    <style>
        .round-btn {
            border-radius: 50%; /* This makes the button round */
            padding: 0.25rem 0.25rem; /* Adjust padding to reduce size */
            width: 30px; /* Fixed width for a perfect circle */
            height: 30px; /* Fixed height for a perfect circle */
            display: flex; /* To center the icon vertically and horizontally */
            align-items: center;
            justify-content: center;
        }

            .tooltip .tooltip-inner {
                background-color: #262D35; /* Background color */
                color: #fff; /* Text color */
                max-width: 300px;
                width: 300px;
                border-radius: 8px;
                padding: 15px;
            }
            .tooltip .arrow::before {
                border-bottom-color: #262D35; /* Match background color */
            }
            .tooltip-content {
                text-align: left;
            }
            .tooltip-header {
                display: flex;
                align-items: center;
            }
            .tooltip-image {
                height: 45px;
                width: 38px;
                margin-right: 10px;
            }
            .tooltip-title {
                line-height: 1.2;
            }
            .tooltip-body {
                margin-top: 10px;
            }
            .tooltip-body p {
                margin: 0;
            }
    </style>
{% endblock %}

{#{% if hasCustomers or hasPartners %}#}
{#    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#item-{{ user.id }}" aria-expanded="false" aria-controls="item-{{ user.id }}">#}
{#        +#}
{#    </button>#}
{#{% endif %}#}

{#<a href="item-{{ user.id }}" data-bs-toggle="collapse" data-bs-target="#item-{{ user.id }}" class="text-decoration-none">#}
    <table class="table table-hover mb-0 border">
        <tbody>
        <tr>
            <td style="width: 5%">
                {% if hasCustomers or hasPartners %}
                    {% if level < 4 %}
                        <button class="btn btn-sm btn-primary round-btn" type="button" data-bs-toggle="collapse" data-bs-target="#item-{{ user.id }}" aria-expanded="false" aria-controls="item-{{ user.id }}" onclick="toggleIcon(this)">
                            <span class="toggle-icon"><i class="ph ph-plus"></i></span>
                        </button>
                    {% endif %}
                   
                {% endif %}
            </td>
            <td style="width: 11.11%">
                    <span data-bs-placement="bottom" data-bs-popup="tooltip" data-bs-html="true" data-bs-title="{{ include('frontend/team/network_tree_popover_tpl_html.twig') }}">
                        <span class="chevron">
                            {% if user.is_customer is defined %}
                                <i class="fa ph ph-user"></i> {{ user.first_name  ?? '' }} {{ user.last_name ?? '' }}
                            {% else %}
                                {% if level is defined and level > 1%}
                                    <span class="mr-1">{% for i in 1..(level) %}-{% endfor %}</span>
                                {% endif %}
                                <i class="fa {% if user.is_customer is defined and user.is_customer == true %}ph ph-user{% else %}ph ph-handshake{% endif %}"></i> {{ user.first_name  ?? '' }} {{ user.last_name ?? '' }}
                            {% endif %}
                        </spaan>
                    </span>
            </td>
            <td style="width: 11.11%">
                {{ user.client ?? 0 }}
            </td>
            <td style="width: 11.11%">
                {{ user.partners ?? 0}}
            </td>
            <td style="width: 11.11%">{{ user.feedback ?? 0.00}} </td>
            <td style="width: 11.11%">{{ user.rank ?? 0.00}} </td>
            <td style="width: 11.11%">{{ user.runing_ai_products ?? 0.00}} </td>
            <td style="width: 11.11%">
                {{ user.is_customer is defined and user.is_customer ? '-' : (user.total_sale is defined and user.total_sale ? user.total_sale|number_format(2, ',', '.') ~ ' €' : '0.00 €') }}
            </td>
            <td style="width: 11.11%">
                {{ user.is_customer is defined and user.is_customer ? '-' : (user.incoming_value is defined and user.incoming_value ? user.incoming_value|number_format(2, ',', '.') ~ ' €' : '0.00 €') }}
            </td>
            <td style="width: 11.11%">
                {{ user.is_customer is defined and user.is_customer ? '-' : (user.this_month is defined and user.this_month ? user.this_month|number_format(2, ',', '.') ~ ' €' : '0.00 €') }}
            </td>
        </tr>
        </tbody>
    </table>
{#</a>#}

{# Display all the Clients data#}
<div class="collapse" id="item-{{ user.id }}" style="background: {{ backgroundColor }};">
    {% if user.customer is defined and  user.customer is not empty%}
        {% for userCustomer in user.customer %}
            {% if level < 4 %}
                {{ include('frontend/team/network_tree_row.html.twig', {user: userCustomer}) }}
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

{# Display all the Affiliate Data#}
<div class="collapse" id="item-{{ user.id }}" style="background: {{ backgroundColor }};">
    {% if user.partner is defined %}
        {% for child in user.partner %}
            {% if level < 4 %}
                {{ include('frontend/team/network_tree_row.html.twig', {user: child}) }}
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<script>
    function toggleIcon(button) {
       $(document).ready(function(){
            $('[data-bs-popup="tooltip"]').tooltip({
                template: '<div class="tooltip custom-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
            });
        });
            
        var icon = button.querySelector('.toggle-icon i');
        if (icon.classList.contains('ph-plus')) {
            icon.classList.remove('ph-plus');
            icon.classList.add('ph-minus');
            button.classList.remove('btn-primary');
            button.classList.add('btn-danger');
        } else {
            icon.classList.remove('ph-minus');
            icon.classList.add('ph-plus');
            button.classList.remove('btn-danger');
            button.classList.add('btn-primary');
        }
    }

</script>