@extends('layouts.admin-layout')

@section('title', 'Ajouter une Église')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Ajouter une Église</h1>
            <p class="mt-2 text-gray-600">Créez une nouvelle église dans votre réseau</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl border border-gray-200">
                <div class="p-8 text-gray-900">
                    <form action="{{ route('admin.churches.store') }}" method="POST">
                        @csrf

                        <!-- Section: Informations de base -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-blue-500">
                                <div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-info-circle text-blue-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Informations de base</h2>
                            </div>

                            <div class="mb-6">
                                <label for="name" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-church text-blue-600 mr-2"></i>
                                    <span>Nom de l'Église</span>
                                    <span class="ml-1 text-red-500">*</span>
                                </label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                    placeholder="Ex: Église de Paris"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                @error('name')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="city" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                        <i class="fas fa-city text-blue-600 mr-2"></i>
                                        <span>Ville</span>
                                        <span class="ml-1 text-red-500">*</span>
                                    </label>
                                    <input type="text" name="city" id="city" value="{{ old('city') }}" required
                                        placeholder="Ex: Paris"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                    @error('city')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="country" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                        <i class="fas fa-globe text-blue-600 mr-2"></i>
                                        <span>Pays</span>
                                        <span class="ml-1 text-red-500">*</span>
                                    </label>
                                    <input type="text" name="country" id="country" value="{{ old('country', 'RDC') }}" required
                                        placeholder="Ex: France"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                    @error('country')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="address" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-location-dot text-blue-600 mr-2"></i>
                                    <span>Adresse complète</span>
                                </label>
                                <input type="text" name="address" id="address" value="{{ old('address') }}"
                                    placeholder="Ex: 1 Boulevard Gaston Birgé, 49100 Angers"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                @error('address')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>L'adresse complète sera affichée sur la page publique de l'église
                                </p>
                            </div>
                        </div>

                        <!-- Section: Contact -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-green-500">
                                <div class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-address-book text-green-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Informations de contact</h2>
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="phone" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                        <i class="fas fa-phone text-green-600 mr-2"></i>
                                        <span>Téléphone</span>
                                    </label>
                                    <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                                        placeholder="Ex: +33 2 41 25 18 50"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base">
                                    @error('phone')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="email" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                        <i class="fas fa-envelope text-green-600 mr-2"></i>
                                        <span>Email</span>
                                    </label>
                                    <input type="email" name="email" id="email" value="{{ old('email') }}"
                                        placeholder="Ex: paris@rachetesdeleternel.org"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base">
                                    @error('email')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="pastor" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                    <i class="fas fa-user-tie text-green-600 mr-2"></i>
                                    <span>Responsable</span>
                                </label>
                                <input type="text" name="pastor" id="pastor" value="{{ old('pastor') }}"
                                    placeholder="Ex: Apôtre Timothée MAMBA"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base">
                                @error('pastor')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Section: Détails supplémentaires -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-purple-500">
                                <div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-file-alt text-purple-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Détails supplémentaires</h2>
                            </div>

                            <div class="mb-6">
                                <label for="description" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-align-left text-purple-600 mr-2"></i>
                                    <span>Description</span>
                                </label>
                                <textarea name="description" id="description" rows="5"
                                    placeholder="Décrivez l'église, son histoire, sa mission..."
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">{{ old('description') }}</textarea>
                                @error('description')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Cette description sera affichée dans la section "À propos" de la page de l'église
                                </p>
                            </div>

                            <div class="mb-6">
                                <label for="image" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-image text-purple-600 mr-2"></i>
                                    <span>URL de l'image</span>
                                </label>
                                <input type="text" name="image" id="image" value="{{ old('image') }}"
                                    placeholder="https://example.com/image.jpg"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                @error('image')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Entrez l'URL complète d'une image pour représenter l'église
                                </p>
                            </div>
                        </div>

                        <!-- Section: Paramètres -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-orange-500">
                                <div class="bg-orange-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-cog text-orange-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Paramètres</h2>
                            </div>

                            <div class="mb-6">
                                <label for="status" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-orange-50 px-4 py-2 rounded-lg border-l-4 border-orange-500">
                                    <i class="fas fa-toggle-on text-orange-600 mr-2"></i>
                                    <span>Statut de publication</span>
                                    <span class="ml-1 text-red-500">*</span>
                                </label>
                                <select name="status" id="status" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500 text-base">
                                    <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active - Visible sur le site public</option>
                                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive - Cachée du site public</option>
                                </select>
                                @error('status')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Seules les églises actives sont visibles sur le site public
                                </p>
                            </div>
                        </div>

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