@extends('layouts.app')
@section('content')
<div class="max-w-7xl mx-auto p-6">
  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 space-y-4 sm:space-y-0">
    <h1 class="text-2xl font-semibold">Donateurs</h1>
    <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-2 space-y-2 sm:space-y-0">
      <button type="button" onclick="openModal('create-donateur')" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 whitespace-nowrap">Ajouter</button>
      <label class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700 whitespace-nowrap">
        Import
        <form action="{{ route('donateurs.import') }}" method="POST" enctype="multipart/form-data" class="m-0">
          @csrf
          <input type="file" name="file" accept=".csv,.xlsx" class="hidden" onchange="this.form.submit()">
        </form>
      </label>
    </div>
  </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-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">Fonction</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Sexe</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">Actions</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 }}</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 whitespace-nowrap">{{ $d->fonction }}</td>
          <td class="px-4 py-3 whitespace-nowrap">{{ $d->sexe }}</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 space-x-1">
            <button type="button" onclick="openModal('edit-donateur-{{ $d->id }}')" class="text-blue-600 hover:text-blue-800">✎</button>
            <form id="delete-donateur-{{ $d->id }}-form" action="{{ route('donateurs.destroy',$d) }}" method="POST" class="inline">
              @csrf @method('DELETE')
              <button type="button" onclick="openModal('confirm-delete-donateur-{{ $d->id }}')" class="text-red-600 hover:text-red-800">🗑</button>
            </form>
            <button type="button" onclick="loadDonateurDetails({{ $d->id }})" class="text-indigo-600 hover:text-indigo-800">Détails</button>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  
  <x-modal id="create-donateur">
    <h2 class="text-xl font-semibold mb-4">Ajouter un donateur</h2>
    <form method="POST" action="{{ route('donateurs.store') }}">
      @csrf
      @include('donateurs.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($donateurs as $d)
  <x-modal id="edit-donateur-{{ $d->id }}">
      <h2 class="text-xl font-semibold mb-4">Modifier le donateur</h2>
      <form method="POST" action="{{ route('donateurs.update', $d) }}">
        @csrf
        @method('PUT')
        @include('donateurs.partials.form', ['donateur' => $d])
        <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>

  @endforeach

  <x-modal id="donateur-details-modal" maxWidth="max-w-4xl">
    <div id="donateur-details-content"></div>
    <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>
  <x-confirm-modal id="confirm-delete-donateur-{{ $d->id }}" formId="delete-donateur-{{ $d->id }}-form" message="Supprimer?" confirmText="Supprimer" />
</div>
@endsection