{# templates/admin/website_staff/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Visibilité Staff sur le Site{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Visibilité Équipe</h1>
            <p class="text-muted small mb-0">Pilotez l'affichage des collaborateurs sur la page "À propos" ou "Équipe" du site public.</p>
        </div>
        <div class="badge bg-primary text-wrap p-2" style="width: 12rem;">
            <i class="fas fa-info-circle me-1"></i> Gérez l'ordre et la mise en avant de votre staff.
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="bg-dark text-white">
                        <tr>
                            <th style="width: 100px;" class="text-center">Photo</th>
                            <th>Membre du Staff</th>
                            <th>Poste & Niveau d'accès</th>
                            <th class="text-center">Visible sur Site</th>
                            <th class="text-center">Mis en Vedette</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for user in staffMembers %}
                        <tr>
                           <td class="text-center">
    <div class="{{ user.websiteVisibility ? '' : 'is-hidden' }}" id="img-user-{{ user.id }}">
        {# On utilise le contrôleur partagé pour garantir le bon chemin de l'image #}
        {{ render(controller('App\\Controller\\Shared\\UserSharedController::renderProfileCard', {'user': user})) }}
    </div>
</td>
                            <td>
                                <div class="fw-bold">{{ user.fullName }}</div>
                                <small class="text-muted"><i class="fas fa-envelope me-1"></i>{{ user.email }}</small>
                            </td>
                            <td>
                                <span class="badge bg-light text-dark border">
                                    {{ user.poste ? user.poste.libelle : 'Non défini' }}
                                </span>
                                <div class="small text-muted mt-1">
                                    Niveau : {{ user.niveauAccess ? user.niveauAccess.libelle : 'N/A' }}
                                </div>
                            </td>
                            <td class="text-center">
                                {{ _self.make_switch(user.id, 'USER', 'visibility', user.websiteVisibility) }}
                            </td>
                            <td class="text-center">
                                {{ _self.make_switch(user.id, 'USER', 'vedette', user.websiteVedette) }}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                Aucun membre du staff trouvé.
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{# --- MACRO SWITCH --- #}
{% macro make_switch(id, type, field, value) %}
    <div class="form-check form-switch d-inline-block">
        <input class="form-check-input ajax-toggle" type="checkbox" 
               data-id="{{ id }}" data-type="{{ type }}" data-field="{{ field }}"
               {{ value ? 'checked' : '' }} style="transform: scale(1.2); cursor: pointer;">
    </div>
{% endmacro %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.querySelectorAll('.ajax-toggle').forEach(el => {
            el.addEventListener('change', function() {
                const userId = this.dataset.id;
                const isVisibilityField = this.dataset.field === 'visibility';

                updateData({
                    id: userId,
                    type: this.dataset.type,
                    field: this.dataset.field,
                    value: this.checked ? 1 : 0
                }).then(success => {
                    if (success && isVisibilityField) {
                        // Petit effet visuel sur la photo si on change la visibilité
                        const photo = document.getElementById('img-user-' + userId);
                        if (photo) {
                            photo.classList.toggle('is-hidden', !this.checked);
                        }
                    }
                });
            });
        });

        function updateData(payload) {
            return fetch('{{ path("admin_ajax_update_visibility") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(response => response.json())
            .then(data => {
                if(data.status === 'success') return true;
                alert('Erreur : ' + (data.message || 'Echec de la sauvegarde'));
                return false;
            })
            .catch(err => {
                console.error(err);
                alert('Erreur réseau');
                return false;
            });
        }
    </script>

    <style>
        .is-hidden { opacity: 0.3; filter: grayscale(1); }
        .table-primary { background-color: #f8f9fc !important; }
        .form-check-input:checked { background-color: #4e73df; border-color: #4e73df; }
    </style>
{% endblock %}