@extends('layouts.admin-layout')

@section('title', 'Créer un Don')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center mb-4">
                <a href="{{ route('admin.donations.index') }}" class="text-blue-600 hover:text-blue-800 mr-4">
                    <i class="fas fa-arrow-left text-xl"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Créer un Don</h1>
                    <p class="mt-2 text-gray-600">Ajoutez une nouvelle campagne de don</p>
                </div>
            </div>
        </div>

        <div class="max-w-4xl mx-auto">
            <form action="{{ route('admin.donations.store') }}" method="POST" class="bg-white rounded-xl shadow-md p-8">
                @csrf

                <!-- Titre -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heading text-blue-600 mr-2"></i>Titre du Don *
                    </label>
                    <input type="text"
                           name="title"
                           id="title"
                           value="{{ old('title') }}"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('title') border-red-500 @enderror"
                           placeholder="Ex: Soutenir la mission, Construction de l'église"
                           required>
                    @error('title')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-align-left text-blue-600 mr-2"></i>Description
                    </label>
                    <textarea name="description"
                              id="description"
                              rows="4"
                              class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('description') border-red-500 @enderror"
                              placeholder="Décrivez le projet ou le besoin pour lequel vous collectez des dons">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Texte du bouton -->
                <div class="mb-6">
                    <label for="button_text" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-mouse-pointer text-blue-600 mr-2"></i>Texte du Bouton *
                    </label>
                    <input type="text"
                           name="button_text"
                           id="button_text"
                           value="{{ old('button_text', 'Faire un don') }}"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('button_text') border-red-500 @enderror"
                           placeholder="Ex: Faire un don, Soutenir ce projet"
                           required>
                    @error('button_text')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Lien de don -->
                <div class="mb-6">
                    <label for="donation_link" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-link text-blue-600 mr-2"></i>Lien de Don *
                    </label>
                    <input type="url"
                           name="donation_link"
                           id="donation_link"
                           value="{{ old('donation_link') }}"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('donation_link') border-red-500 @enderror"
                           placeholder="https://www.exemple.com/donation"
                           required>
                    <p class="mt-2 text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Lien vers votre plateforme de don (PayPal, Stripe, HelloAsso, etc.)
                    </p>
                    @error('donation_link')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Église (optionnel) -->
                <div class="mb-6">
                    <label for="church_id" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-church text-blue-600 mr-2"></i>Église Spécifique (optionnel)
                    </label>
                    <select name="church_id"
                            id="church_id"
                            class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('church_id') border-red-500 @enderror">
                        <option value="">Don général (visible sur la page "Faire un don")</option>
                        @foreach($churches as $church)
                            <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                                {{ $church->name }} - {{ $church->city }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-2 text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Laissez vide pour un don général, ou sélectionnez une église pour afficher ce don uniquement sur sa page
                    </p>
                    @error('church_id')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Statut et Ordre d'affichage -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- Statut -->
                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-toggle-on text-blue-600 mr-2"></i>Statut *
                        </label>
                        <select name="status"
                                id="status"
                                class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('status') border-red-500 @enderror"
                                required>
                            <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Actif</option>
                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactif</option>
                        </select>
                        @error('status')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ordre d'affichage -->
                    <div>
                        <label for="display_order" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-sort-numeric-up text-blue-600 mr-2"></i>Ordre d'affichage *
                        </label>
                        <input type="number"
                               name="display_order"
                               id="display_order"
                               value="{{ old('display_order', 0) }}"
                               min="0"
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition @error('display_order') border-red-500 @enderror"
                               required>
                        <p class="mt-2 text-sm text-gray-500">
                            Plus le nombre est petit, plus le don apparaît en premier
                        </p>
                        @error('display_order')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Boutons d'action -->
                <div class="flex gap-4 pt-6 border-t border-gray-200">
                    <a href="{{ route('admin.donations.index') }}"
                       class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg transition text-center">
                        <i class="fas fa-times mr-2"></i>Annuler
                    </a>
                    <button type="submit"
                            class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition">
                        <i class="fas fa-save mr-2"></i>Créer le Don
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection