@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold mb-4">Envoyer la campagne : « {{ $campaign->name }} »</h2>

  <div class="mb-6 p-4 bg-gray-50 border rounded text-gray-700 whitespace-pre-line">
    {{ $campaign->message }}
  </div>

  <form id="send-campaign-form" action="{{ route('campaigns.send', $campaign) }}" method="POST" class="space-y-6">
    @csrf

    {{-- Sélection des donateurs individuels --}}
    <div>
      <label for="donateurs" class="block text-sm font-medium text-gray-700">Sélectionner des donateurs</label>
      <select id="donateurs" name="donateurs[]" multiple
              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 h-40">
        @foreach($donateurs as $d)
          <option value="{{ $d->id }}" {{ in_array($d->id, old('donateurs', [])) ? 'selected' : '' }}>
            {{ $d->nom }} {{ $d->prenom }} @if($d->email) ({{ $d->email }}) @endif
          </option>
        @endforeach
      </select>
      @error('donateurs')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Sélection des groupes --}}
    <div>
      <label for="groups" class="block text-sm font-medium text-gray-700">Ou sélectionner des groupes</label>
      <select id="groups" name="groups[]" multiple
              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 h-40">
        @foreach($groups as $g)
          <option value="{{ $g->id }}" data-members='@json($g->donateurs->pluck("id"))' {{ in_array($g->id, old('groups', [])) ? 'selected' : '' }}>
            {{ $g->name }} ({{ $g->donateurs->count() }})
          </option>
        @endforeach
      </select>
      @error('groups')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div class="text-right text-sm text-gray-700">
      Destinataires uniques&nbsp;: <span id="recipient-count" class="font-semibold">0</span>
    </div>

    {{-- Boutons d'action --}}
    <div class="flex justify-end space-x-4">
      <a href="{{ route('campaigns.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-send')"
         class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 shadow">Lancer l'envoi</button>
      </div>
    </form>
  </div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const donateursSelect = document.getElementById('donateurs');
    const groupsSelect    = document.getElementById('groups');
    const countSpan       = document.getElementById('recipient-count');

    function updateCount() {
      const ids = new Set();

      // Donateurs sélectionnés
      Array.from(donateursSelect.selectedOptions).forEach(opt => {
        ids.add(opt.value);
      });

      // Donateurs issus des groupes sélectionnés
      Array.from(groupsSelect.selectedOptions).forEach(opt => {
        const members = JSON.parse(opt.dataset.members || '[]');
        members.forEach(id => ids.add(String(id)));
      });

      countSpan.textContent = ids.size;
    }

    donateursSelect.addEventListener('change', updateCount);
    groupsSelect.addEventListener('change', updateCount);

    updateCount();
  });
</script>
<x-confirm-modal id="confirm-send" formId="send-campaign-form" message="Lancer l'envoi de la campagne ?" confirmText="Envoyer" />
@endsection