@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto p-8 bg-white shadow-lg rounded-lg">
  <div class="mb-6">
    <h2 class="text-2xl font-semibold text-gray-800">Modifier un donateur</h2>
    <p class="text-gray-600">Vous pouvez mettre à jour les informations personnelles du donateur ci-dessous.</p>
  </div>

  {{-- Statistiques du donateur --}}
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="p-4 bg-blue-50 rounded">
      <h3 class="text-sm text-gray-500 uppercase">Liens générés</h3>
      <p class="text-2xl font-bold text-blue-600">{{ $donateur->links->count() }}</p>
    </div>
    <div class="p-4 bg-green-50 rounded">
      <h3 class="text-sm text-gray-500 uppercase">Paiements reçus</h3>
      <p class="text-2xl font-bold text-green-600">{{ $donateur->payments->count() }}</p>
    </div>
    <div class="p-4 bg-indigo-50 rounded">
      <h3 class="text-sm text-gray-500 uppercase">Montant total</h3>
      <p class="text-2xl font-bold text-indigo-600">{{ number_format($donateur->payments->sum('amount'), 0, ',', ' ') }} XOF</p>
    </div>
  </div>

  {{-- Formulaire de modification --}}
  <form id="update-donateur-form" action="{{ route('donateurs.update', $donateur) }}" method="POST" class="space-y-6">
    @csrf
    @method('PUT')

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
      {{-- Nom --}}
      <div>
        <label for="nom" class="block text-sm font-medium text-gray-700">Nom</label>
        <input type="text" name="nom" id="nom"
               value="{{ old('nom', $donateur->nom) }}"
               class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
        @error('nom')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>

      {{-- Prénom --}}
      <div>
        <label for="prenom" class="block text-sm font-medium text-gray-700">Prénom</label>
        <input type="text" name="prenom" id="prenom"
               value="{{ old('prenom', $donateur->prenom) }}"
               class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
        @error('prenom')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>
    </div>

    <div class="mb-4">
      <label for="sexe" class="block text-sm font-medium text-gray-700">Genre</label>
      <select id="sexe" name="sexe"
              class="mt-1 block w-full rounded border-gray-300 p-2 focus:border-indigo-500 focus:ring-indigo-500">
        <option value="">-- Sélectionnez --</option>
        <option value="M" {{ old('sexe', $donateur->sexe ?? '')=='M' ? 'selected' : '' }}>Homme</option>
        <option value="F" {{ old('sexe', $donateur->sexe ?? '')=='F' ? 'selected' : '' }}>Femme</option>
      </select>
      @error('sexe')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
      {{-- Email --}}
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
        <input type="email" name="email" id="email"
               value="{{ old('email', $donateur->email) }}"
               class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>

      {{-- Téléphone --}}
      <div>
        <label for="telephone" class="block text-sm font-medium text-gray-700">Téléphone</label>
        <input type="text" name="telephone" id="telephone"
               value="{{ old('telephone', $donateur->telephone) }}"
               class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        @error('telephone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>
      
      <div>
        <label for="fonction" class="block text-sm font-medium text-gray-700">Fonction</label>
        <input name="fonction" value="{{ old('fonction', $donateur->fonction ?? '') }}"
              class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" />
        @error('fonction')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
      </div>
    </div>

    

    {{-- Actions --}}
    <div class="flex justify-end space-x-4">
      <a href="{{ route('donateurs.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-donateur')" 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-donateur" formId="update-donateur-form" message="Mettre à jour ce donateur ?" confirmText="Mettre à jour" />
@endsection