@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto p-8 bg-white shadow-lg rounded-lg">
  <div class="mb-6">
    <h2 class="text-2xl font-semibold text-gray-800">Modifier le groupe</h2>
    <p class="text-gray-600">Mettez à jour le nom et la description de votre groupe, ou gérez ses membres.</p>
  </div>

<form id="update-group-form" action="{{ route('groups.update', $group) }}" method="POST" class="space-y-6">
    @csrf @method('PUT')

    {{-- Nom du groupe --}}
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Nom du groupe</label>
      <input id="name" name="name" type="text" value="{{ old('name', $group->name) }}"
             class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500"
             placeholder="Ex: Campagne ABC - Payés" required>
      @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Description --}}
    <div>
      <label for="description" class="block text-sm font-medium text-gray-700">Description (optionnel)</label>
      <textarea id="description" name="description" rows="3"
                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="Description du groupe">{{ old('description', $group->description) }}</textarea>
      @error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Statistiques membres --}}
    <div class="grid grid-cols-2 gap-4">
      <div class="p-4 bg-blue-50 rounded-md">
        <h4 class="text-sm text-gray-500 uppercase">Membres actuels</h4>
        <p class="text-xl font-bold text-gray-800">{{ $group->donateurs()->count() }}</p>
      </div>
      <div class="p-4 bg-green-50 rounded-md">
        <h4 class="text-sm text-gray-500 uppercase">Dernier membre ajouté</h4>
        <p class="text-lg text-gray-800">{{ optional($group->donateurs()->latest()->first())->prenom ?? '-' }} {{ optional($group->donateurs()->latest()->first())->nom ?? '' }}</p>
      </div>
    </div>

    {{-- Boutons d'action --}}
    <div class="flex justify-end space-x-3">
      <a href="{{ route('groups.index') }}" 
         class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Annuler</a>
      <button type="button" onclick="openModal('confirm-update-group')"
         class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 shadow">Mettre à jour</button>
      </div>
    </form>
</div>
<x-confirm-modal id="confirm-update-group" formId="update-group-form" message="Mettre à jour ce groupe ?" confirmText="Mettre à jour" />
@endsection