@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 de donateurs</h2>
  <form method="POST" action="{{ route('donateurs.import') }}">
    @csrf
    <input type="hidden" name="confirm" value="1">
    <div class="mb-4">
      <label for="status-filter" class="mr-2">Afficher</label>
      <select id="status-filter" class="rounded border-gray-300">
        <option value="">Tous</option>
        <option value="ok">OK</option>
        <option value="ko">Pas OK</option>
        <option value="missing">Email/Téléphone manquant</option>
        <option value="dup-email">Email dupliqué</option>
        <option value="dup-phone">Téléphone dupliqué</option>
      </select>
    </div>
    <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">Fonction</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">Actions</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' : '' }}" data-errors="{{ implode('|', $row['errors']) }}" data-ok="{{ $row['errors'] ? '0' : '1' }}">
            <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 }}][fonction]" value="{{ old('rows.'.$i.'.fonction', $row['fonction']) }}" 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>
            <input type="hidden" name="rows[{{ $i }}][sexe]" value="{{ $row['sexe'] }}" />
            <input type="hidden" name="rows[{{ $i }}][groupes]" value="{{ $row['groupes'] }}" />
            <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('donateurs.index') }}" 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 () {
        var row = $(this).closest('tr');
        table.row(row).remove().draw();
      });

      $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable !== table.table().node()) { return true; }
        var filter = document.getElementById('status-filter').value;
        if (!filter) { return true; }

        var row = table.row(dataIndex).node();
        var errors = (row.dataset.errors || '').split('|').filter(Boolean);
        var ok = row.dataset.ok === '1';

        if (filter === 'ok') {
          return ok;
        }
        if (filter === 'ko') {
          return !ok;
        }
        if (filter === 'missing') {
          return errors.includes('Email ou téléphone manquant');
        }
        if (filter === 'dup-email') {
          return errors.includes('Email dupliqué');
        }
        if (filter === 'dup-phone') {
          return errors.includes('Téléphone dupliqué');
        }

        return true;
      });

      document.getElementById('status-filter').addEventListener('change', function () {
        table.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