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

{% block title %}Organigramme du Groupe - Régions{% 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égions</h1>
                </div>
                <div class="card-body bg-white py-3">
                    <div class="row">
                        <div class="col-12">
                            <h2>Filtrer</h2>
                        </div>
                        {% for region in regions %}
                            <div class="col-12 col-lg-6 col-xl-3 mb-3">
                                <div class="bg-primary text-center">
                                    <a href="{{ path('organisation_region', {'region': region.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>{{ region }}</a>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-12">
                            <h2>Organigramme des régions</h2>
                            <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': 'Régions',
                'title': '',
                'type': 'region',
                'className': 'region',
                'children': [
                    {% for region in regions %}
                    {%- if not region.offices.empty -%}
                    {
                        'name': '{{ region.name }}',
                        'title': '',
                        'type': 'region',
                        'className': 'region',
                        'children': [
                            {%- for office in region.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' }},
                                        'isInChargeOfDepartment': 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 -%}
                        ]
                    },
                    {% endif %}
                    {%- endfor -%}
                ]
            }
        ;

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