@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto p-8 bg-white shadow rounded-lg">
  <div class="mb-6">
    <h2 class="text-2xl font-semibold text-gray-800">Modifier la campagne</h2>
    <p class="text-gray-600">Mettez à jour les informations et détails de votre campagne ci-dessous.</p>
  </div>

  {{-- Statistiques de la campagne --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
    <div class="p-4 bg-blue-50 rounded">
      <h3 class="text-sm font-medium text-gray-500 uppercase">Liens générés</h3>
      <p class="mt-2 text-3xl font-bold text-blue-600">{{ $campaign->links->count() }}</p>
    </div>
    <div class="p-4 bg-green-50 rounded">
      <h3 class="text-sm font-medium text-gray-500 uppercase">Payés</h3>
      <p class="mt-2 text-3xl font-bold text-green-600">{{ $campaign->links->where('status','paid')->count() }}</p>
    </div>
    <div class="p-4 bg-yellow-50 rounded">
      <h3 class="text-sm font-medium text-gray-500 uppercase">En attente</h3>
      <p class="mt-2 text-3xl font-bold text-yellow-600">{{ $campaign->links->where('status','pending')->count() }}</p>
    </div>
    <div class="p-4 bg-indigo-50 rounded">
      <h3 class="text-sm font-medium text-gray-500 uppercase">Taux de conversion</h3>
      @php
        $total = $campaign->links->count();
        $paid  = $campaign->links->where('status','paid')->count();
        $rate  = $total > 0 ? number_format(($paid/$total)*100,1) : 0;
      @endphp
      <p class="mt-2 text-3xl font-bold text-indigo-600">{{ $rate }}%</p>
    </div>
  </div>

  {{-- Formulaire de modification --}}
  <form id="update-campaign-form" action="{{ route('campaigns.update', $campaign) }}" method="POST" class="space-y-6" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    {{-- Nom de la campagne --}}
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Nom de la campagne</label>
      <input type="text" name="name" id="name"
             value="{{ old('name', $campaign->name) }}"
             class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:ring-blue-500 focus:border-blue-500">
      @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Slug --}}
    <div>
      <label for="slug" class="block text-sm font-medium text-gray-700">Slug (URL)</label>
      <input type="text" name="slug" id="slug" value="{{ old('slug', $campaign->slug) }}"
             class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
             placeholder="exemple-slug-campagne" required>
      @error('slug')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    {{-- Message --}}
    <div>
      <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
      <textarea name="message" id="message" rows="4"
                class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:ring-blue-500 focus:border-blue-500">{{ old('message', $campaign->message) }}</textarea>
      @error('message')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
      <label for="reminder_message" class="block text-sm font-medium text-gray-700">Message de relance (optionnel)</label>
      <textarea id="reminder_message" name="reminder_message" rows="4"
                class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:ring-blue-500 focus:border-blue-500"
                placeholder="Ex. : Bonjour … n’ayant pas reçu votre don, nous vous relançons…">{{ old('reminder_message', $campaign->reminder_message) }}</textarea>
      @error('reminder_message')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>


    <div>
      <label class="block text-sm font-medium text-gray-700">Nom de l’initiateur (optionnel)</label>
      <input name="initiator_name"
            value="{{ old('initiator_name', $campaign->initiator_name) }}"
            class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" />
      @error('initiator_name')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700">Poste de l’initiateur (optionnel)</label>
      <input name="initiator_position"
            value="{{ old('initiator_position', $campaign->initiator_position) }}"
            class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" />
      @error('initiator_position')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">Email de contact (optionnel)</label>
      <input type="email" name="contact_email"
            value="{{ old('contact_email', $campaign->contact_email ?? '') }}"
            class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"/>
      @error('contact_email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">Téléphone de contact (optionnel)</label>
      <input type="text" name="contact_phone"
            value="{{ old('contact_phone', $campaign->contact_phone ?? '') }}"
            class="mt-1 block w-full border border-gray-300 rounded-md p-2 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"/>
      @error('contact_phone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700">Couleur de la campagne</label>
      <input type="color" name="color"
            value="{{ old('color', $campaign->color ?? '#008015') }}"
            class="mt-1 h-10 w-16 p-0 border-0"/>
      @error('color')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700">Image de couverture (optionnel)</label>
      <input type="file" name="cover_image" accept="image/*"
            class="mt-1 block w-full border-gray-300 rounded" />
      <label class="inline-flex items-center">
        <input type="checkbox" name="remove_cover_image" value="1"
                class="form-checkbox h-5 w-5 text-red-600"/>
        <span class="ml-2 text-red-600">Supprimer l’image actuelle</span>
      </label>
      @error('cover_image')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
      @if(!empty($campaign->cover_image))
        <img src="{{ asset('storage/'.$campaign->cover_image) }}"
            class="mt-2 h-24 object-cover" alt="Couverture">
      @endif
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700">Image remerciement (optionnel)</label>
      <input type="file" name="thank_image" accept="image/*"
            class="mt-1 block w-full border-gray-300 rounded" />
      <label class="inline-flex items-center">
        <input type="checkbox" name="remove_thank_image" value="1"
                class="form-checkbox h-5 w-5 text-red-600"/>
        <span class="ml-2 text-red-600">Supprimer l’image actuelle</span>
      </label>
      @error('thank_image')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
      @if(!empty($campaign->thank_image))
        <img src="{{ asset('storage/'.$campaign->thank_image) }}"
            class="mt-2 h-24 object-cover" alt="Remerciement">
      @endif
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700">Image relance (optionnel)</label>
      <input type="file" name="reminder_image" accept="image/*"
            class="mt-1 block w-full border-gray-300 rounded" />
      <label class="inline-flex items-center">
        <input type="checkbox" name="remove_reminder_image" value="1"
                class="form-checkbox h-5 w-5 text-red-600"/>
        <span class="ml-2 text-red-600">Supprimer l’image actuelle</span>
      </label>
      @error('reminder_image')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
      @if(!empty($campaign->reminder_image))
        <img src="{{ asset('storage/'.$campaign->reminder_image) }}"
            class="mt-2 h-24 object-cover" alt="Relance">
      @endif
    </div>

    {{-- Actions --}}
    <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-update-campaign')" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 shadow">Mettre à jour la campagne</button>
    </div>
  </form>
</div>
<x-confirm-modal id="confirm-update-campaign" formId="update-campaign-form" message="Mettre à jour cette campagne ?" confirmText="Mettre à jour" />
<script>
  const nameInput = document.querySelector('input[name="name"]');
  const slugInput = document.querySelector('input[name="slug"]');
  if (nameInput && slugInput) {
    const slugify = str => str.toString()
      .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
      .toLowerCase().trim()
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/^-+|-+$/g, '');

    let slugEdited = slugInput.value !== '' && slugInput.value !== slugify(nameInput.value);

    nameInput.addEventListener('input', () => {
      if (!slugEdited) {
        slugInput.value = slugify(nameInput.value);
      }
    });

    slugInput.addEventListener('input', () => {
      slugEdited = slugInput.value !== slugify(nameInput.value);
    });
  }
</script>
@endsection