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

{% block title %}Fiche Bureau{% 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">Fiche Bureau - {{ office.name }}</h1>
                </div>
                <div class="card-body bg-white py-3">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-striped">
                                <tbody>
                                <tr>
                                    <th>Région</th>
                                    <td>{{ office.region }}</td>
                                </tr>
                                <tr>
                                    <th>Responsables</th>
                                    <td>
                                        {% for user in office.managers %}
                                            <a href="{{ path('organisation_collaborator', {'user': user.id}) }}">{{ user.fullName }}</a>
                                            {%- if not loop.last -%}, {%- endif -%}
                                        {% endfor %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Numéro de téléphone</th>
                                    <td><a href="tel:{{ office.phoneNumber }}">{{ office.phoneNumber }}</a></td>
                                </tr>
                                <tr>
                                    <th>Adresse mail</th>
                                    <td><a href="mailto:{{ office.mail }}">{{ office.mail }}</a></td>
                                </tr>
                                <tr>
                                    <th>Adresse postale</th>
                                    <td>{{ office.address | nl2br }}</td>
                                </tr>
                                <tr>
                                    <th>A propos</th>
                                    <td>{{ office.about | nl2br }}</td>
                                </tr>
                                <tr>
                                    <th>Heures d'ouverture</th>
                                    <td>{{ office.openingHours | nl2br }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12">
                            <h2>Organigramme du bureau {{ office.name }}</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': '{{ office.name }}',
                'title': 'Bureau',
                'type': 'office',
                '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 -%}
            }
        ;

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