@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/register-form.css') }}">
<style>
/* Animation pour les erreurs */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.error-shake { animation: shake 0.5s ease-in-out; }

.user-type-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}

.user-type-option {
    flex: 1;
    padding: 1.25rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: white;
    position: relative;
    overflow: hidden;
}

.user-type-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.user-type-option:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.user-type-option[data-type="client"]:hover::before,
.user-type-option[data-type="client"].selected::before {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
}

.user-type-option[data-type="prestataire"]:hover::before,
.user-type-option[data-type="prestataire"].selected::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.user-type-option[data-type="client"].selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.user-type-option[data-type="prestataire"].selected {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.2);
}

.user-type-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.user-type-option[data-type="client"] .user-type-icon {
    color: #3b82f6;
}

.user-type-option[data-type="prestataire"] .user-type-icon {
    color: #f59e0b;
}

.user-type-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1f2937;
}

.user-type-description {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

.form-section {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.form-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Profile picture styles */
.profile-picture-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed #d1d5db;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-picture-preview:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
}

.profile-picture-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Styles pour les sections d'importation de photo de profil */
.file-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-control-file {
    width: 100%;
    padding: 0.75rem;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    color: #6b7280;
}

.form-control-file:hover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.form-control-file:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.file-name-display {
    padding: 0.5rem;
    background-color: #f3f4f6;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
}

.file-name-display:empty::before {
    content: "Aucun fichier sélectionné";
    color: #9ca3af;
    font-style: italic;
}

.file-input-wrapper .form-control-file::-webkit-file-upload-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    margin-right: 0.75rem;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.file-input-wrapper .form-control-file::-webkit-file-upload-button:hover {
    background: #2563eb;
}

.file-input-wrapper .form-control-file::file-selector-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    margin-right: 0.75rem;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.file-input-wrapper .form-control-file::file-selector-button:hover {
    background: #2563eb;
}

/* Profile picture styles */
.profile-picture-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-picture-preview {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-picture-preview:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.profile-picture-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-placeholder {
    font-size: 2rem;
    color: #9ca3af;
}

.profile-picture-text {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
}

.profile-picture-text strong {
    color: #3b82f6;
    text-decoration: underline;
}

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.375rem;
}

.form-group {
    margin-bottom: 1rem;
}

/* Custom styles for consistent button styling */
.submit-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
}

.submit-button:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(59, 130, 246, 0.3);
}

.submit-button:disabled {
    background-color: #93c5fd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.section-header {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid #e2e8f0;
}

.register-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.register-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.reassurance-banner {
    background-color: #dcfce7;
    color: #166534;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.login-link {
    text-align: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.8125rem;
    color: #6b7280;
}

.login-link a {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 500;
}

.login-link a:hover {
    color: #2563eb;
}

.error-container {
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.error-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.error-list li {
    margin-bottom: 0.25rem;
}

.error-list li:last-child {
    margin-bottom: 0;
}

/* Password visibility toggle styles */
.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6b7280;
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
}

.toggle-password:hover {
    color: #3b82f6;
}

.form-control {
    padding-right: 2.5rem;
}

/* Password requirements styles */
.password-requirements {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-top: 0.5rem;
}

.password-requirements h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.375rem;
}

.password-requirements ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    color: #475569;
}

.password-requirements li {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    padding: 0.125rem 0;
}

.password-requirements li:last-child {
    margin-bottom: 0;
}

.password-requirements .requirement-icon {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.password-requirements .requirement-met {
    color: #10b981;
    font-weight: 500;
}

.password-requirements .requirement-not-met {
    color: #94a3b8;
}

/* Autocomplete styles */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.2);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #334155;
    transition: all 0.15s ease;
}

.autocomplete-item:hover {
    background: linear-gradient(90deg, rgba(37,99,235,0.1), rgba(139,92,246,0.08));
    border-left: 3px solid #3b82f6;
    padding-left: 13px;
}

.autocomplete-item:last-child {
    border-bottom: none;
    border-radius: 0 0 0.625rem 0.625rem;
}

/* Modern UI overrides */
:root {
    --reg-bg-1: #0f172a;
    --reg-bg-2: #111827;
    --reg-accent: #2563eb;
    --reg-accent-2: #8b5cf6;
    --reg-card: rgba(255,255,255,0.94);
}

body, body.font-sans, .bg-slate-50 {
    background: radial-gradient(circle at 20% 20%, rgba(139,92,246,0.10), transparent 35%),
                radial-gradient(circle at 80% 30%, rgba(37,99,235,0.12), transparent 40%),
                radial-gradient(circle at 40% 80%, rgba(16,185,129,0.10), transparent 35%),
                linear-gradient(135deg, var(--reg-bg-1), var(--reg-bg-2)) !important;
}

.register-container {
    background: radial-gradient(circle at 20% 20%, rgba(139,92,246,0.10), transparent 35%),
                radial-gradient(circle at 80% 30%, rgba(37,99,235,0.12), transparent 40%),
                radial-gradient(circle at 40% 80%, rgba(16,185,129,0.10), transparent 35%),
                linear-gradient(135deg, var(--reg-bg-1), var(--reg-bg-2));
}

.register-title {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    font-weight: 800;
    color: #0f172a;
}

.register-subtitle {
    color: #475569;
    font-size: 1rem;
}

.auth-card {
    background: var(--reg-card);
    backdrop-filter: blur(6px);
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(255,255,255,0.6);
}

.user-type-option {
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: #e2e8f0;
}

.user-type-option.selected {
    border-color: var(--reg-accent);
    background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(139,92,246,0.06));
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.15);
}

.form-control, .form-select, .form-control-file, textarea.form-control {
    border: 2px solid #e2e8f0;
    border-radius: 0.625rem;
    background: #ffffff;
    transition: all 0.2s ease;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.form-control:focus, .form-select:focus, .form-control-file:focus, textarea.form-control:focus {
    border-color: var(--reg-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    background: #ffffff;
    outline: none;
}

.btn-primary {
    background: linear-gradient(90deg, var(--reg-accent), var(--reg-accent-2));
    border: none;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.30);
}

.btn-primary:active {
    transform: translateY(0);
}
</style>
@endpush

@section('content')
@if(config('recaptcha.enabled') && config('recaptcha.site_key'))
    @push('scripts')
        <script src="https://www.google.com/recaptcha/api.js?render={{ config('recaptcha.site_key') }}"></script>
    @endpush
@endif
@php
    $socialData = session('social_register', []);
    // Données pré-remplies depuis Google (via session ou paramètres GET)
    $prefillName = request('prefill_name', session('prefill_name', ''));
    $prefillEmail = request('prefill_email', session('prefill_email', ''));
    // Pré-sélection du type (client ou prestataire)
    $selectPrestataire = request('select_prestataire', '0') === '1';
@endphp
<div class="register-container min-h-screen flex items-center justify-center py-6 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl w-full rounded-2xl auth-card overflow-hidden">
        <!-- Register form -->
        <div class="p-6 sm:p-8 md:p-10 lg:p-12">
                <!-- En-tête accueillant -->
                <div class="text-center mb-6">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg mb-4">
                        <i class="fas fa-user-plus text-white text-2xl"></i>
                    </div>
                    <h2 class="register-title text-2xl sm:text-3xl">
                        Bienvenue sur TaPrestation ! 🎉
                    </h2>
                    <p class="register-subtitle text-base mt-2">
                        Créez votre compte en quelques minutes et accédez à des milliers de services
                    </p>
                </div>

                <!-- Bannière de réassurance -->
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4 mb-6">
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-shield-alt text-green-600"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-green-800 text-sm">Inscription 100% gratuite et sécurisée</h4>
                            <p class="text-green-700 text-xs mt-1">Vos données sont protégées et ne seront jamais partagées sans votre accord.</p>
                        </div>
                    </div>
                </div>

                @if(session('info'))
                    <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg mb-4">
                        <i class="fas fa-info-circle mr-2"></i>{{ session('info') }}
                    </div>
                @endif

                @if(session('warning'))
                    <div class="bg-amber-50 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg mb-4">
                        <i class="fas fa-exclamation-triangle mr-2"></i>{{ session('warning') }}
                    </div>
                @endif

                @if(session('error'))
                    <div class="bg-red-50 border border-red-300 text-red-700 px-4 py-3 rounded-lg mb-4">
                        <i class="fas fa-times-circle mr-2"></i>{{ session('error') }}
                    </div>
                @endif

                {{-- Affichage visible de TOUTES les erreurs de validation --}}
                @if ($errors->any())
                    <div class="bg-red-50 border-2 border-red-400 text-red-700 px-4 py-4 rounded-xl mb-6 shadow-sm">
                        <div class="flex items-center mb-3">
                            <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
                            <span class="font-bold text-lg">Erreur d'inscription</span>
                        </div>
                        <p class="text-sm text-red-600 mb-2">Veuillez corriger les erreurs suivantes :</p>
                        <ul class="list-disc list-inside text-sm space-y-1 ml-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Sélecteur de type d'utilisateur - Design amélioré -->
                <div class="mb-6">
                    <p class="text-center text-gray-600 text-sm mb-3 font-medium">👋 Je suis...</p>
                    <div class="user-type-selector">
                        <div class="user-type-option" data-type="client">
                            <div class="user-type-icon">
                                <i class="fas fa-user text-blue-500"></i>
                            </div>
                            <div class="user-type-title">Client</div>
                            <div class="user-type-description">Je recherche des professionnels pour mes projets</div>
                            <div class="mt-2 text-xs text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity">
                                <i class="fas fa-check-circle mr-1"></i>Gratuit
                            </div>
                        </div>

                        <div class="user-type-option" data-type="prestataire">
                            <div class="user-type-icon">
                                <i class="fas fa-briefcase text-amber-500"></i>
                            </div>
                            <div class="user-type-title">Prestataire</div>
                            <div class="user-type-description">Je propose mes services professionnels aux clients</div>
                            <div class="mt-2 text-xs text-amber-600 opacity-0 group-hover:opacity-100 transition-opacity">
                                <i class="fas fa-star mr-1"></i>Visibilité garantie
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Formulaire Client -->
                <div id="client-form" class="form-section">
                    @if(empty($socialData))
                    <!-- Bouton Google pour Client -->
                    <div class="mb-6">
                        <div class="text-center text-sm text-gray-500 mb-3">Inscription rapide</div>
                        <div class="flex justify-center">
                            <a href="{{ route('social.login', ['provider' => 'google', 'role' => 'client']) }}" class="flex items-center justify-center gap-2 py-3 px-8 bg-white border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 hover:shadow-md transition-all">
                                <svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
                                <span class="text-sm font-medium text-gray-700">Continuer avec Google</span>
                            </a>
                        </div>
                        <div class="relative my-5">
                            <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-200"></div></div>
                            <div class="relative flex justify-center text-xs"><span class="bg-white px-3 text-gray-400">ou remplir le formulaire</span></div>
                        </div>
                    </div>
                    @endif

                    <form id="client-form-element" class="mt-8 space-y-6" action="{{ route('register') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="user_type" value="client">
                        <input type="hidden" name="recaptcha_token" value="">
                        <input type="hidden" name="_form_start" value="{{ time() }}">
                        {{-- Honeypot anti-bot (invisible pour les vrais utilisateurs) --}}
                        <div style="position:absolute;left:-9999px;" aria-hidden="true">
                            <input type="text" name="website_url" tabindex="-1" autocomplete="off">
                        </div>
                        <input type="hidden" name="behavior_clicks" value="">
                        <input type="hidden" name="behavior_keypresses" value="">
                        <input type="hidden" name="behavior_time_ms" value="">
                        @if(!empty($socialData))
                            <input type="hidden" name="social_provider" value="{{ $socialData['provider'] ?? '' }}">
                            <input type="hidden" name="social_id" value="{{ $socialData['provider_id'] ?? '' }}">
                        @endif

                        <!-- Étape 1: Photo de profil (optionnelle) -->
                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-5 border border-blue-100 mb-6">
                            <div class="flex items-center gap-2 mb-3">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-bold rounded-full">1</span>
                                <h4 class="font-semibold text-gray-800">Photo de profil</h4>
                                <span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">Optionnel</span>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="profile-picture-preview cursor-pointer hover:opacity-80 transition-opacity" id="clientProfilePicturePreview">
                                    @if(!empty($socialData['avatar']))
                                        <img src="{{ $socialData['avatar'] }}" alt="Photo de profil" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
                                    @else
                                        <div class="profile-picture-placeholder">
                                            <i class="fas fa-camera text-gray-400 text-xl"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700" id="clientProfilePictureText">Cliquez sur le cercle pour ajouter une photo</p>
                                    <p class="text-xs text-gray-500 mt-1"><i class="fas fa-info-circle mr-1"></i>Une photo augmente vos chances d'être contacté de 40%</p>
                                </div>
                            </div>
                            <input type="file" id="client_profile_photo" name="client_profile_photo" class="form-control-file" accept="image/*" style="display: none;">
                        </div>

                        <!-- Étape 2: Informations de connexion -->
                        <div class="mb-8">
                            <div class="flex items-center gap-2 mb-4">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-bold rounded-full">2</span>
                                <h3 class="section-header border-0 pb-0 mb-0">Informations de connexion</h3>
                            </div>
                            <p class="text-xs text-gray-500 mb-4"><i class="fas fa-lock mr-1"></i>Ces informations serviront à vous connecter à votre compte</p>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="client_name" class="form-label">Nom complet *</label>
                                    <input id="client_name" name="name" type="text" autocomplete="name" required value="{{ old('name', $socialData['name'] ?? $prefillName ?? '') }}" class="form-control" placeholder="Ex: Jean Dupont">
                                    <p class="text-xs text-gray-400 mt-1">Votre nom tel qu'il apparaîtra sur votre profil</p>
                                </div>

                                <div class="form-group">
                                    <label for="client_email" class="form-label">E-mail *</label>
                                    <input id="client_email" name="email" type="email" autocomplete="email" required value="{{ old('email', $socialData['email'] ?? $prefillEmail ?? '') }}" class="form-control" placeholder="votre@email.com" {{ !empty($socialData['email']) ? 'readonly' : '' }}>
                                    @if(!empty($socialData['email']))
                                        <p class="text-xs text-green-600 mt-1"><i class="fas fa-check-circle mr-1"></i>Email vérifié via {{ ucfirst($socialData['provider'] ?? '') }} - Pas besoin de confirmation</p>
                                    @else
                                        <p class="text-xs text-gray-400 mt-1"><i class="fas fa-envelope mr-1"></i>Un email de confirmation vous sera envoyé</p>
                                    @endif
                                    <!-- Checkbox visibilité email -->
                                    <label class="flex items-center gap-2 mt-2 cursor-pointer">
                                        <input type="checkbox" name="email_visible" value="1" {{ old('email_visible') ? 'checked' : '' }} class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-xs text-gray-600"><i class="fas fa-eye mr-1"></i>Rendre mon email visible aux prestataires après un premier échange</span>
                                    </label>
                                </div>

                                @if(empty($socialData))
                                <!-- Mot de passe requis si pas Google -->
                                <div class="form-group">
                                    <label for="client_password" class="form-label">Mot de passe *</label>
                                    <div class="password-container">
                                        <input id="client_password" name="password" type="password" autocomplete="new-password" required class="form-control" placeholder="Minimum 8 caractères">
                                        <button type="button" class="toggle-password" data-target="client_password">
                                            <i class="fas fa-eye text-gray-500 hover:text-gray-700"></i>
                                        </button>
                                    </div>
                                    <div class="password-requirements">
                                        <h4>Le mot de passe doit contenir :</h4>
                                        <ul>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins 8 caractères</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins une lettre majuscule</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins une lettre minuscule</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins un chiffre</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="form-group" id="client_password_confirm_group">
                                    <label for="client_password_confirmation" class="form-label">Confirmer le mot de passe *</label>
                                    <div class="password-container">
                                        <input id="client_password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required class="form-control" placeholder="Confirmez votre mot de passe">
                                        <button type="button" class="toggle-password" data-target="client_password_confirmation">
                                            <i class="fas fa-eye text-gray-500 hover:text-gray-700"></i>
                                        </button>
                                    </div>
                                </div>
                                @else
                                <!-- Inscription via Google - pas besoin de mot de passe -->
                                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                            <i class="fab fa-google text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-blue-800 text-sm">Connexion via {{ ucfirst($socialData['provider'] ?? 'Google') }}</h4>
                                            <p class="text-blue-700 text-xs mt-1">
                                                <i class="fas fa-check-circle mr-1"></i>Vous vous connecterez avec votre compte {{ ucfirst($socialData['provider'] ?? 'Google') }}.<br>
                                                <i class="fas fa-info-circle mr-1"></i>Vous pourrez ajouter un mot de passe plus tard dans vos paramètres de profil si vous le souhaitez.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="password" value="">
                                <input type="hidden" name="password_confirmation" value="">
                                @endif
                            </div>
                        </div>

                        <!-- Étape 3: Informations personnelles -->
                        <div class="mb-6">
                            <div class="flex items-center gap-2 mb-4">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-bold rounded-full">3</span>
                                <h3 class="section-header border-0 pb-0 mb-0">Informations personnelles</h3>
                            </div>
                            <p class="text-xs text-gray-500 mb-4"><i class="fas fa-phone mr-1"></i>Pour vous contacter concernant vos demandes</p>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="client_phone" class="form-label">Téléphone *</label>
                                    <input id="client_phone" name="phone" type="tel" required value="{{ old('phone') }}" class="form-control" placeholder="Ex: 06 12 34 56 78">
                                    <p class="text-xs text-gray-400 mt-1">Numéro utilisé pour les notifications importantes</p>
                                    <!-- Checkbox visibilité téléphone -->
                                    <label class="flex items-center gap-2 mt-2 cursor-pointer">
                                        <input type="checkbox" name="phone_visible" value="1" {{ old('phone_visible') ? 'checked' : '' }} class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-xs text-gray-600"><i class="fas fa-eye mr-1"></i>Rendre mon téléphone visible aux prestataires après un premier échange</span>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <label for="client_location" class="form-label">Ville / Adresse *</label>
                                    <input type="text" id="client_location" name="location" value="{{ old('location') }}" class="form-control" placeholder="Ex: Paris, 75001" required autocomplete="off">
                                    <div class="mt-2">
                                        <button type="button" id="client_geoloc_btn" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-blue-100 text-gray-700 hover:text-blue-700 text-sm font-medium rounded-lg border border-gray-300 hover:border-blue-400 transition-all">
                                            <i class="fas fa-location-arrow"></i>
                                            <span>Utiliser ma position actuelle</span>
                                        </button>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-2">Pour vous proposer des prestataires proches de chez vous</p>
                                    <input type="hidden" id="client_latitude" name="latitude">
                                    <input type="hidden" id="client_longitude" name="longitude">
                                </div>
                            </div>
                        </div>

                        <!-- Bouton d'inscription -->
                        <div class="form-group mt-8">
                            <button type="submit" class="submit-button bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 py-4 text-base rounded-xl shadow-lg hover:shadow-xl transition-all">
                                <i class="fas fa-user-plus mr-2"></i>
                                <span class="button-text">Créer mon compte Client</span>
                                <span class="button-loader"></span>
                            </button>
                            <p class="text-xs text-gray-500 text-center mt-3">
                                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                                En vous inscrivant, vous acceptez nos <a href="{{ route('cgu') }}" class="text-blue-600 hover:underline">CGU</a> et notre <a href="{{ route('privacy') }}" class="text-blue-600 hover:underline">politique de confidentialité</a>
                            </p>
                        </div>
                    </form>
                </div>

                <!-- Formulaire Prestataire -->
                <div id="prestataire-form" class="form-section">
                    @if(empty($socialData))
                    <!-- Bouton Google pour Prestataire -->
                    <div class="mb-6">
                        <div class="text-center text-sm text-gray-500 mb-3">Inscription rapide</div>
                        <div class="flex justify-center">
                            <a href="{{ route('social.login', ['provider' => 'google', 'role' => 'prestataire']) }}" class="flex items-center justify-center gap-2 py-3 px-8 bg-white border-2 border-gray-200 rounded-xl hover:border-amber-400 hover:bg-amber-50 hover:shadow-md transition-all">
                                <svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
                                <span class="text-sm font-medium text-gray-700">Continuer avec Google</span>
                            </a>
                        </div>
                        <div class="relative my-5">
                            <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-200"></div></div>
                            <div class="relative flex justify-center text-xs"><span class="bg-white px-3 text-gray-400">ou remplir le formulaire</span></div>
                        </div>
                    </div>
                    @endif

                    <form id="prestataire-form-element" class="mt-8 space-y-6" action="{{ route('register') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="user_type" value="prestataire">
                        <input type="hidden" name="recaptcha_token" value="">
                        <input type="hidden" name="_form_start" value="{{ time() }}">
                        {{-- Honeypot anti-bot (invisible pour les vrais utilisateurs) --}}
                        <div style="position:absolute;left:-9999px;" aria-hidden="true">
                            <input type="text" name="company_website" tabindex="-1" autocomplete="off">
                        </div>
                        <input type="hidden" name="behavior_clicks" value="">
                        <input type="hidden" name="behavior_keypresses" value="">
                        <input type="hidden" name="behavior_time_ms" value="">
                        @if(!empty($socialData))
                            <input type="hidden" name="social_provider" value="{{ $socialData['provider'] ?? '' }}">
                            <input type="hidden" name="social_id" value="{{ $socialData['provider_id'] ?? '' }}">
                        @endif

                        <!-- Étape 1: Photo de profil (optionnelle mais recommandée) -->
                        <div class="bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl p-5 border border-amber-200 mb-6">
                            <div class="flex items-center gap-2 mb-3">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-amber-500 text-white text-xs font-bold rounded-full">1</span>
                                <h4 class="font-semibold text-gray-800">Photo de profil professionnel</h4>
                                <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">Recommandé</span>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="profile-picture-preview cursor-pointer hover:opacity-80 transition-opacity" id="prestataireProfilePicturePreview">
                                    @if(!empty($socialData['avatar']))
                                        <img src="{{ $socialData['avatar'] }}" alt="Photo de profil" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
                                    @else
                                        <div class="profile-picture-placeholder">
                                            <i class="fas fa-camera text-gray-400 text-xl"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-700" id="prestataireProfilePictureText">Cliquez sur le cercle pour ajouter une photo</p>
                                    <p class="text-xs text-gray-500 mt-1"><i class="fas fa-lightbulb text-amber-500 mr-1"></i>Les prestataires avec photo reçoivent 3x plus de demandes !</p>
                                </div>
                            </div>
                            <input type="file" id="prestataire_profile_photo" name="prestataire_profile_photo" class="form-control-file" accept="image/*" style="display: none;">
                        </div>

                        <!-- Étape 2: Informations de connexion -->
                        <div class="mb-8">
                            <div class="flex items-center gap-2 mb-4">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-amber-500 text-white text-xs font-bold rounded-full">2</span>
                                <h3 class="section-header border-0 pb-0 mb-0">Informations de connexion</h3>
                            </div>
                            <p class="text-xs text-gray-500 mb-4"><i class="fas fa-lock mr-1"></i>Ces informations serviront à vous connecter à votre espace professionnel</p>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="prestataire_name" class="form-label">Identifiant / Nom *</label>
                                    <input id="prestataire_name" name="name" type="text" autocomplete="name" required value="{{ old('name', $socialData['name'] ?? $prefillName ?? '') }}" class="form-control" placeholder="Ex: Jean Dupont ou MonEntreprise">
                                    <p class="text-xs text-gray-400 mt-1">Votre nom ou celui de votre entreprise</p>
                                </div>

                                <div class="form-group">
                                    <label for="prestataire_email" class="form-label">E-mail professionnel *</label>
                                    <input id="prestataire_email" name="email" type="email" autocomplete="email" required value="{{ old('email', $socialData['email'] ?? $prefillEmail ?? '') }}" class="form-control" placeholder="contact@entreprise.com" {{ !empty($socialData['email']) ? 'readonly' : '' }}>
                                    @if(!empty($socialData['email']))
                                        <p class="text-xs text-green-600 mt-1"><i class="fas fa-check-circle mr-1"></i>Email vérifié via {{ ucfirst($socialData['provider'] ?? '') }} - Pas besoin de confirmation</p>
                                    @else
                                        <p class="text-xs text-gray-400 mt-1"><i class="fas fa-envelope mr-1"></i>Un email de confirmation vous sera envoyé</p>
                                    @endif
                                    <!-- Checkbox visibilité email -->
                                    <label class="flex items-center gap-2 mt-2 cursor-pointer">
                                        <input type="checkbox" name="email_visible" value="1" {{ old('email_visible') ? 'checked' : '' }} class="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
                                        <span class="text-xs text-gray-600"><i class="fas fa-eye mr-1"></i>Rendre mon email visible aux clients après un premier échange</span>
                                    </label>
                                </div>

                                @if(empty($socialData))
                                <!-- Mot de passe requis si pas Google -->
                                <div class="form-group">
                                    <label for="prestataire_password" class="form-label">Mot de passe *</label>
                                    <div class="password-container">
                                        <input id="prestataire_password" name="password" type="password" autocomplete="new-password" required class="form-control" placeholder="Minimum 8 caractères">
                                        <button type="button" class="toggle-password" data-target="prestataire_password">
                                            <i class="fas fa-eye text-gray-500 hover:text-gray-700"></i>
                                        </button>
                                    </div>
                                    <div class="password-requirements">
                                        <h4>Le mot de passe doit contenir :</h4>
                                        <ul>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins 8 caractères</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins une lettre majuscule</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins une lettre minuscule</span>
                                            </li>
                                            <li>
                                                <span class="requirement-icon requirement-not-met">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                                <span>Au moins un chiffre</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="form-group" id="prestataire_password_confirm_group">
                                    <label for="prestataire_password_confirmation" class="form-label">Confirmer le mot de passe *</label>
                                    <div class="password-container">
                                        <input id="prestataire_password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required class="form-control" placeholder="Confirmez votre mot de passe">
                                        <button type="button" class="toggle-password" data-target="prestataire_password_confirmation">
                                            <i class="fas fa-eye text-gray-500 hover:text-gray-700"></i>
                                        </button>
                                    </div>
                                </div>
                                @else
                                <!-- Inscription via Google - pas besoin de mot de passe -->
                                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                                            <i class="fab fa-google text-amber-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-amber-800 text-sm">Connexion via {{ ucfirst($socialData['provider'] ?? 'Google') }}</h4>
                                            <p class="text-amber-700 text-xs mt-1">
                                                <i class="fas fa-check-circle mr-1"></i>Vous vous connecterez avec votre compte {{ ucfirst($socialData['provider'] ?? 'Google') }}.<br>
                                                <i class="fas fa-info-circle mr-1"></i>Vous pourrez ajouter un mot de passe plus tard dans vos paramètres de profil si vous le souhaitez.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="password" value="">
                                <input type="hidden" name="password_confirmation" value="">
                                @endif
                            </div>
                        </div>

                        <!-- Étape 3: Informations professionnelles -->
                        <div class="mb-6">
                            <div class="flex items-center gap-2 mb-4">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-amber-500 text-white text-xs font-bold rounded-full">3</span>
                                <h3 class="section-header border-0 pb-0 mb-0">Informations professionnelles</h3>
                            </div>
                            <p class="text-xs text-gray-500 mb-4"><i class="fas fa-store mr-1"></i>Ces informations seront visibles par les clients potentiels</p>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="company_name" class="form-label">Nom de l'enseigne / Entreprise *</label>
                                    <input id="company_name" name="company_name" type="text" required value="{{ old('company_name') }}" class="form-control" placeholder="Ex: Plomberie Martin, Studio Photo Lumière...">
                                    <p class="text-xs text-gray-400 mt-1">Le nom qui apparaîtra sur votre profil public</p>
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">Téléphone professionnel *</label>
                                    <input id="phone" name="phone" type="tel" required value="{{ old('phone') }}" class="form-control" placeholder="Ex: 06 12 34 56 78">
                                    <p class="text-xs text-gray-400 mt-1">Les clients pourront vous contacter sur ce numéro</p>
                                    <!-- Checkbox visibilité téléphone -->
                                    <label class="flex items-center gap-2 mt-2 cursor-pointer">
                                        <input type="checkbox" name="phone_visible" value="1" checked {{ old('phone_visible', true) ? 'checked' : '' }} class="w-4 h-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
                                        <span class="text-xs text-gray-600"><i class="fas fa-eye mr-1"></i>Rendre mon téléphone visible aux clients sur mon profil</span>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <label for="prestataire_location" class="form-label">Ville / Zone d'intervention *</label>
                                    <input type="text" id="prestataire_location" name="city" value="{{ old('city') }}" class="form-control" placeholder="Ex: Lyon, 69000" required autocomplete="off">
                                    <div class="mt-2">
                                        <button type="button" id="prestataire_geoloc_btn" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-amber-100 text-gray-700 hover:text-amber-700 text-sm font-medium rounded-lg border border-gray-300 hover:border-amber-400 transition-all">
                                            <i class="fas fa-location-arrow"></i>
                                            <span>Utiliser ma position actuelle</span>
                                        </button>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-2">Où exercez-vous votre activité ?</p>
                                    <input type="hidden" id="prestataire_latitude" name="latitude">
                                    <input type="hidden" id="prestataire_longitude" name="longitude">
                                </div>

                                <div class="form-group">
                                    <label for="description" class="form-label">Description de vos services</label>
                                    <textarea id="description" name="description" rows="3" class="form-control" placeholder="Ex: Plombier professionnel avec 10 ans d'expérience. Interventions rapides pour fuites, débouchages, installations...">{{ old('description') }}</textarea>
                                    <p class="text-xs text-gray-400 mt-1">Décrivez vos compétences et ce qui vous différencie (optionnel, modifiable plus tard)</p>
                                </div>

                                <!-- Catégories avec icône -->
                                <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                                    <div class="flex items-center gap-2 mb-3">
                                        <i class="fas fa-tags text-amber-500"></i>
                                        <span class="font-medium text-gray-700">Votre domaine d'activité</span>
                                    </div>
                                    
                                    <div class="form-group mb-4">
                                        <label for="category_id" class="form-label">Catégorie principale *</label>
                                        <select id="category_id" name="category_id" class="form-control" required>
                                            <option value="">Sélectionnez une catégorie</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="subcategory_id" class="form-label">Sous-catégorie / Spécialité *</label>
                                        <select id="subcategory_id" name="subcategory_id" class="form-control" required>
                                            <option value="">Sélectionnez d'abord une catégorie</option>
                                        </select>
                                        <p class="text-xs text-gray-400 mt-1">Vous pourrez ajouter d'autres spécialités plus tard</p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="portfolio_url" class="form-label">
                                        <i class="fas fa-globe text-gray-400 mr-1"></i>
                                        Site web ou portfolio
                                        <span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full ml-2">Optionnel</span>
                                    </label>
                                    <input id="portfolio_url" name="portfolio_url" type="url" value="{{ old('portfolio_url') }}" class="form-control" placeholder="https://votre-site.com">
                                    <p class="text-xs text-gray-400 mt-1">Montrez vos réalisations aux clients potentiels</p>
                                </div>
                            </div>
                        </div>

                        <!-- Bouton d'inscription Prestataire -->
                        <div class="form-group mt-8">
                            <button type="submit" class="submit-button bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 py-4 text-base rounded-xl shadow-lg hover:shadow-xl transition-all">
                                <i class="fas fa-briefcase mr-2"></i>
                                <span class="button-text">Créer mon compte Prestataire</span>
                                <span class="button-loader"></span>
                            </button>
                            <p class="text-xs text-gray-500 text-center mt-3">
                                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                                En vous inscrivant, vous acceptez nos <a href="{{ route('cgu') }}" class="text-amber-600 hover:underline">CGU</a> et notre <a href="{{ route('privacy') }}" class="text-amber-600 hover:underline">politique de confidentialité</a>
                            </p>
                        </div>
                    </form>
                </div>

                <!-- Lien de connexion -->
                <div class="login-link bg-gray-50 rounded-xl p-4 mt-6">
                    <p class="text-center">
                        <span class="text-gray-600">Vous avez déjà un compte ?</span>
                        <a href="{{ route('login') }}" class="text-blue-600 font-semibold hover:underline ml-1">
                            <i class="fas fa-sign-in-alt mr-1"></i>Connectez-vous
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Variables pour le formulaire
    const hasErrors = {{ $errors->any() ? 'true' : 'false' }};
    const userTypeOptions = document.querySelectorAll('.user-type-option');
    const clientFormWrapper = document.getElementById('client-form');
    const prestataireFormWrapper = document.getElementById('prestataire-form');
    
    const recaptchaEnabled = {{ config('recaptcha.enabled') && config('recaptcha.site_key') ? 'true' : 'false' }};
    const recaptchaSiteKey = "{{ config('recaptcha.site_key') }}";

    const behavior = {
        startedAt: Date.now(),
        clicks: 0,
        keypresses: 0,
    };

    document.addEventListener('click', function () { behavior.clicks += 1; }, true);
    document.addEventListener('keydown', function () { behavior.keypresses += 1; }, true);

    function fillBehavior(form) {
        const timeMs = Math.max(0, Date.now() - behavior.startedAt);
        const clicksInput = form.querySelector('input[name="behavior_clicks"]');
        const keysInput = form.querySelector('input[name="behavior_keypresses"]');
        const timeInput = form.querySelector('input[name="behavior_time_ms"]');
        if (clicksInput) clicksInput.value = String(behavior.clicks);
        if (keysInput) keysInput.value = String(behavior.keypresses);
        if (timeInput) timeInput.value = String(timeMs);
    }
    // Les variables sont maintenant définies plus haut
    const clientForm = document.getElementById('client-form-element');
    const prestataireForm = document.getElementById('prestataire-form-element');

    const clientProfilePreview = document.getElementById('clientProfilePicturePreview');
    const clientProfileInput = document.getElementById('client_profile_photo');
    const clientProfileText = document.getElementById('clientProfilePictureText');

    const prestataireProfilePreview = document.getElementById('prestataireProfilePicturePreview');
    const prestataireProfileInput = document.getElementById('prestataire_profile_photo');
    const prestataireProfileText = document.getElementById('prestataireProfilePictureText');

    const clientLocationInput = document.getElementById('client_location');
    const prestataireLocationInput = document.getElementById('prestataire_location');

    const initialUserType = "{{ old('user_type', request('select_prestataire') === '1' ? 'prestataire' : request('type', 'client')) }}";

    // Vérifier si on est en mode connexion sociale (au niveau global du script)
    const hasSocialData = {{ !empty($socialData) ? 'true' : 'false' }};

    function disableFormFields(wrapper) {
        if (!wrapper) return;
        const elements = wrapper.querySelectorAll('input, select, textarea, button');
        elements.forEach(el => {
            if (el.name !== '_token') {
                el.disabled = true;
                el.removeAttribute('required');
            }
        });
    }

    function enableFormFields(wrapper, type) {
        if (!wrapper) return;
        const elements = wrapper.querySelectorAll('input, select, textarea, button');
        elements.forEach(el => {
            if (el.name === '_token') return;
            el.disabled = false;

            if (type === 'client') {
                const requiredIds = [
                    'client_name',
                    'client_email',
                    'client_phone',
                    'client_location'
                ];
                // Le mot de passe n'est pas requis si connexion sociale
                if (!hasSocialData) {
                    requiredIds.push('client_password');
                    requiredIds.push('client_password_confirmation');
                }
                if (requiredIds.includes(el.id)) {
                    el.setAttribute('required', 'required');
                }
            }

            if (type === 'prestataire') {
                const requiredIds = [
                    'prestataire_name',
                    'prestataire_email',
                    'company_name',
                    'phone',
                    'prestataire_location',
                    'category_id',
                    'subcategory_id'
                    // Photo optionnelle - non requise
                ];
                // Le mot de passe n'est pas requis si connexion sociale
                if (!hasSocialData) {
                    requiredIds.push('prestataire_password');
                    requiredIds.push('prestataire_password_confirmation');
                }
                if (requiredIds.includes(el.id)) {
                    el.setAttribute('required', 'required');
                }
            }
        });
    }

    function updatePasswordRequirements(password, formType) {
        const passwordInputId = formType === 'client' ? 'client_password' : 'prestataire_password';
        const passwordInput = document.getElementById(passwordInputId);
        if (!passwordInput) return;

        const group = passwordInput.closest('.form-group');
        if (!group) return;

        const requirements = group.querySelector('.password-requirements');
        if (!requirements) return;

        const items = requirements.querySelectorAll('li');

        const checks = [
            password.length >= 8,
            /[A-Z]/.test(password),
            /[a-z]/.test(password),
            /[0-9]/.test(password)
        ];

        items.forEach((li, index) => {
            const iconSpan = li.querySelector('.requirement-icon');
            const icon = iconSpan ? iconSpan.querySelector('i') : null;
            const ok = checks[index];

            if (ok) {
                iconSpan.classList.add('requirement-met');
                iconSpan.classList.remove('requirement-not-met');
                if (icon) {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-check');
                }
            } else {
                iconSpan.classList.remove('requirement-met');
                iconSpan.classList.add('requirement-not-met');
                if (icon) {
                    icon.classList.remove('fa-check');
                    icon.classList.add('fa-times');
                }
            }
        });
    }

    function createAutocompleteDropdown(inputElement) {
        const existingDropdown = inputElement.parentNode.querySelector('.autocomplete-dropdown');
        if (existingDropdown) {
            existingDropdown.remove();
        }

        const dropdown = document.createElement('div');
        dropdown.className = 'autocomplete-dropdown';

        inputElement.parentNode.style.position = 'relative';
        inputElement.parentNode.appendChild(dropdown);

        return dropdown;
    }

    function displaySuggestions(suggestions, dropdown) {
        dropdown.innerHTML = '';

        suggestions.forEach(suggestion => {
            const item = document.createElement('div');
            item.className = 'autocomplete-item';
            item.textContent = suggestion.text || suggestion.city;

            item.addEventListener('click', function () {
                const input = dropdown.parentNode.querySelector('input');
                if (input) {
                    input.value = suggestion.text || suggestion.city;
                }
                dropdown.style.display = 'none';
            });

            dropdown.appendChild(item);
        });

        dropdown.style.display = suggestions.length ? 'block' : 'none';
    }

    let autocompleteTimeout = null;

    function fetchAutocompleteSuggestions(query, dropdown, inputId) {
        // Annuler la requête précédente
        if (autocompleteTimeout) {
            clearTimeout(autocompleteTimeout);
        }
        
        // Debounce de 300ms pour éviter trop de requêtes
        autocompleteTimeout = setTimeout(() => {
            // Afficher un indicateur de chargement
            dropdown.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; text-align: center;"><i class="fas fa-spinner fa-spin"></i> Recherche...</div>';
            dropdown.style.display = 'block';
            
            // Utiliser l'API gouvernementale française pour l'autocomplétion
            fetch(`https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(query)}&limit=6&autocomplete=1`)
                .then(response => response.json())
                .then(data => {
                    if (data.features && data.features.length > 0) {
                        const suggestions = data.features.map(f => ({
                            text: f.properties.label,
                            city: f.properties.city,
                            postcode: f.properties.postcode,
                            lat: f.geometry.coordinates[1],
                            lon: f.geometry.coordinates[0]
                        }));
                        displaySuggestionsWithCoords(suggestions, dropdown, inputId);
                    } else {
                        dropdown.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; text-align: center;">Aucun résultat trouvé</div>';
                    }
                })
                .catch(() => {
                    dropdown.style.display = 'none';
                });
        }, 300);
    }

    function displaySuggestionsWithCoords(suggestions, dropdown, inputId) {
        dropdown.innerHTML = '';

        suggestions.forEach(suggestion => {
            const item = document.createElement('div');
            item.className = 'autocomplete-item';
            // Afficher avec icône et mise en forme
            item.innerHTML = `
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span style="color: #3b82f6;">📍</span>
                    <div>
                        <div style="font-weight: 500; color: #1e293b;">${suggestion.text}</div>
                        ${suggestion.postcode ? `<div style="font-size: 0.75rem; color: #64748b;">${suggestion.postcode} ${suggestion.city || ''}</div>` : ''}
                    </div>
                </div>
            `;

            item.addEventListener('click', function () {
                const input = document.getElementById(inputId);
                if (input) {
                    input.value = suggestion.text;
                }
                // Stocker les coordonnées
                const prefix = inputId.includes('client') ? 'client' : 'prestataire';
                const latInput = document.getElementById(prefix + '_latitude');
                const lonInput = document.getElementById(prefix + '_longitude');
                if (latInput) latInput.value = suggestion.lat;
                if (lonInput) lonInput.value = suggestion.lon;
                dropdown.style.display = 'none';
            });

            dropdown.appendChild(item);
        });

        dropdown.style.display = suggestions.length ? 'block' : 'none';
    }

    // Géolocalisation
    function geolocateUser(inputId) {
        const input = document.getElementById(inputId);
        const prefix = inputId.includes('client') ? 'client' : 'prestataire';
        const btn = document.getElementById(prefix + '_geoloc_btn');
        
        if (!navigator.geolocation) {
            alert('La géolocalisation n\'est pas supportée par votre navigateur');
            return;
        }

        if (btn) {
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Localisation en cours...</span>';
            btn.disabled = true;
            btn.classList.add('opacity-70');
        }

        navigator.geolocation.getCurrentPosition(
            function(position) {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                
                // Reverse geocoding avec l'API gouvernementale
                fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${lon}&lat=${lat}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.features && data.features.length > 0) {
                            const addr = data.features[0].properties;
                            input.value = addr.label;
                            
                            const latInput = document.getElementById(prefix + '_latitude');
                            const lonInput = document.getElementById(prefix + '_longitude');
                            if (latInput) latInput.value = lat;
                            if (lonInput) lonInput.value = lon;
                        }
                        if (btn) {
                            btn.innerHTML = '<i class="fas fa-check text-green-600"></i><span>Position trouvée !</span>';
                            btn.classList.remove('opacity-70');
                            setTimeout(() => {
                                btn.innerHTML = '<i class="fas fa-location-arrow"></i><span>Utiliser ma position actuelle</span>';
                                btn.disabled = false;
                            }, 2000);
                        }
                    })
                    .catch(() => {
                        if (btn) {
                            btn.innerHTML = '<i class="fas fa-location-arrow"></i><span>Utiliser ma position actuelle</span>';
                            btn.disabled = false;
                            btn.classList.remove('opacity-70');
                        }
                    });
            },
            function(error) {
                if (btn) {
                    btn.innerHTML = '<i class="fas fa-location-arrow"></i><span>Utiliser ma position actuelle</span>';
                    btn.disabled = false;
                    btn.classList.remove('opacity-70');
                }
                if (error.code === 1) {
                    alert('Veuillez autoriser l\'accès à votre position');
                } else {
                    alert('Impossible d\'obtenir votre position');
                }
            },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    }

    // Boutons géolocalisation
    const clientGeolocBtn = document.getElementById('client_geoloc_btn');
    if (clientGeolocBtn) {
        clientGeolocBtn.addEventListener('click', () => geolocateUser('client_location'));
    }

    const prestataireGeolocBtn = document.getElementById('prestataire_geoloc_btn');
    if (prestataireGeolocBtn) {
        prestataireGeolocBtn.addEventListener('click', () => geolocateUser('prestataire_location'));
    }

    function refreshCSRFToken() {
        fetch('/csrf-token')
            .then(response => response.json())
            .then(data => {
                document.querySelectorAll('input[name="_token"]').forEach(input => {
                    input.value = data.csrf_token;
                });
                const metaTag = document.querySelector('meta[name="csrf-token"]');
                if (metaTag) {
                    metaTag.setAttribute('content', data.csrf_token);
                }
            })
            .catch(error => {
                console.error('Error refreshing CSRF token:', error);
            });
    }

    // Photo profil client
    if (clientProfilePreview && clientProfileInput) {
        clientProfilePreview.addEventListener('click', function () {
            clientProfileInput.click();
        });

        clientProfileInput.addEventListener('change', function () {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    clientProfilePreview.innerHTML = '';
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    clientProfilePreview.appendChild(img);
                    clientProfileText.innerHTML = '<strong>Photo sélectionnée</strong>';
                };
                reader.readAsDataURL(this.files[0]);
            }
        });
    }

    // Photo profil prestataire
    if (prestataireProfilePreview && prestataireProfileInput) {
        prestataireProfilePreview.addEventListener('click', function () {
            prestataireProfileInput.click();
        });

        prestataireProfileInput.addEventListener('change', function () {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    prestataireProfilePreview.innerHTML = '';
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    prestataireProfilePreview.appendChild(img);
                    prestataireProfileText.innerHTML = '<strong>Photo sélectionnée</strong>';
                };
                reader.readAsDataURL(this.files[0]);
            }
        });
    }

    // Catégories & sous-catégories
    function loadMainCategories() {
        const categorySelect = document.getElementById('category_id');
        if (!categorySelect) return;

        fetch('/api/categories/main')
            .then(response => response.json())
            .then(data => {
                const categories = data || [];
                categorySelect.innerHTML = '<option value="">Sélectionnez une catégorie</option>';
                categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    categorySelect.appendChild(option);
                });

                const oldCategoryId = "{{ old('category_id') }}";
                if (oldCategoryId) {
                    categorySelect.value = oldCategoryId;
                    categorySelect.dispatchEvent(new Event('change'));
                }
            })
            .catch(error => {
                console.error('Error loading categories:', error);
            });
    }

    const categorySelect = document.getElementById('category_id');
    const subcategorySelect = document.getElementById('subcategory_id');

    if (categorySelect && subcategorySelect) {
        categorySelect.addEventListener('change', function () {
            const categoryId = this.value;
            if (!categoryId) {
                subcategorySelect.innerHTML = '<option value="">Sélectionnez d\'abord une catégorie</option>';
                subcategorySelect.disabled = true;
                return;
            }

            fetch(`/api/categories/${categoryId}/subcategories`)
                .then(response => response.json())
                .then(data => {
                    const subcategories = data || [];
                    subcategorySelect.innerHTML = '<option value="">Sélectionnez une sous-catégorie</option>';
                    subcategories.forEach(subcategory => {
                        const option = document.createElement('option');
                        option.value = subcategory.id;
                        option.textContent = subcategory.name;
                        subcategorySelect.appendChild(option);
                    });
                    subcategorySelect.disabled = false;

                    const oldSubcategoryId = "{{ old('subcategory_id') }}";
                    if (oldSubcategoryId) {
                        subcategorySelect.value = oldSubcategoryId;
                    }
                })
                .catch(error => {
                    console.error('Error loading subcategories:', error);
                    subcategorySelect.innerHTML = '<option value="">Erreur de chargement</option>';
                    subcategorySelect.disabled = true;
                });
        });

        if (categorySelect.value) {
            setTimeout(() => {
                categorySelect.dispatchEvent(new Event('change'));
            }, 100);
        }
    }

    // Désactiver les deux formulaires au départ
    disableFormFields(clientFormWrapper);
    disableFormFields(prestataireFormWrapper);

    // Sélection type utilisateur
    userTypeOptions.forEach(option => {
        option.addEventListener('click', function () {
            userTypeOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');

            const type = this.dataset.type;

            clientFormWrapper.classList.remove('active');
            prestataireFormWrapper.classList.remove('active');
            disableFormFields(clientFormWrapper);
            disableFormFields(prestataireFormWrapper);

            if (type === 'client') {
                clientFormWrapper.classList.add('active');
                enableFormFields(clientFormWrapper, 'client');
                const hidden = clientFormWrapper.querySelector('input[name="user_type"]');
                if (hidden) hidden.value = 'client';
            } else {
                prestataireFormWrapper.classList.add('active');
                enableFormFields(prestataireFormWrapper, 'prestataire');
                const hidden = prestataireFormWrapper.querySelector('input[name="user_type"]');
                if (hidden) hidden.value = 'prestataire';
                loadMainCategories();
            }
        });
    });

    // Sélection initiale selon old()/query
    if (initialUserType === 'client' || initialUserType === 'prestataire') {
        const defaultOption = document.querySelector(`.user-type-option[data-type="${initialUserType}"]`);
        if (defaultOption) defaultOption.click();
    }
    
    // Scroll automatique vers les erreurs APRÈS affichage du formulaire
    if (hasErrors) {
        setTimeout(() => {
            const errorBox = document.querySelector('.bg-red-50.border-2');
            if (errorBox) {
                errorBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
                errorBox.style.animation = 'shake 0.5s ease-in-out';
            }
        }, 200);
    }

    // Validation type cohérent au submit + loader bouton
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function (e) {
            const selectedOption = document.querySelector('.user-type-option.selected');
            const submitButton = form.querySelector('button[type="submit"]');

            if (!selectedOption) {
                e.preventDefault();
                alert('Veuillez sélectionner un type de compte (Client ou Prestataire) avant de continuer.');
                return false;
            }

            const selectedType = selectedOption.dataset.type;
            const currentFormType = form.id === 'client-form-element' ? 'client' : 'prestataire';

            if (selectedType !== currentFormType) {
                e.preventDefault();
                return false;
            }

            fillBehavior(form);

            if (recaptchaEnabled) {
                const tokenInput = form.querySelector('input[name="recaptcha_token"]');
                if (tokenInput && !tokenInput.value) {
                    e.preventDefault();

                    if (!window.grecaptcha || !recaptchaSiteKey) {
                        alert('reCAPTCHA indisponible. Veuillez recharger la page.');
                        return false;
                    }

                    window.grecaptcha.ready(() => {
                        window.grecaptcha.execute(recaptchaSiteKey, { action: 'register' })
                            .then((token) => {
                                tokenInput.value = token;
                                form.submit();
                            })
                            .catch(() => {
                                alert('Impossible de vérifier reCAPTCHA. Veuillez réessayer.');
                            });
                    });

                    return false;
                }
            }

            if (submitButton) {
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Inscription en cours...';

                setTimeout(() => {
                    submitButton.disabled = false;
                    if (currentFormType === 'client') {
                        submitButton.innerHTML = 'S\'inscrire en tant que Client';
                    } else {
                        submitButton.innerHTML = 'S\'inscrire en tant que Prestataire';
                    }
                }, 10000);
            }

            return true;
        });
    });

    // Password requirements live
    const passwordInputs = document.querySelectorAll('input[type="password"]');
    passwordInputs.forEach(input => {
        input.addEventListener('input', function () {
            const password = this.value;
            const formType = this.id.includes('client') ? 'client' : 'prestataire';
            updatePasswordRequirements(password, formType);
        });

        // Init au chargement si old() renvoie déjà quelque chose
        if (input.value) {
            const formType = input.id.includes('client') ? 'client' : 'prestataire';
            updatePasswordRequirements(input.value, formType);
        }
    });

    // Autocomplétion adresses
    if (clientLocationInput) {
        const clientDropdown = createAutocompleteDropdown(clientLocationInput);

        clientLocationInput.addEventListener('input', function () {
            const query = this.value.trim();
            if (query.length >= 3) {
                fetchAutocompleteSuggestions(query, clientDropdown, 'client_location');
            } else {
                clientDropdown.style.display = 'none';
            }
        });
        
        // Fermer au focus out
        clientLocationInput.addEventListener('blur', function() {
            setTimeout(() => clientDropdown.style.display = 'none', 200);
        });

        document.addEventListener('click', function (e) {
            if (!clientLocationInput.contains(e.target) && !clientDropdown.contains(e.target)) {
                clientDropdown.style.display = 'none';
            }
        });
    }

    if (prestataireLocationInput) {
        const prestataireDropdown = createAutocompleteDropdown(prestataireLocationInput);

        prestataireLocationInput.addEventListener('input', function () {
            const query = this.value.trim();
            if (query.length >= 3) {
                fetchAutocompleteSuggestions(query, prestataireDropdown, 'prestataire_location');
            } else {
                prestataireDropdown.style.display = 'none';
            }
        });
        
        // Fermer au focus out
        prestataireLocationInput.addEventListener('blur', function() {
            setTimeout(() => prestataireDropdown.style.display = 'none', 200);
        });

        document.addEventListener('click', function (e) {
            if (!prestataireLocationInput.contains(e.target) && !prestataireDropdown.contains(e.target)) {
                prestataireDropdown.style.display = 'none';
            }
        });
    }

    // CSRF auto-refresh
    setInterval(refreshCSRFToken, 30 * 60 * 1000);
    document.addEventListener('visibilitychange', function () {
        if (!document.hidden) {
            refreshCSRFToken();
        }
    });

    // Reset state des boutons submit
    document.querySelectorAll('button[type="submit"]').forEach(button => {
        button.setAttribute('data-original-text', button.innerHTML);
        button.disabled = false;
    });

    // Toggle visibilité mot de passe
    const togglePasswordButtons = document.querySelectorAll('.toggle-password');
    togglePasswordButtons.forEach(button => {
        button.addEventListener('click', function () {
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            const icon = this.querySelector('i');

            if (!passwordInput) return;

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
});
</script>
@endsection