@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">Prévisualisation de l'import pour le groupe : {{ $group->name }}</h2>

  <form method="POST" action="{{ route('groups.import_members', $group) }}">
    @csrf
    <input type="hidden" name="confirm" value="1">

    <div class="overflow-x-auto">
      <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">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-left text-xs font-medium text-gray-500 uppercase">Statut</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">&nbsp;</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          @foreach($rows as $i => $row)
          <tr class="hover:bg-gray-50 {{ $row['errors'] ? 'bg-red-50' : '' }}">
            <td class="px-4 py-2">
              <input type="text" name="rows[{{ $i }}][nom]" value="{{ old('rows.'.$i.'.nom', $row['nom']) }}" class="w-full rounded border-gray-300" />
            </td>
            <td class="px-4 py-2">
              <input type="text" name="rows[{{ $i }}][prenom]" value="{{ old('rows.'.$i.'.prenom', $row['prenom']) }}" class="w-full rounded border-gray-300" />
            </td>
            <td class="px-4 py-2">
              <input type="text" name="rows[{{ $i }}][email]" value="{{ old('rows.'.$i.'.email', $row['email']) }}" class="w-full rounded border-gray-300" />
            </td>
            <td class="px-4 py-2">
              <input type="text" name="rows[{{ $i }}][telephone]" value="{{ old('rows.'.$i.'.telephone', $row['telephone']) }}" class="w-full rounded border-gray-300" />
            </td>
            @foreach($row['errors'] as $err)
              <input type="hidden" name="rows[{{ $i }}][errors][]" value="{{ $err }}" />
            @endforeach
            <td class="px-4 py-2">
              @if($row['errors'])
                <ul class="text-red-600 text-sm list-disc pl-4">
                  @foreach($row['errors'] as $err)
                    <li>{{ $err }}</li>
                  @endforeach
                </ul>
              @else
                <span class="text-green-600">OK</span>
              @endif
            </td>
            <td class="px-4 py-2 text-center">
              <button type="button" class="remove-row text-red-600">🗑</button>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <div class="flex justify-end space-x-2">
      <a href="{{ route('groups.edit_members', $group) }}" class="px-4 py-2 bg-gray-200 rounded">Annuler</a>
      <button type="submit" name="action" value="visible" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Confirmer la liste affichée</button>
      <button type="submit" name="action" value="all" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Confirmer l'importation</button>
    </div>
  </form>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var tableEl = $('.datatable');
    tableEl.on('init.dt', function () {
      var table = tableEl.DataTable();

      tableEl.on('click', '.remove-row', function () {
        table.row($(this).closest('tr')).remove().draw();
      });
    });
    document.querySelector('form').addEventListener('submit', function (e) {
      if (e.submitter && e.submitter.name === 'action' && e.submitter.value === 'visible') {
        let table = $('.datatable').DataTable();
        $(table.rows({ search: 'removed' }).nodes()).remove();
      }
    });
  });
</script>
@endsection