@extends('layouts.admin-layout')

@section('title', 'Ajouter un Membre')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center mb-4">
                <a href="{{ route('admin.members.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">Ajouter un Membre</h1>
                    <p class="mt-2 text-gray-600">Enregistrez un nouveau membre</p>
                </div>
            </div>
        </div>

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

                <!-- Informations personnelles -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- Prénom -->
                    <div>
                        <label for="first_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-user text-blue-600 mr-2"></i>Prénom *
                        </label>
                        <input type="text"
                               name="first_name"
                               id="first_name"
                               value="{{ old('first_name') }}"
                               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('first_name') border-red-500 @enderror"
                               required>
                        @error('first_name')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Nom -->
                    <div>
                        <label for="last_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-user text-blue-600 mr-2"></i>Nom *
                        </label>
                        <input type="text"
                               name="last_name"
                               id="last_name"
                               value="{{ old('last_name') }}"
                               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('last_name') border-red-500 @enderror"
                               required>
                        @error('last_name')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Contact -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-envelope text-blue-600 mr-2"></i>Email *
                        </label>
                        <input type="email"
                               name="email"
                               id="email"
                               value="{{ old('email') }}"
                               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('email') border-red-500 @enderror"
                               required>
                        @error('email')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Téléphone -->
                    <div>
                        <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-phone text-blue-600 mr-2"></i>Téléphone
                        </label>
                        <input type="tel"
                               name="phone"
                               id="phone"
                               value="{{ old('phone') }}"
                               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('phone') border-red-500 @enderror">
                        @error('phone')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Date de naissance -->
                <div class="mb-6">
                    <label for="date_of_birth" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar text-blue-600 mr-2"></i>Date de Naissance
                    </label>
                    <input type="date"
                           name="date_of_birth"
                           id="date_of_birth"
                           value="{{ old('date_of_birth') }}"
                           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('date_of_birth') border-red-500 @enderror">
                    @error('date_of_birth')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Adresse -->
                <div class="mb-6">
                    <label for="address" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>Adresse
                    </label>
                    <textarea name="address"
                              id="address"
                              rows="2"
                              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('address') border-red-500 @enderror">{{ old('address') }}</textarea>
                    @error('address')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Ville et Pays -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- Ville -->
                    <div>
                        <label for="city" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-city text-blue-600 mr-2"></i>Ville
                        </label>
                        <input type="text"
                               name="city"
                               id="city"
                               value="{{ old('city') }}"
                               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('city') border-red-500 @enderror">
                        @error('city')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Pays -->
                    <div>
                        <label for="country" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-flag text-blue-600 mr-2"></i>Pays *
                        </label>
                        <input type="text"
                               name="country"
                               id="country"
                               value="{{ old('country', 'France') }}"
                               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('country') border-red-500 @enderror"
                               required>
                        @error('country')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Église -->
                <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 *
                    </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"
                            required>
                        <option value="">Sélectionnez une église</option>
                        @foreach($churches as $church)
                            <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                                {{ $church->name }} - {{ $church->city }}
                            </option>
                        @endforeach
                    </select>
                    @error('church_id')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Statut -->
                <div class="mb-6">
                    <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="pending" {{ old('status', 'pending') == 'pending' ? 'selected' : '' }}>En attente</option>
                        <option value="active" {{ old('status') == '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>

                <!-- Boutons d'action -->
                <div class="flex gap-4 pt-6 border-t border-gray-200">
                    <a href="{{ route('admin.members.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 Membre
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection