@extends('admin.layout')

@section('title', 'Groupes de responsables')

@section('content')
    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div>

    <section class="section">
        <div class="card p-4">

            <div class="col-xl-1">
                {{-- Ajout et modification dans une fenetre (js/modale-saisie.js) :
                     un nom et des cases a cocher ne meritent pas de quitter la
                     liste. --}}
                @can('responsable_groups.create')
                    <button type="button" class="btn btn-primary" title="Ajouter un groupe de responsables"
                        data-bs-toggle="modal" data-bs-target="#modale-groupe"><i
                            class="fa-solid fa-plus"></i></button>
                @endcan
            </div>
            <br>

            {{-- Les zones (data-zone) : ce que js/sur-place.js remplace apres un
                 geste, sans recharger la page — messages, lignes. --}}
            <div data-zone="messages">
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
            </div>

            <p class="text-muted">
                Un groupe rassemble des co-responsables qu'on assigne toujours ensemble.
                Ils apparaîtront comme une seule case à cocher dans le formulaire des employés,
                et comme une seule boîte dans l'organigramme.
            </p>

            <div class="table-responsive-sm">
                <table class="table table-hover table-compacte">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th style="width: 35%">Nom du groupe</th>
                            <th style="width: 65%">Membres</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody data-zone="lignes">
                        @forelse ($groups as $group)
                            <tr>
                                <td>{{ $group->id }}</td>
                                <td class="col-souple" title="{{ $group->nom }}"><strong>{{ $group->nom }}</strong></td>
                                {{-- Les membres sur une ligne (liste compacte), la liste
                                     entière au survol. --}}
                                @php
                                    $membres = $group->membres->map(fn ($m) => mb_strtoupper(trim($m->nom . ' ' . $m->prenom)))->implode(', ');
                                @endphp
                                <td class="col-souple" title="{{ $membres }}">
                                    @if ($membres !== '')
                                        {{ $membres }}
                                    @else
                                        <span class="text-muted fst-italic">Aucun membre</span>
                                    @endif
                                </td>
                                <td class="col-actions">
                                    @can('responsable_groups.edit')
                                        <button type="button" class="btn btn-success btn-sm" title="Modifier"
                                            data-bs-toggle="modal" data-bs-target="#modale-groupe"
                                            data-id="{{ $group->id }}" data-libelle="{{ $group->nom }}"
                                            data-nom="{{ $group->nom }}"
                                            data-membres="{{ $group->membres->pluck('id')->implode(',') }}"><i
                                                class="fa fa-edit"></i></button>
                                    @endcan
                                    @can('responsable_groups.delete')
                                        <form action="{{ route('responsable_groups.destroy', $group) }}" method="POST" style="display:inline;">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-danger btn-sm" onclick="return confirm('Supprimer ce groupe ? Les membres repasseront sans groupe.')">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">Aucun groupe pour le moment.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @include('admin.membres.responsable_groups._modale')

        </div>
    </section>

    <script src="@assetV('js/modale-saisie.js')"></script>
@endsection