@extends('layouts.app')
@section('content')
<div class="max-w-7xl mx-auto p-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-semibold">Groupes</h1>
    <button type="button" onclick="openModal('create-group')" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Créer</button>
  </div>
  <div class="bg-white shadow rounded overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 datatable">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Membres</th>
          <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        @foreach($groups as $grp)
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-4">{{ $grp->name }}</td>
          <td class="px-6 py-4">{{ $grp->donateurs_count }}</td>
          <td class="px-6 py-4 text-center space-x-2">
            <a href="{{ route('groups.edit_members', ['group' => $grp->id, 'scope' => 'members']) }}" class="text-indigo-600 hover:text-indigo-800">Membres</a>
            <button type="button" onclick="openModal('members-group-{{ $grp->id }}')" class="text-indigo-600 hover:text-indigo-800">👁</button>
            <button type="button" onclick="openModal('edit-group-{{ $grp->id }}')" class="text-blue-600 hover:text-blue-800">✎</button>
            <form id="delete-group-{{ $grp->id }}-form" action="{{ route('groups.destroy', $grp) }}" method="POST" class="inline">
              @csrf @method('DELETE')
              <button type="button" onclick="openModal('confirm-delete-group-{{ $grp->id }}')" class="text-red-600 hover:text-red-800">🗑</button>
            </form>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <x-modal id="create-group">
    <h2 class="text-xl font-semibold mb-4">Nouveau groupe</h2>
    <form method="POST" action="{{ route('groups.store') }}">
      @csrf
      @include('groups.partials.form')
      <div class="mt-4 text-right space-x-2">
        <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded">Annuler</button>
        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded">Enregistrer</button>
      </div>
    </form>
  </x-modal>

  @foreach($groups as $grp)
    <x-modal id="edit-group-{{ $grp->id }}">
      <h2 class="text-xl font-semibold mb-4">Modifier le groupe</h2>
      <form method="POST" action="{{ route('groups.update', $grp) }}">
        @csrf
        @method('PUT')
        @include('groups.partials.form', ['group' => $grp])
        <div class="mt-4 text-right space-x-2">
          <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded">Annuler</button>
          <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded">Mettre à jour</button>
        </div>
      </form>
    </x-modal>
    <x-confirm-modal id="confirm-delete-group-{{ $grp->id }}" formId="delete-group-{{ $grp->id }}-form" message="Supprimer ce groupe ?" confirmText="Supprimer" />
    <x-modal id="members-group-{{ $grp->id }}" maxWidth="max-w-xl">
      <h2 class="text-xl font-semibold mb-4">Membres de {{ $grp->name }}</h2>
      <ul class="list-disc pl-5 space-y-1">
        @forelse($grp->donateurs as $m)
          <li>{{ $m->prenom }} {{ $m->nom }}</li>
        @empty
          <li>Aucun membre</li>
        @endforelse
      </ul>
      <div class="mt-4 text-right">
        <button type="button" onclick="closeModal()" class="px-4 py-2 bg-gray-200 rounded">Fermer</button>
      </div>
    </x-modal>
  @endforeach
</div>
@endsection