@extends('layouts.public-layout')

@section("title", "Inscription Membre - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@section('content')
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-primary-navy via-blue-900 to-purple-900 text-white py-20 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 right-10 w-64 h-64 bg-primary-gold rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-10 w-72 h-72 bg-blue-500 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="inline-block mb-4 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                    <span class="text-primary-gold font-semibold">Rejoignez la famille</span>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 font-serif">
                    Inscription Membre
                </h1>
                <p class="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
                    Devenez membre officiel de Mission Mondiale de la Parole de Vie<br class="hidden sm:inline">
                    "Les Rachetés de l'Eternel"
                </p>
            </div>
        </div>
    </section>

    <!-- Success Message -->
    @if(session('success'))
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg" role="alert">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-2xl mr-3"></i>
                    <p class="font-semibold">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Benefits Section -->
    <section class="py-12 bg-gradient-to-br from-blue-50 to-purple-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">
                    Avantages de la Carte de Membre
                </h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    En tant que membre officiel, vous recevrez une carte personnalisée avec de nombreux avantages
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mb-12">
                <div class="bg-white rounded-xl p-6 shadow-lg text-center">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                        <i class="fas fa-id-card text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Carte Personnalisée</h3>
                    <p class="text-gray-600">
                        Recevez votre carte de membre officielle avec votre photo et les informations de votre église locale
                    </p>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-lg text-center">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
                        <i class="fas fa-users text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Famille Mondiale</h3>
                    <p class="text-gray-600">
                        Faites partie de la grande famille des Rachetés de l'Eternel à travers le monde
                    </p>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-lg text-center">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                        <i class="fas fa-certificate text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Identification Officielle</h3>
                    <p class="text-gray-600">
                        Une carte d'identification officielle reconnue dans toutes les églises du réseau
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Registration Form -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 md:p-12">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-3">
                        Formulaire d'Inscription
                    </h2>
                    <p class="text-gray-600">
                        Remplissez le formulaire ci-dessous pour devenir membre. Votre demande sera examinée et vous recevrez votre carte une fois approuvée.
                    </p>
                </div>

                <form action="{{ route('public.member.registration.submit') }}" method="POST" class="space-y-6">
                    @csrf

                    <!-- Name -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <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>

                        <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-1 md:grid-cols-2 gap-6">
                        <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>

                        <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"
                                   required>
                            @error('phone')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Date of Birth -->
                    <div>
                        <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"
                               required>
                        @error('date_of_birth')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Address -->
                    <div>
                        <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 Complète *
                        </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"
                                  required>{{ old('address') }}</textarea>
                        @error('address')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- City and Country -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <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"
                                   required>
                            @error('city')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <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>

                    <!-- Church -->
                    <div>
                        <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>Votre Église Locale *
                        </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 votre é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>

                    <!-- Submit Button -->
                    <div class="pt-6">
                        <button type="submit"
                                class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
                            <i class="fas fa-paper-plane mr-2"></i>Soumettre mon Inscription
                        </button>
                    </div>

                    <p class="text-sm text-gray-600 text-center">
                        <i class="fas fa-info-circle mr-1"></i>
                        Votre demande sera examinée par notre équipe. Vous recevrez votre carte de membre une fois votre inscription approuvée.
                    </p>
                </form>
            </div>
        </div>
    </section>

    <!-- Info Section -->
    <section class="py-12 bg-gradient-to-br from-gray-50 to-blue-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-xl p-8 text-center shadow-lg">
                <i class="fas fa-question-circle text-blue-600 text-5xl mb-4"></i>
                <h3 class="text-2xl font-bold text-gray-900 mb-3">Questions ?</h3>
                <p class="text-gray-700 mb-6">
                    Pour toute question concernant l'inscription des membres ou votre carte personnalisée, n'hésitez pas à nous contacter.
                </p>
                <a href="mailto:contact@mmpv.org"
                   class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition">
                    <i class="fas fa-envelope mr-2"></i>Nous Contacter
                </a>
            </div>
        </div>
    </section>
@endsection