@extends('layouts.app')
@section('content')
<div class="max-w-2xl mx-auto p-6 bg-white shadow-lg rounded-lg">
  {{-- Breadcrumb --}}
  <nav class="text-sm text-gray-500 mb-4" aria-label="Breadcrumb">
    <ol class="list-reset flex">
      <li><a href="{{ route('donateurs.index') }}" class="hover:underline">Donateurs</a></li>
      <li><span class="mx-2">/</span></li>
      <li class="text-gray-700">Ajouter</li>
    </ol>
  </nav>

  <h1 class="text-2xl font-semibold text-gray-800 mb-6">Ajouter un nouveau donateur</h1>

  @if(session('success'))
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
         class="mb-4 p-4 bg-green-100 border border-green-200 text-green-800 rounded">{{ session('success') }}</div>
  @endif

  @if(session('error'))
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
         class="mb-4 p-4 bg-red-100 border border-red-200 text-red-800 rounded">{{ session('error') }}</div>
  @endif

  <form action="{{ route('donateurs.store') }}" method="POST" class="space-y-6">
    @csrf

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      {{-- Nom --}}
      <div>
        <label for="nom" class="block text-sm font-medium text-gray-700">Nom <span class="text-red-500">*</span></label>
        <input type="text" name="nom" id="nom" value="{{ old('nom') }}"
               class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500"
               placeholder="Ex: Dupont" 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 <span class="text-red-500">*</span></label>
        <input type="text" name="prenom" id="prenom" value="{{ old('prenom') }}"
               class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500"
               placeholder="Ex: Marie" required>
        @error('prenom')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>

      {{-- Sexe --}}
      <div>
        <label class="block text-sm font-medium text-gray-700">Sexe <span class="text-red-500">*</span></label>
        <div class="mt-1 flex items-center space-x-4">
          <label class="inline-flex items-center">
            <input type="radio" name="sexe" value="M" {{ old('sexe')=='M'? 'checked' : '' }} required
                   class="text-indigo-600 border-gray-300 focus:ring-indigo-500">
            <span class="ml-2">Masculin</span>
          </label>
          <label class="inline-flex items-center">
            <input type="radio" name="sexe" value="F" {{ old('sexe')=='F'? 'checked' : '' }} required
                   class="text-indigo-600 border-gray-300 focus:ring-indigo-500">
            <span class="ml-2">Féminin</span>
          </label>
        </div>
        @error('sexe')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
      </div>

      {{-- 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') }}"
               class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500"
               placeholder="Ex: email@example.com">
        @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') }}"
               class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500"
               placeholder="22912345678">
        @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 id="fonction" name="fonction" value="{{ old('fonction') }}"
              class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" 
              placeholder="Directeur de l'école Doctorale"/>
        @error('fonction')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
      </div>

    </div>

    <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
      <a href="{{ route('donateurs.index') }}"
         class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">Annuler</a>
      <button type="submit"
         class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 shadow">Enregistrer</button>
    </div>
  </form>
</div>
@endsection