@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto p-6 bg-white shadow rounded">
  <h2 class="text-2xl font-semibold mb-4">
    @if($scope === 'members')
      Liste des membres du groupe : {{ $group->name }}
    @else
      Liste des non-membres du groupe : {{ $group->name }}
    @endif
  </h2>

  <div class="flex flex-col sm:flex-row sm:space-x-4 mb-6">
    {{-- Import CSV/XLSX --}}
    <form action="{{ route('groups.import_members', $group) }}" method="POST" enctype="multipart/form-data" class="flex items-center mb-4 sm:mb-0">
      @csrf
      <label class="flex items-center bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700">
        <span>Importer des donateurs</span>
        <input type="file" name="file" accept=".csv,.xlsx" class="hidden ml-2" onchange="this.form.submit()">
      </label>
      @error('file')<p class="ml-4 text-sm text-red-600">{{ $message }}</p>@enderror
    </form>

    {{-- Recherche par BD --}}
    <form method="GET" action="" class="flex flex-1">
      <input type="hidden" name="scope" value="{{ $scope }}">
      <input type="text" name="search" placeholder="Rechercher..." value="{{ request('search') }}"
             class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-indigo-500" />
      <button type="submit" class="px-4 bg-blue-600 text-white rounded-r hover:bg-blue-700">
        🔍
      </button>
    </form>

    <a href="{{ route('groups.edit_members',
        array_merge(['group' => $group->id],
            request()->except('page'),
            ['scope' => $scope === 'members' ? 'non-members' : 'members'])) }}"
       class="mt-4 sm:mt-0 px-4 py-2 bg-gray-200 rounded text-center whitespace-nowrap">
      {{ $scope === 'members' ? 'Ajouter des membres' : 'Voir les membres' }}
    </a>
  </div>

  {{-- Table paginée des membres --}}
  <div class="overflow-x-auto">
    <form action="{{ route('groups.update_members', $group) }}" method="POST">
      @csrf @method('PUT')
      <input type="hidden" name="scope"  value="{{ $scope }}">
      <input type="hidden" name="search" value="{{ request('search') }}">
      <input type="hidden" name="page"   value="{{ request('page') }}">

      <table class="min-w-full divide-y divide-gray-200 mb-4 datatable">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">#</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Prénom</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Téléphone</th>
            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Membre</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          @foreach($donateurs as $d)
          <tr class="hover:bg-gray-50">
            <td class="px-4 py-3 whitespace-nowrap">{{ $loop->iteration + ($donateurs->currentPage()-1)*$donateurs->perPage() }}</td>
            <td class="px-4 py-3 whitespace-nowrap">{{ $d->nom }}</td>
            <td class="px-4 py-3 whitespace-nowrap">{{ $d->prenom }}</td>
            <td class="px-4 py-3 truncate max-w-xs">{{ $d->email ?? '-' }}</td>
            <td class="px-4 py-3 whitespace-nowrap">{{ $d->telephone ?? '-' }}</td>
            <td class="px-4 py-3 text-center">
              <input type="checkbox" name="donateurs[]" value="{{ $d->id }}"
                     {{ $group->donateurs->contains($d) ? 'checked' : '' }}
                     class="h-4 w-4 text-indigo-600 border-gray-300 rounded">
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>

      <div class="flex items-center justify-between">
        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
          {{ $scope === 'members' ? 'Retirer les membres sélectionnés' : 'Ajouter les membres sélectionnés' }}
        </button>
        <div>{{ $donateurs->appends(request()->query())->links() }}</div>
      </div>
    </form>
  </div>
</div>
@endsection