@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/register-form.css') }}">
<style>
.user-type-selector {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

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

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

.user-type-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.user-type-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: #6b7280;
}

.user-type-option.selected .user-type-icon {
    color: #3b82f6;
}

.user-type-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
    color: #1f2937;
}

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

.form-section {
    display: none;
}

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

/* 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')
@php
    $socialData = session('social_register', []);
@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">
                <div>
                    <h2 class="register-title">
                        Créer votre compte
                    </h2>
                    <p class="register-subtitle">
                        Rejoignez TaPrestation en tant que client ou prestataire
                    </p>
                </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 ($errors->any())
                    <div class="error-container">
                        <ul class="error-list">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Boutons de connexion rapide -->
                <div class="mb-6">
                    <div class="text-center text-sm text-gray-500 mb-3">Inscription rapide avec</div>
                    <div class="grid grid-cols-2 gap-3">
                        <a href="{{ route('social.login', ['provider' => 'google', 'role' => 'client']) }}" class="flex items-center justify-center gap-2 py-2.5 px-4 border-2 border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 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">Google</span>
                        </a>
                        <a href="{{ route('social.login', ['provider' => 'apple', 'role' => 'client']) }}" class="flex items-center justify-center gap-2 py-2.5 px-4 border-2 border-gray-200 rounded-lg hover:border-gray-400 hover:bg-gray-50 transition-all">
                            <i class="fab fa-apple text-xl text-black"></i>
                            <span class="text-sm font-medium text-gray-700">Apple</span>
                        </a>
                    </div>
                    <div class="relative my-4">
                        <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 avec email</span></div>
                    </div>
                </div>

                <!-- Sélecteur de type d'utilisateur -->
                <div class="user-type-selector">
                    <div class="user-type-option" data-type="client">
                        <div class="user-type-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="user-type-title">Client</div>
                        <div class="user-type-description">Je cherche des services professionnels</div>
                    </div>

                    <div class="user-type-option" data-type="prestataire">
                        <div class="user-type-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <div class="user-type-title">Prestataire</div>
                        <div class="user-type-description">Je propose mes services professionnels</div>
                    </div>
                </div>

                <!-- Formulaire Client -->
                <div id="client-form" class="form-section">
                    <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">
                        @if(!empty($socialData))
                            <input type="hidden" name="social_provider" value="{{ $socialData['provider'] ?? '' }}">
                            <input type="hidden" name="social_id" value="{{ $socialData['provider_id'] ?? '' }}">
                        @endif

                        <!-- Profile picture section at the beginning -->
                        <div class="profile-picture-container">
                            <div class="profile-picture-preview" id="clientProfilePicturePreview">
                                @if(!empty($socialData['avatar']))
                                    <img src="{{ $socialData['avatar'] }}" alt="Photo de profil" style="width:100%;height:100%;object-fit:cover;">
                                @else
                                    <div class="profile-picture-placeholder">
                                        <i class="fas fa-user"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="profile-picture-text">
                                <strong id="clientProfilePictureText">Cliquez pour ajouter une photo de profil</strong>
                                <span class="text-gray-400 text-sm">(optionnel)</span>
                            </div>
                            <input type="file" id="client_profile_photo" name="client_profile_photo" class="form-control-file" accept="image/*" style="display: none;">
                        </div>

                        <!-- Section: Informations de connexion -->
                        <div class="mb-8">
                            <h3 class="section-header">Informations de connexion</h3>

                            <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'] ?? '') }}" class="form-control" placeholder="Votre nom complet">
                                </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'] ?? '') }}" 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'] ?? '') }}</p>
                                    @endif
                                </div>

                                <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">
                                    <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>
                            </div>
                        </div>

                        <!-- Section: Informations personnelles -->
                        <div>
                            <h3 class="section-header">Informations personnelles</h3>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="client_location" class="form-label">Adresse *</label>
                                    <div class="relative">
                                        <input type="text" id="client_location" name="location" value="{{ old('location') }}" class="form-control pr-24" placeholder="Ville, adresse..." required autocomplete="off">
                                        <button type="button" id="client_geoloc_btn" class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded-lg transition flex items-center gap-1">
                                            <span>📍</span> Ma position
                                        </button>
                                    </div>
                                    <input type="hidden" id="client_latitude" name="latitude">
                                    <input type="hidden" id="client_longitude" name="longitude">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="submit-button">
                                <span class="button-text">S'inscrire en tant que Client</span>
                                <span class="button-loader"></span>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Formulaire Prestataire -->
                <div id="prestataire-form" class="form-section">
                    <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">
                        @if(!empty($socialData))
                            <input type="hidden" name="social_provider" value="{{ $socialData['provider'] ?? '' }}">
                            <input type="hidden" name="social_id" value="{{ $socialData['provider_id'] ?? '' }}">
                        @endif

                        <!-- Profile picture section at the beginning -->
                        <div class="profile-picture-container">
                            <div class="profile-picture-preview" id="prestataireProfilePicturePreview">
                                @if(!empty($socialData['avatar']))
                                    <img src="{{ $socialData['avatar'] }}" alt="Photo de profil" style="width:100%;height:100%;object-fit:cover;">
                                @else
                                    <div class="profile-picture-placeholder">
                                        <i class="fas fa-user"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="profile-picture-text">
                                <strong id="prestataireProfilePictureText">Cliquez pour ajouter une photo de profil</strong>
                                <span class="text-gray-400 text-sm">(optionnel)</span>
                            </div>
                            <input type="file" id="prestataire_profile_photo" name="prestataire_profile_photo" class="form-control-file" accept="image/*" style="display: none;">
                        </div>

                        <!-- Section: Informations de connexion -->
                        <div class="mb-8">
                            <h3 class="section-header">Informations de connexion</h3>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="prestataire_name" class="form-label">Identifiant</label>
                                    <input id="prestataire_name" name="name" type="text" autocomplete="name" required value="{{ old('name', $socialData['name'] ?? '') }}" class="form-control" placeholder="Votre identifiant">
                                </div>

                                <div class="form-group">
                                    <label for="prestataire_email" class="form-label">E-mail</label>
                                    <input id="prestataire_email" name="email" type="email" autocomplete="email" required value="{{ old('email', $socialData['email'] ?? '') }}" 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'] ?? '') }}</p>
                                    @endif
                                </div>

                                <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">
                                    <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>
                            </div>
                        </div>

                        <!-- Section: Informations professionnelles -->
                        <div>
                            <h3 class="section-header">Informations professionnelles</h3>

                            <div class="space-y-4">
                                <div class="form-group">
                                    <label for="company_name" class="form-label">Nom de l'enseigne</label>
                                    <input id="company_name" name="company_name" type="text" required value="{{ old('company_name') }}" class="form-control" placeholder="Nom de votre entreprise">
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">Téléphone</label>
                                    <input id="phone" name="phone" type="tel" required value="{{ old('phone') }}" class="form-control" placeholder="Votre numéro de téléphone">
                                </div>

                                <div class="form-group">
                                    <label for="prestataire_location" class="form-label">Adresse *</label>
                                    <div class="relative">
                                        <input type="text" id="prestataire_location" name="city" value="{{ old('city') }}" class="form-control pr-24" placeholder="Ville, adresse..." required autocomplete="off">
                                        <button type="button" id="prestataire_geoloc_btn" class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded-lg transition flex items-center gap-1">
                                            <span>📍</span> Ma position
                                        </button>
                                    </div>
                                    <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 courte du service</label>
                                    <textarea id="description" name="description" rows="3" class="form-control" placeholder="Décrivez brièvement vos services...">{{ old('description') }}</textarea>
                                </div>

                                <div class="form-group">
                                    <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 *</label>
                                    <select id="subcategory_id" name="subcategory_id" class="form-control" required>
                                        <option value="">Sélectionnez d'abord une catégorie</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="portfolio_url" class="form-label">Lien vers un portfolio ou site (optionnel)</label>
                                    <input id="portfolio_url" name="portfolio_url" type="url" value="{{ old('portfolio_url') }}" class="form-control" placeholder="https://votre-site.com">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="submit-button">
                                <span class="button-text">S'inscrire en tant que Prestataire</span>
                                <span class="button-loader"></span>
                            </button>
                        </div>
                    </form>
                </div>

                <div class="login-link">
                    Vous avez déjà un compte? <a href="{{ route('login') }}">Connectez-vous ici</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const userTypeOptions = document.querySelectorAll('.user-type-option');
    const clientFormWrapper = document.getElementById('client-form');
    const prestataireFormWrapper = document.getElementById('prestataire-form');
    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('type', 'prestataire')) }}";

    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_password',
                    'client_password_confirmation',
                    'client_location'
                ];
                if (requiredIds.includes(el.id)) {
                    el.setAttribute('required', 'required');
                }
            }

            if (type === 'prestataire') {
                const requiredIds = [
                    'prestataire_name',
                    'prestataire_email',
                    'prestataire_password',
                    'prestataire_password_confirmation',
                    'company_name',
                    'phone',
                    'prestataire_location',
                    'category_id',
                    'subcategory_id',
                    'prestataire_profile_photo'
                ];
                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 = '<span class="animate-spin">⏳</span> Localisation...';
            btn.disabled = true;
        }

        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 = '<span>📍</span> Ma position';
                            btn.disabled = false;
                        }
                    })
                    .catch(() => {
                        if (btn) {
                            btn.innerHTML = '<span>📍</span> Ma position';
                            btn.disabled = false;
                        }
                    });
            },
            function(error) {
                if (btn) {
                    btn.innerHTML = '<span>📍</span> Ma position';
                    btn.disabled = false;
                }
                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();
    }

    // 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;
            }

            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