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

{% block title %}Organigramme du Groupe - Région {{ region.name }}{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 mb-3">
                <div class="card-header bg-grey">
                    <h1 class="h5 text-white m-0 fw-bold">Organigramme du Groupe - Région {{ region.name }}</h1>
                </div>
                <div class="card-body bg-white py-3">

                    <div class="row">
                        <div class="col-12">
                            <h2>Filtrer</h2>
                        </div>
                        {% for office in region.offices %}
                            <div class="col-12 col-lg-6 col-xl-3 mb-3">
                                <div class="bg-primary text-center">
                                    <a href="{{ path('organisation_office', {'office': office.id}) }}"
                                       class="text-white fw-bold nice-link text-uppercase d-block p-5"><i
                                                class="fas fa-globe-europe fs-1"></i>
                                        <br><br>{{ office.name }}</a>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-12">
                            <div id="chartContainer" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('organisation') }}
    <script>
        let datasource = {
            'name': '{{ region.name }}',
            'title': '',
            'type': 'region',
            'className': 'region',
            'children': [
                {%- for office in offices -%}
                {
                    'name': '{{ office.name }}',
                    'title': 'Bureau',
                    'type': 'office',
                    'link': '{{ path('organisation_office', {'office': office.id}) }}',
                    'className': 'office'{% if not office.users.empty %},{% endif %}
                    {%- if not office.users.empty -%}
                    'children': [
                        {%- for user in office.users -%}
                            {
                                'name': '{{ user.fullName }}',
                                'title': '{{ user.jobFunctions | join(', ') }}',
                                'type': 'user',
                                'isAssociate': {{ user.isAssociate ? 'true' : 'false' }},
                                'isManager': {{ user.isManager ? 'true' : 'false' }},
                                'picture': '{{ user.base64Picture ?: asset('images/default-user-picture.png') }}',
                                'className': '{% if user.isAssociate or user.isManager %}super-user{% endif %}',
                                'link': "{{ path('organisation_collaborator', {'user': user.id}) }}"
                            }
                        {% if not loop.last %},{% endif %}
                        {%- endfor -%}
                    ]
                    {%- endif -%}
                }{% if not loop.last %},{% endif %}
                {%- endfor -%}
            ]
        };

        defaultOrgChartConfig.data = datasource;
        let orgchart = new OrgChart(defaultOrgChartConfig)
    </script>
{% endblock %}