@extends('layouts.client')

@section('title', 'Devenir Prestataire')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/become-provider.css') }}">
@endsection

@section('content')
<div class="become-provider-container" x-data="becomeProviderWizard()">
    
    {{-- En-tête --}}
    <div class="wizard-header">
        <div class="header-content">
            <h1>Devenez Prestataire</h1>
            <p>Rejoignez notre communauté et commencez à proposer vos services</p>
        </div>
        
        <div class="progress-ring">
            <svg viewBox="0 0 36 36">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none" stroke="#e2e8f0" stroke-width="3"/>
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none" stroke="url(#progressGradient)" stroke-width="3"
                      :stroke-dasharray="progress + ', 100'"/>
                <defs>
                    <linearGradient id="progressGradient">
                        <stop offset="0%" stop-color="#10b981"/>
                        <stop offset="100%" stop-color="#3b82f6"/>
                    </linearGradient>
                </defs>
            </svg>
            <span x-text="Math.round(progress) + '%'"></span>
        </div>
    </div>

    {{-- Barre de progression des étapes --}}
    <div class="steps-progress">
        <template x-for="(stepInfo, index) in steps" :key="index">
            <div class="step-item" 
                 :class="{ 
                     'active': currentStep === index + 1, 
                     'completed': currentStep > index + 1 
                 }"
                 @click="goToStep(index + 1)">
                <div class="step-circle">
                    <span x-show="currentStep <= index + 1" x-text="index + 1"></span>
                    <i x-show="currentStep > index + 1" class="fas fa-check"></i>
                </div>
                <span class="step-label" x-text="stepInfo.title"></span>
            </div>
        </template>
    </div>

    {{-- Formulaire --}}
    <form @submit.prevent="handleSubmit" class="wizard-form">
        @csrf
        
        {{-- Étape 1 : Informations de base --}}
        <div class="wizard-step" x-show="currentStep === 1" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-user"></i>
                </div>
                <h2>Informations personnelles</h2>
                <p>Commençons par quelques informations de base</p>
            </div>

            <div class="form-grid">
                {{-- Type de compte --}}
                <div class="form-group full-width">
                    <label>Type de compte</label>
                    <div class="account-type-selector">
                        <label class="type-option" :class="{ active: !form.is_company }">
                            <input type="radio" name="is_company" :value="false" x-model="form.is_company">
                            <div class="option-content">
                                <i class="fas fa-user"></i>
                                <span>Particulier</span>
                            </div>
                        </label>
                        <label class="type-option" :class="{ active: form.is_company }">
                            <input type="radio" name="is_company" :value="true" x-model="form.is_company">
                            <div class="option-content">
                                <i class="fas fa-building"></i>
                                <span>Entreprise</span>
                            </div>
                        </label>
                    </div>
                </div>

                {{-- Nom de l'entreprise --}}
                <div class="form-group full-width" x-show="form.is_company" x-transition>
                    <label for="company_name">Nom de l'entreprise</label>
                    <input type="text" id="company_name" x-model="form.company_name" 
                           placeholder="Ma Super Entreprise">
                </div>

                {{-- SIRET --}}
                <div class="form-group" x-show="form.is_company" x-transition>
                    <label for="siret">Numéro SIRET</label>
                    <input type="text" id="siret" x-model="form.siret" 
                           placeholder="12345678901234" maxlength="14">
                </div>

                {{-- Prénom --}}
                <div class="form-group">
                    <label for="first_name">Prénom *</label>
                    <input type="text" id="first_name" x-model="form.first_name" 
                           value="{{ $prefillData['first_name'] }}" required>
                </div>

                {{-- Nom --}}
                <div class="form-group">
                    <label for="last_name">Nom *</label>
                    <input type="text" id="last_name" x-model="form.last_name" 
                           value="{{ $prefillData['last_name'] }}" required>
                </div>

                {{-- Téléphone --}}
                <div class="form-group">
                    <label for="phone">Téléphone *</label>
                    <input type="tel" id="phone" x-model="form.phone" 
                           value="{{ $prefillData['phone'] }}" required>
                </div>

                {{-- Email (lecture seule) --}}
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" value="{{ $prefillData['email'] }}" readonly class="readonly">
                    <small>Votre email ne peut pas être modifié ici</small>
                </div>
            </div>
        </div>

        {{-- Étape 2 : Adresse et localisation --}}
        <div class="wizard-step" x-show="currentStep === 2" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <h2>Localisation</h2>
                <p>Où proposez-vous vos services ?</p>
            </div>

            <div class="form-grid">
                {{-- Adresse --}}
                <div class="form-group full-width">
                    <label for="address">Adresse *</label>
                    <input type="text" id="address" x-model="form.address" 
                           value="{{ $prefillData['address'] }}"
                           @input="searchAddress"
                           placeholder="123 Rue Example">
                    <div class="address-suggestions" x-show="addressSuggestions.length > 0">
                        <template x-for="suggestion in addressSuggestions" :key="suggestion.id">
                            <div class="suggestion-item" @click="selectAddress(suggestion)">
                                <i class="fas fa-map-pin"></i>
                                <span x-text="suggestion.label"></span>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- Ville --}}
                <div class="form-group">
                    <label for="city">Ville *</label>
                    <input type="text" id="city" x-model="form.city" 
                           value="{{ $prefillData['city'] }}" required>
                </div>

                {{-- Code postal --}}
                <div class="form-group">
                    <label for="postal_code">Code postal *</label>
                    <input type="text" id="postal_code" x-model="form.postal_code" 
                           value="{{ $prefillData['postal_code'] }}" required>
                </div>

                {{-- Pays --}}
                <div class="form-group">
                    <label for="country">Pays *</label>
                    <select id="country" x-model="form.country">
                        <option value="France">France</option>
                        <option value="Belgique">Belgique</option>
                        <option value="Suisse">Suisse</option>
                        <option value="Luxembourg">Luxembourg</option>
                        <option value="Canada">Canada</option>
                    </select>
                </div>

                {{-- Rayon d'intervention --}}
                <div class="form-group">
                    <label for="service_radius">Rayon d'intervention</label>
                    <div class="range-input">
                        <input type="range" id="service_radius" x-model="form.service_radius" 
                               min="5" max="200" step="5">
                        <span class="range-value" x-text="form.service_radius + ' km'"></span>
                    </div>
                </div>

                {{-- Carte (aperçu) --}}
                <div class="form-group full-width">
                    <div class="map-preview" id="map-preview">
                        <div class="map-placeholder" x-show="!form.latitude">
                            <i class="fas fa-map"></i>
                            <span>Entrez votre adresse pour voir l'aperçu</span>
                        </div>
                    </div>
                </div>

                <input type="hidden" x-model="form.latitude">
                <input type="hidden" x-model="form.longitude">
            </div>
        </div>

        {{-- Étape 3 : Catégories et services --}}
        <div class="wizard-step" x-show="currentStep === 3" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-tags"></i>
                </div>
                <h2>Vos services</h2>
                <p>Quels services proposez-vous ?</p>
            </div>

            <div class="categories-section">
                <p class="section-help">Sélectionnez au moins une catégorie (vous pourrez en ajouter plus tard)</p>
                
                <div class="categories-grid">
                    @foreach($categories as $category)
                        <div class="category-card" 
                             :class="{ selected: form.categories.includes({{ $category->id }}) }"
                             @click="toggleCategory({{ $category->id }})">
                            <div class="category-icon">
                                <i class="{{ $category->icon ?? 'fas fa-folder' }}"></i>
                            </div>
                            <h4>{{ $category->name }}</h4>
                            @if($category->children->count() > 0)
                                <span class="subcategories-count">{{ $category->children->count() }} sous-catégories</span>
                            @endif
                            <div class="check-indicator">
                                <i class="fas fa-check"></i>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="selected-summary" x-show="form.categories.length > 0">
                    <span x-text="form.categories.length"></span> catégorie(s) sélectionnée(s)
                </div>

                {{-- Services personnalisés --}}
                <div class="form-group full-width" style="margin-top: 2rem;">
                    <label for="custom_services">Services spécifiques (optionnel)</label>
                    <textarea id="custom_services" x-model="form.custom_services" rows="3"
                              placeholder="Décrivez vos services particuliers, spécialisations..."></textarea>
                </div>
            </div>
        </div>

        {{-- Étape 4 : Profil et description --}}
        <div class="wizard-step" x-show="currentStep === 4" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-edit"></i>
                </div>
                <h2>Votre profil</h2>
                <p>Présentez-vous aux clients potentiels</p>
            </div>

            <div class="form-grid">
                {{-- Bio --}}
                <div class="form-group full-width">
                    <label for="bio">Présentez-vous *</label>
                    <textarea id="bio" x-model="form.bio" rows="6" required
                              placeholder="Décrivez votre expérience, vos compétences, ce qui vous différencie..."></textarea>
                    <div class="char-count" :class="{ warning: form.bio.length > 1800, danger: form.bio.length > 2000 }">
                        <span x-text="form.bio.length"></span>/2000
                        <span x-show="form.bio.length < 50" class="hint">Minimum 50 caractères</span>
                    </div>
                </div>

                {{-- Années d'expérience --}}
                <div class="form-group">
                    <label for="experience_years">Années d'expérience</label>
                    <input type="number" id="experience_years" x-model="form.experience_years" 
                           min="0" max="50" placeholder="5">
                </div>

                {{-- Certifications --}}
                <div class="form-group">
                    <label for="certifications">Certifications / Diplômes</label>
                    <input type="text" id="certifications" x-model="form.certifications"
                           placeholder="CAP, BTS, Certification...">
                </div>

                {{-- Langues --}}
                <div class="form-group full-width">
                    <label>Langues parlées</label>
                    <div class="languages-selector">
                        <template x-for="lang in availableLanguages" :key="lang.code">
                            <label class="language-option" :class="{ selected: form.languages.includes(lang.code) }">
                                <input type="checkbox" :value="lang.code" 
                                       @change="toggleLanguage(lang.code)"
                                       :checked="form.languages.includes(lang.code)">
                                <span x-text="lang.flag"></span>
                                <span x-text="lang.name"></span>
                            </label>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- Étape 5 : Photos et documents --}}
        <div class="wizard-step" x-show="currentStep === 5" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-camera"></i>
                </div>
                <h2>Médias</h2>
                <p>Ajoutez des photos pour rassurer vos clients</p>
            </div>

            <div class="media-sections">
                {{-- Photo de profil --}}
                <div class="media-section">
                    <h3><i class="fas fa-user-circle"></i> Photo de profil</h3>
                    <div class="profile-photo-upload">
                        <div class="photo-preview" :class="{ 'has-photo': profilePhotoPreview }">
                            <img :src="profilePhotoPreview" x-show="profilePhotoPreview">
                            <i class="fas fa-user" x-show="!profilePhotoPreview"></i>
                        </div>
                        <div class="upload-controls">
                            <label class="btn btn-secondary">
                                <i class="fas fa-upload"></i>
                                Choisir une photo
                                <input type="file" name="profile_photo" accept="image/*" 
                                       @change="handleProfilePhoto" hidden>
                            </label>
                            <small>Format recommandé : carré, min 200x200px</small>
                        </div>
                    </div>
                </div>

                {{-- Portfolio --}}
                <div class="media-section">
                    <h3><i class="fas fa-images"></i> Portfolio / Réalisations</h3>
                    <div class="portfolio-upload">
                        <div class="upload-zone" 
                             @dragover.prevent="dragOver = true"
                             @dragleave.prevent="dragOver = false"
                             @drop.prevent="handlePortfolioDrop($event)"
                             :class="{ 'drag-over': dragOver }">
                            <input type="file" name="portfolio_images[]" multiple accept="image/*"
                                   @change="handlePortfolioFiles" id="portfolio-input">
                            <label for="portfolio-input">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <span>Glissez vos images ici ou cliquez</span>
                                <small>Jusqu'à 10 images (5 Mo max chacune)</small>
                            </label>
                        </div>

                        <div class="portfolio-grid" x-show="portfolioImages.length > 0">
                            <template x-for="(img, index) in portfolioImages" :key="index">
                                <div class="portfolio-item">
                                    <img :src="img.preview">
                                    <button type="button" class="remove-btn" @click="removePortfolioImage(index)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                {{-- Documents --}}
                <div class="media-section">
                    <h3><i class="fas fa-file-alt"></i> Documents (optionnel)</h3>
                    <p class="section-help">Ajoutez vos certifications, diplômes, assurances...</p>
                    <div class="documents-upload">
                        <label class="btn btn-outline">
                            <i class="fas fa-plus"></i>
                            Ajouter un document
                            <input type="file" name="documents[]" multiple 
                                   accept=".pdf,.jpg,.jpeg,.png"
                                   @change="handleDocuments" hidden>
                        </label>

                        <div class="documents-list" x-show="documents.length > 0">
                            <template x-for="(doc, index) in documents" :key="index">
                                <div class="document-item">
                                    <i class="fas fa-file-pdf"></i>
                                    <span x-text="doc.name"></span>
                                    <button type="button" @click="removeDocument(index)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Étape 6 : Tarifs et disponibilités --}}
        <div class="wizard-step" x-show="currentStep === 6" x-transition>
            <div class="step-header">
                <div class="step-icon">
                    <i class="fas fa-euro-sign"></i>
                </div>
                <h2>Tarifs & Disponibilités</h2>
                <p>Définissez vos tarifs indicatifs</p>
            </div>

            <div class="form-grid">
                {{-- Taux horaire --}}
                <div class="form-group">
                    <label for="hourly_rate">Taux horaire</label>
                    <div class="input-with-unit">
                        <input type="number" id="hourly_rate" x-model="form.hourly_rate" 
                               min="0" step="0.5" placeholder="25">
                        <span class="unit">€/h</span>
                    </div>
                </div>

                {{-- Taux journalier --}}
                <div class="form-group">
                    <label for="daily_rate">Taux journalier</label>
                    <div class="input-with-unit">
                        <input type="number" id="daily_rate" x-model="form.daily_rate" 
                               min="0" step="1" placeholder="200">
                        <span class="unit">€/jour</span>
                    </div>
                </div>

                {{-- Prix minimum --}}
                <div class="form-group">
                    <label for="minimum_price">Prix minimum d'intervention</label>
                    <div class="input-with-unit">
                        <input type="number" id="minimum_price" x-model="form.minimum_price" 
                               min="0" step="1" placeholder="50">
                        <span class="unit">€</span>
                    </div>
                </div>

                {{-- Options de disponibilité --}}
                <div class="form-group full-width">
                    <label>Disponibilités</label>
                    <div class="availability-options">
                        <label class="availability-option" :class="{ selected: form.accepts_remote }">
                            <input type="checkbox" x-model="form.accepts_remote">
                            <i class="fas fa-laptop-house"></i>
                            <span>Travail à distance possible</span>
                        </label>
                        <label class="availability-option" :class="{ selected: form.available_weekends }">
                            <input type="checkbox" x-model="form.available_weekends">
                            <i class="fas fa-calendar-week"></i>
                            <span>Disponible le week-end</span>
                        </label>
                        <label class="availability-option" :class="{ selected: form.available_evenings }">
                            <input type="checkbox" x-model="form.available_evenings">
                            <i class="fas fa-moon"></i>
                            <span>Disponible en soirée</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Récapitulatif final --}}
            <div class="final-summary">
                <h3><i class="fas fa-clipboard-check"></i> Récapitulatif</h3>
                <div class="summary-grid">
                    <div class="summary-item">
                        <span class="label">Nom</span>
                        <span class="value" x-text="form.first_name + ' ' + form.last_name"></span>
                    </div>
                    <div class="summary-item">
                        <span class="label">Localisation</span>
                        <span class="value" x-text="form.city + ', ' + form.country"></span>
                    </div>
                    <div class="summary-item">
                        <span class="label">Catégories</span>
                        <span class="value" x-text="form.categories.length + ' sélectionnée(s)'"></span>
                    </div>
                    <div class="summary-item">
                        <span class="label">Expérience</span>
                        <span class="value" x-text="form.experience_years ? form.experience_years + ' ans' : 'Non spécifié'"></span>
                    </div>
                </div>

                <label class="terms-checkbox">
                    <input type="checkbox" x-model="acceptedTerms" required>
                    <span>J'accepte les <a href="{{ route('legal.cgv') }}" target="_blank">conditions générales</a> 
                          et la <a href="{{ route('legal.privacy') }}" target="_blank">politique de confidentialité</a></span>
                </label>
            </div>
        </div>

        {{-- Navigation --}}
        <div class="wizard-navigation">
            <button type="button" class="btn btn-secondary" 
                    @click="previousStep" 
                    x-show="currentStep > 1">
                <i class="fas fa-arrow-left"></i>
                Précédent
            </button>
            
            <div class="nav-spacer" x-show="currentStep === 1"></div>
            
            <button type="button" class="btn btn-primary" 
                    @click="nextStep" 
                    x-show="currentStep < 6"
                    :disabled="!canProceed">
                Suivant
                <i class="fas fa-arrow-right"></i>
            </button>
            
            <button type="submit" class="btn btn-success" 
                    x-show="currentStep === 6"
                    :disabled="!canFinalize || isSubmitting">
                <i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-check'"></i>
                <span x-text="isSubmitting ? 'Création en cours...' : 'Créer mon compte prestataire'"></span>
            </button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
function becomeProviderWizard() {
    return {
        currentStep: 1,
        isSubmitting: false,
        acceptedTerms: false,
        dragOver: false,
        addressSuggestions: [],
        profilePhotoPreview: null,
        portfolioImages: [],
        documents: [],

        steps: [
            { title: 'Infos' },
            { title: 'Adresse' },
            { title: 'Services' },
            { title: 'Profil' },
            { title: 'Médias' },
            { title: 'Tarifs' }
        ],

        availableLanguages: [
            { code: 'fr', name: 'Français', flag: '🇫🇷' },
            { code: 'en', name: 'Anglais', flag: '🇬🇧' },
            { code: 'es', name: 'Espagnol', flag: '🇪🇸' },
            { code: 'de', name: 'Allemand', flag: '🇩🇪' },
            { code: 'it', name: 'Italien', flag: '🇮🇹' },
            { code: 'pt', name: 'Portugais', flag: '🇵🇹' },
            { code: 'ar', name: 'Arabe', flag: '🇸🇦' }
        ],

        form: {
            is_company: false,
            company_name: '',
            siret: '',
            first_name: '{{ $prefillData['first_name'] }}',
            last_name: '{{ $prefillData['last_name'] }}',
            phone: '{{ $prefillData['phone'] }}',
            address: '{{ $prefillData['address'] }}',
            city: '{{ $prefillData['city'] }}',
            postal_code: '{{ $prefillData['postal_code'] }}',
            country: '{{ $prefillData['country'] ?? 'France' }}',
            latitude: null,
            longitude: null,
            service_radius: 50,
            categories: [],
            custom_services: '',
            bio: '',
            experience_years: '',
            certifications: '',
            languages: ['fr'],
            hourly_rate: '',
            daily_rate: '',
            minimum_price: '',
            accepts_remote: false,
            available_weekends: false,
            available_evenings: false
        },

        get progress() {
            return (this.currentStep / 6) * 100;
        },

        get canProceed() {
            switch (this.currentStep) {
                case 1:
                    return this.form.first_name && this.form.last_name && this.form.phone;
                case 2:
                    return this.form.address && this.form.city && this.form.postal_code;
                case 3:
                    return this.form.categories.length > 0;
                case 4:
                    return this.form.bio.length >= 50;
                case 5:
                    return true; // Photos optionnelles
                case 6:
                    return true;
                default:
                    return true;
            }
        },

        get canFinalize() {
            return this.acceptedTerms && 
                   this.form.first_name && 
                   this.form.last_name && 
                   this.form.categories.length > 0 &&
                   this.form.bio.length >= 50;
        },

        nextStep() {
            if (this.currentStep < 6 && this.canProceed) {
                this.saveCurrentStep();
                this.currentStep++;
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },

        previousStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        },

        goToStep(step) {
            if (step <= this.currentStep) {
                this.currentStep = step;
            }
        },

        async saveCurrentStep() {
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            
            // Ajouter les données selon l'étape
            Object.keys(this.form).forEach(key => {
                const value = this.form[key];
                if (Array.isArray(value)) {
                    value.forEach(v => formData.append(key + '[]', v));
                } else if (value !== null && value !== '') {
                    formData.append(key, value);
                }
            });

            try {
                await fetch(`{{ url('client/become-provider/step') }}/${this.currentStep}`, {
                    method: 'POST',
                    body: formData
                });
            } catch (error) {
                console.error('Erreur sauvegarde:', error);
            }
        },

        toggleCategory(id) {
            const index = this.form.categories.indexOf(id);
            if (index > -1) {
                this.form.categories.splice(index, 1);
            } else {
                this.form.categories.push(id);
            }
        },

        toggleLanguage(code) {
            const index = this.form.languages.indexOf(code);
            if (index > -1) {
                this.form.languages.splice(index, 1);
            } else {
                this.form.languages.push(code);
            }
        },

        async searchAddress() {
            if (this.form.address.length < 3) {
                this.addressSuggestions = [];
                return;
            }
            // API d'autocomplétion d'adresse (à implémenter)
            // Pour l'instant, on laisse vide
        },

        selectAddress(suggestion) {
            this.form.address = suggestion.address;
            this.form.city = suggestion.city;
            this.form.postal_code = suggestion.postcode;
            this.form.latitude = suggestion.lat;
            this.form.longitude = suggestion.lng;
            this.addressSuggestions = [];
        },

        handleProfilePhoto(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.profilePhotoPreview = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },

        handlePortfolioFiles(event) {
            this.addPortfolioImages(event.target.files);
        },

        handlePortfolioDrop(event) {
            this.dragOver = false;
            this.addPortfolioImages(event.dataTransfer.files);
        },

        addPortfolioImages(files) {
            for (let file of files) {
                if (this.portfolioImages.length >= 10) break;
                if (file.size > 5 * 1024 * 1024) continue;
                
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.portfolioImages.push({
                        file: file,
                        preview: e.target.result
                    });
                };
                reader.readAsDataURL(file);
            }
        },

        removePortfolioImage(index) {
            this.portfolioImages.splice(index, 1);
        },

        handleDocuments(event) {
            for (let file of event.target.files) {
                if (this.documents.length >= 5) break;
                this.documents.push(file);
            }
        },

        removeDocument(index) {
            this.documents.splice(index, 1);
        },

        async handleSubmit() {
            if (!this.canFinalize || this.isSubmitting) return;
            
            this.isSubmitting = true;

            // Sauvegarder la dernière étape
            await this.saveCurrentStep();

            // Soumettre le formulaire complet
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');

            // Ajouter les fichiers
            if (this.profilePhotoPreview) {
                const photoInput = document.querySelector('input[name="profile_photo"]');
                if (photoInput.files[0]) {
                    formData.append('profile_photo', photoInput.files[0]);
                }
            }

            this.portfolioImages.forEach((img, i) => {
                formData.append('portfolio_images[]', img.file);
            });

            this.documents.forEach((doc, i) => {
                formData.append('documents[]', doc);
            });

            try {
                const response = await fetch('{{ route('client.become-provider.finalize') }}', {
                    method: 'POST',
                    body: formData
                });

                if (response.ok) {
                    window.location.href = '{{ route('prestataire.dashboard') }}';
                } else {
                    const data = await response.json();
                    alert(data.message || 'Une erreur est survenue');
                    this.isSubmitting = false;
                }
            } catch (error) {
                alert('Erreur de connexion. Veuillez réessayer.');
                this.isSubmitting = false;
            }
        }
    };
}
</script>
@endsection