@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto p-8 bg-white shadow-lg rounded-lg">
  <div class="mb-6">
    <h2 class="text-2xl font-semibold text-gray-800">Créer une nouvelle campagne</h2>
    <p class="text-gray-600">Remplissez les informations ci-dessous pour lancer une campagne de dons.</p>
  </div>

  <form action="{{ route('campaigns.store') }}" method="POST" class="space-y-6" enctype="multipart/form-data">
    @csrf

    @include('campaigns.partials.form', ['campaign' => null])

    {{-- 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="submit" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 shadow">Enregistrer la campagne</button>
    </div>
  </form>
</div>
<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