{% extends '@App/app.html.twig' %}

{% block title %}Établissements{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    <div class="data-page">
        <div class="data-page__header">
            <div>
                <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                    <span>Configuration RH</span>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <strong>Établissements</strong>
                </nav>
                <h1>Établissements</h1>
                <p>Gérez les différents sites et lieux de travail de votre organisation.</p>
            </div>
            <div class="data-page__actions">
                <a class="data-button data-button--secondary" href="{{ path('employee_settings_index') }}">
                    <i class="ti ti-arrow-left" aria-hidden="true"></i>Retour
                </a>
                <a class="data-button data-button--secondary" href="{{ path('employee_settings_establishments_export', app.request.query.all) }}">
                    <i class="ti ti-file-export" aria-hidden="true"></i>Exporter
                </a>
                {% if is_granted('EMPLOYEE_ESTABLISHMENT_CREATE') %}
                    <a class="data-button data-button--primary" href="{{ path('employee_settings_establishments_new', app.request.query.all) }}">
                        <i class="ti ti-plus" aria-hidden="true"></i>Nouvel établissement
                    </a>
                {% endif %}
            </div>
        </div>

        <div class="data-stat-grid">
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--info"><i class="ti ti-building" aria-hidden="true"></i></span>
                <div><span>Total</span><strong>{{ establishment_stats.total|default(items|length) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--success"><i class="ti ti-circle-check" aria-hidden="true"></i></span>
                <div><span>Actifs</span><strong>{{ establishment_stats.active|default(0) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--muted"><i class="ti ti-circle-x" aria-hidden="true"></i></span>
                <div><span>Inactifs</span><strong>{{ establishment_stats.inactive|default(0) }}</strong></div>
            </article>
            <article class="data-stat-card">
                <span class="data-stat-card__icon data-stat-card__icon--purple"><i class="ti ti-users" aria-hidden="true"></i></span>
                <div><span>Salariés</span><strong>{{ establishment_stats.employees|default(0) }}</strong></div>
            </article>
        </div>

        <section class="data-card" data-controller="data-table">
            <form class="data-toolbar" method="get">
                <div class="data-search">
                    <i class="ti ti-search" aria-hidden="true"></i>
                    <input name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher par nom, ville..." aria-label="Rechercher un établissement">
                </div>
                <div class="data-toolbar__controls">
                    <select name="actif" aria-label="Filtrer par statut">
                        <option value="">Tous les statuts</option>
                        <option value="1" {{ filters.actif|default('') == '1' ? 'selected' : '' }}>Actifs</option>
                        <option value="0" {{ filters.actif|default('') == '0' ? 'selected' : '' }}>Inactifs</option>
                    </select>
                    <button class="data-icon-button" type="submit" title="Filtrer">
                        <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                    </button>
                    {% if filters|filter(v => v is not empty)|length > 0 %}
                        <a class="data-icon-button" href="{{ path('employee_settings_establishments') }}" title="Réinitialiser">
                            <i class="ti ti-x" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                    <div class="data-view-toggle" aria-label="Mode d'affichage">
                        <button class="is-active" type="button" data-data-table-target="tableButton" data-action="data-table#showTable" title="Vue tableau">
                            <i class="ti ti-list" aria-hidden="true"></i>
                        </button>
                        <button type="button" data-data-table-target="gridButton" data-action="data-table#showGrid" title="Vue cartes">
                            <i class="ti ti-layout-grid" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </form>

            {% if items is not empty %}
                <div class="data-table-wrap" data-data-table-target="tableView">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th class="data-table__select"><input type="checkbox" data-data-table-target="checkAll" data-action="data-table#toggleAll"></th>
                                <th>Nom & localisation</th>
                                <th>Contact</th>
                                <th>Responsable</th>
                                <th>Statut</th>
                                <th>Salariés</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                                <tr class="data-row {{ item.actif ? '' : 'is-muted' }}">
                                    <td class="data-table__select"><input type="checkbox" data-data-table-target="rowCheckbox" data-action="data-table#toggleRow"></td>
                                    <td>
                                        <div class="data-entity">
                                            <span class="data-avatar data-avatar--initials"><i class="ti ti-building" aria-hidden="true"></i></span>
                                            <div>
                                                <span class="data-entity__title">{{ item.nom }}</span>
                                                <div class="data-entity__meta">
                                                    <i class="ti ti-map-pin" aria-hidden="true"></i>
                                                    <span>{{ item.ville ?: 'Ville non renseignée' }}{% if item.codePostal %}, {{ item.codePostal }}{% endif %}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="data-main-text">{{ item.email ?: '-' }}</div>
                                        <div class="data-sub-text">{{ item.telephone ?: '-' }}</div>
                                    </td>
                                    <td>
                                        {% if item.responsable %}
                                            <div class="data-main-text">{{ item.responsable.prenom }} {{ item.responsable.nom }}</div>
                                        {% else %}
                                            <span class="data-sub-text">Non renseigné</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="data-badge-stack">
                                            {% if item.estPrincipal %}
                                                <span class="data-badge data-badge--info">Principal</span>
                                            {% endif %}
                                            <span class="data-badge {{ item.actif ? 'data-badge--success' : 'data-badge--muted' }}">
                                                <i aria-hidden="true"></i>{{ item.actif ? 'Actif' : 'Inactif' }}
                                            </span>
                                        </div>
                                    </td>
                                    <td><span class="data-count-badge">{{ salarie_counts[item.id]|default(0) }}</span></td>
                                    <td>
                                        <div class="data-row-actions">
                                            {% if is_granted('EMPLOYEE_ESTABLISHMENT_EDIT') %}
                                                <a class="data-action-button" href="{{ path('employee_settings_establishments_edit', app.request.query.all|merge({id: item.id})) }}" title="Modifier">
                                                    <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                                                </a>
                                            {% endif %}
                                            {% if is_granted('EMPLOYEE_ESTABLISHMENT_DISABLE') %}
                                                <form method="post" action="{{ path(item.actif ? 'employee_settings_establishments_disable' : 'employee_settings_establishments_enable', {id: item.id}) }}" onsubmit="return confirm('Confirmer cette action ?')">
                                                    <input type="hidden" name="_token" value="{{ csrf_token((item.actif ? 'employee_establishment_disable_' : 'employee_establishment_enable_') ~ item.id) }}">
                                                    <button class="data-action-button {{ item.actif ? 'data-action-button--warning' : '' }}" type="submit" title="{{ item.actif ? 'Désactiver' : 'Réactiver' }}">
                                                        <i class="ti {{ item.actif ? 'ti-circle-x' : 'ti-circle-check' }}" aria-hidden="true"></i><span>{{ item.actif ? 'Désactiver' : 'Réactiver' }}</span>
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="data-grid-view" data-data-table-target="gridView" hidden>
                    {% for item in items %}
                        <article class="data-grid-card {{ item.actif ? '' : 'is-muted' }}">
                            <div class="data-grid-card__header">
                                <div class="data-entity">
                                    <span class="data-avatar data-avatar--initials"><i class="ti ti-building" aria-hidden="true"></i></span>
                                    <div>
                                        <span class="data-grid-card__title">{{ item.nom }}</span>
                                        <div class="data-sub-text">{{ item.ville ?: 'Ville non renseignée' }}</div>
                                    </div>
                                </div>
                                <div class="data-row-actions">
                                    {% if is_granted('EMPLOYEE_ESTABLISHMENT_EDIT') %}
                                        <a class="data-action-button" href="{{ path('employee_settings_establishments_edit', app.request.query.all|merge({id: item.id})) }}" title="Modifier">
                                            <i class="ti ti-pencil" aria-hidden="true"></i><span>Modifier</span>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                            <dl>
                                <div><dt>Contact</dt><dd>{{ item.email ?: '-' }}</dd></div>
                                <div><dt>Téléphone</dt><dd>{{ item.telephone ?: '-' }}</dd></div>
                                <div><dt>Salariés</dt><dd>{{ salarie_counts[item.id]|default(0) }}</dd></div>
                            </dl>
                            <div class="data-badge-stack">
                                {% if item.estPrincipal %}
                                    <span class="data-badge data-badge--info">Principal</span>
                                {% endif %}
                                <span class="data-badge {{ item.actif ? 'data-badge--success' : 'data-badge--muted' }}">
                                    <i aria-hidden="true"></i>{{ item.actif ? 'Actif' : 'Inactif' }}
                                </span>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            {% else %}
                <div class="data-empty">
                    <i class="ti ti-building-off" aria-hidden="true"></i>
                    <strong>Aucun établissement</strong>
                    <span>Ajustez vos filtres ou créez un nouvel établissement.</span>
                </div>
            {% endif %}
        </section>
    </div>
{% endblock %}