@extends('layouts.client')

@section('title', 'Créer un Appel d\'Offre')

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

@section('content')
<div class="tender-wizard-container" x-data="tenderWizard()" x-cloak>
    
    {{-- Header avec progression --}}
    <div class="wizard-header">
        <div class="wizard-title">
            <div class="title-icon">
                <i class="fas fa-bullhorn"></i>
            </div>
            <div class="title-text">
                <h1>Créer un Appel d'Offre</h1>
                <p>Décrivez votre besoin et recevez des propositions de prestataires qualifiés</p>
            </div>
        </div>
        
        {{-- Barre de progression --}}
        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" :style="'width: ' + progressPercent + '%'"></div>
            </div>
            <div class="progress-steps">
                <template x-for="(step, index) in steps" :key="index">
                    <div class="progress-step" 
                         :class="{ 
                             'active': currentStep === index + 1, 
                             'completed': currentStep > index + 1,
                             'clickable': index + 1 <= maxStep
                         }"
                         @click="goToStep(index + 1)">
                        <div class="step-number">
                            <template x-if="currentStep > index + 1">
                                <i class="fas fa-check"></i>
                            </template>
                            <template x-if="currentStep <= index + 1">
                                <span x-text="index + 1"></span>
                            </template>
                        </div>
                        <span class="step-label" x-text="step.label"></span>
                    </div>
                </template>
            </div>
        </div>
    </div>

    {{-- Messages d'erreur/succès --}}
    <div x-show="message" 
         x-transition
         class="wizard-message"
         :class="messageType">
        <i :class="messageType === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'"></i>
        <span x-text="message"></span>
        <button @click="message = ''" class="close-message">
            <i class="fas fa-times"></i>
        </button>
    </div>

    {{-- Contenu des étapes --}}
    <form @submit.prevent="submitCurrentStep" class="wizard-form">
        <input type="hidden" x-model="tenderId" name="tender_id">

        {{-- ÉTAPE 1: Informations de base --}}
        <div x-show="currentStep === 1" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-edit"></i></div>
                <div class="step-info">
                    <h2>Décrivez votre besoin</h2>
                    <p>Ces informations aideront les prestataires à comprendre votre projet</p>
                </div>
            </div>

            <div class="form-group">
                <label for="title" class="form-label required">Titre de votre demande</label>
                <input type="text" 
                       id="title" 
                       x-model="formData.title"
                       class="form-input"
                       placeholder="Ex: Rénovation cuisine complète, Plomberie urgente..."
                       required
                       maxlength="255">
                <div class="form-hint">
                    <i class="fas fa-lightbulb"></i>
                    Soyez précis et concis pour attirer les bons prestataires
                </div>
            </div>

            <div class="form-group">
                <label for="description" class="form-label required">Description détaillée</label>
                <textarea id="description"
                          x-model="formData.description"
                          class="form-textarea"
                          rows="6"
                          placeholder="Décrivez en détail ce que vous recherchez : type de travaux, spécificités, contraintes..."
                          required
                          minlength="50"></textarea>
                <div class="char-count" :class="{ 'warning': formData.description.length < 50 }">
                    <span x-text="formData.description.length"></span>/50 caractères minimum
                </div>
            </div>

            <div class="form-group">
                <label class="form-label required">Catégories concernées</label>
                <p class="form-sublabel">Sélectionnez les catégories liées à votre besoin (3 maximum)</p>
                
                <div class="categories-grid">
                    @foreach($categories as $category)
                    <label class="category-card" 
                           :class="{ 'selected': formData.categories.includes({{ $category->id }}) }"
                           @click="toggleCategory({{ $category->id }})">
                        <input type="checkbox" 
                               value="{{ $category->id }}"
                               :checked="formData.categories.includes({{ $category->id }})"
                               class="category-checkbox">
                        <div class="category-icon">
                            <i class="{{ $category->icon ?? 'fas fa-tag' }}"></i>
                        </div>
                        <span class="category-name">{{ $category->name }}</span>
                    </label>
                    @endforeach
                </div>
                <div x-show="formData.categories.length >= 3" class="form-warning">
                    <i class="fas fa-info-circle"></i>
                    Maximum 3 catégories atteint
                </div>
            </div>

            <div class="form-group">
                <label class="form-label required">Niveau d'urgence</label>
                <div class="urgency-options">
                    <label class="urgency-card" :class="{ 'selected': formData.urgency === 'low' }">
                        <input type="radio" name="urgency" value="low" x-model="formData.urgency">
                        <div class="urgency-icon low"><i class="fas fa-clock"></i></div>
                        <div class="urgency-info">
                            <span class="urgency-title">Pas pressé</span>
                            <span class="urgency-desc">Peut attendre quelques semaines</span>
                        </div>
                    </label>
                    <label class="urgency-card" :class="{ 'selected': formData.urgency === 'normal' }">
                        <input type="radio" name="urgency" value="normal" x-model="formData.urgency">
                        <div class="urgency-icon normal"><i class="fas fa-calendar"></i></div>
                        <div class="urgency-info">
                            <span class="urgency-title">Normal</span>
                            <span class="urgency-desc">Dans les 2 semaines</span>
                        </div>
                    </label>
                    <label class="urgency-card" :class="{ 'selected': formData.urgency === 'high' }">
                        <input type="radio" name="urgency" value="high" x-model="formData.urgency">
                        <div class="urgency-icon high"><i class="fas fa-bolt"></i></div>
                        <div class="urgency-info">
                            <span class="urgency-title">Prioritaire</span>
                            <span class="urgency-desc">Cette semaine</span>
                        </div>
                    </label>
                    <label class="urgency-card" :class="{ 'selected': formData.urgency === 'urgent' }">
                        <input type="radio" name="urgency" value="urgent" x-model="formData.urgency">
                        <div class="urgency-icon urgent"><i class="fas fa-exclamation-triangle"></i></div>
                        <div class="urgency-info">
                            <span class="urgency-title">Urgent !</span>
                            <span class="urgency-desc">Dans les 48h</span>
                        </div>
                    </label>
                </div>
            </div>
        </div>

        {{-- ÉTAPE 2: Localisation --}}
        <div x-show="currentStep === 2" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="step-info">
                    <h2>Lieu d'intervention</h2>
                    <p>Où souhaitez-vous que le prestataire intervienne ?</p>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group flex-2">
                    <label for="city" class="form-label required">Ville</label>
                    <input type="text" 
                           id="city" 
                           x-model="formData.city"
                           class="form-input"
                           placeholder="Ex: Paris, Lyon, Marseille..."
                           required>
                </div>
                <div class="form-group flex-1">
                    <label for="postal_code" class="form-label">Code postal</label>
                    <input type="text" 
                           id="postal_code" 
                           x-model="formData.postal_code"
                           class="form-input"
                           placeholder="75001"
                           maxlength="10">
                </div>
            </div>

            <div class="form-group">
                <label for="address" class="form-label">Adresse précise (optionnel)</label>
                <input type="text" 
                       id="address" 
                       x-model="formData.address"
                       class="form-input"
                       placeholder="Numéro et nom de rue">
                <div class="form-hint">
                    <i class="fas fa-shield-alt"></i>
                    L'adresse exacte sera communiquée uniquement au prestataire sélectionné
                </div>
            </div>

            <div class="form-group">
                <label for="radius_km" class="form-label required">Rayon de recherche</label>
                <div class="radius-slider">
                    <input type="range" 
                           id="radius_km" 
                           x-model="formData.radius_km"
                           min="1" 
                           max="100" 
                           step="1"
                           class="slider">
                    <div class="radius-value">
                        <span x-text="formData.radius_km"></span> km
                    </div>
                </div>
                <div class="radius-labels">
                    <span>1 km</span>
                    <span>50 km</span>
                    <span>100 km</span>
                </div>
            </div>

            {{-- Carte (optionnelle) --}}
            <div class="form-group">
                <button type="button" 
                        @click="locateMe" 
                        class="btn btn-secondary btn-icon"
                        :disabled="locating">
                    <i class="fas" :class="locating ? 'fa-spinner fa-spin' : 'fa-crosshairs'"></i>
                    <span x-text="locating ? 'Localisation...' : 'Me localiser automatiquement'"></span>
                </button>
                <input type="hidden" x-model="formData.latitude">
                <input type="hidden" x-model="formData.longitude">
            </div>
        </div>

        {{-- ÉTAPE 3: Dates et horaires --}}
        <div x-show="currentStep === 3" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-calendar-alt"></i></div>
                <div class="step-info">
                    <h2>Quand avez-vous besoin de cette prestation ?</h2>
                    <p>Définissez vos disponibilités pour l'intervention</p>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group flex-1">
                    <label for="start_date" class="form-label required">Date de début souhaitée</label>
                    <input type="date" 
                           id="start_date" 
                           x-model="formData.start_date"
                           class="form-input"
                           :min="minDate"
                           required>
                </div>
                <div class="form-group flex-1">
                    <label for="end_date" class="form-label">Date de fin (optionnel)</label>
                    <input type="date" 
                           id="end_date" 
                           x-model="formData.end_date"
                           class="form-input"
                           :min="formData.start_date || minDate">
                </div>
            </div>

            <div class="form-group">
                <label class="checkbox-label large">
                    <input type="checkbox" x-model="formData.flexible_dates">
                    <span class="checkmark"></span>
                    <div class="checkbox-text">
                        <span class="checkbox-title">Dates flexibles</span>
                        <span class="checkbox-desc">Je suis flexible sur les dates exactes</span>
                    </div>
                </label>
            </div>

            <div class="form-group">
                <label class="form-label">Créneaux horaires préférés (optionnel)</label>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label for="preferred_time_start" class="form-sublabel">De</label>
                        <input type="time" 
                               id="preferred_time_start" 
                               x-model="formData.preferred_time_start"
                               class="form-input">
                    </div>
                    <div class="form-group flex-1">
                        <label for="preferred_time_end" class="form-sublabel">À</label>
                        <input type="time" 
                               id="preferred_time_end" 
                               x-model="formData.preferred_time_end"
                               class="form-input">
                    </div>
                </div>
            </div>
        </div>

        {{-- ÉTAPE 4: Budget --}}
        <div x-show="currentStep === 4" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-euro-sign"></i></div>
                <div class="step-info">
                    <h2>Quel est votre budget ?</h2>
                    <p>Indiquer un budget aide les prestataires à mieux adapter leurs propositions</p>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label required">Type de tarification</label>
                <div class="budget-type-options">
                    <label class="budget-type-card" :class="{ 'selected': formData.budget_type === 'fixed' }">
                        <input type="radio" name="budget_type" value="fixed" x-model="formData.budget_type">
                        <i class="fas fa-tag"></i>
                        <span>Prix fixe</span>
                    </label>
                    <label class="budget-type-card" :class="{ 'selected': formData.budget_type === 'hourly' }">
                        <input type="radio" name="budget_type" value="hourly" x-model="formData.budget_type">
                        <i class="fas fa-clock"></i>
                        <span>À l'heure</span>
                    </label>
                    <label class="budget-type-card" :class="{ 'selected': formData.budget_type === 'daily' }">
                        <input type="radio" name="budget_type" value="daily" x-model="formData.budget_type">
                        <i class="fas fa-calendar-day"></i>
                        <span>À la journée</span>
                    </label>
                    <label class="budget-type-card" :class="{ 'selected': formData.budget_type === 'negotiable' }">
                        <input type="radio" name="budget_type" value="negotiable" x-model="formData.budget_type">
                        <i class="fas fa-handshake"></i>
                        <span>À négocier</span>
                    </label>
                </div>
            </div>

            <div class="form-row" x-show="formData.budget_type !== 'negotiable'">
                <div class="form-group flex-1">
                    <label for="budget_min" class="form-label">Budget minimum</label>
                    <div class="input-with-icon">
                        <input type="number" 
                               id="budget_min" 
                               x-model.number="formData.budget_min"
                               class="form-input"
                               placeholder="0"
                               min="0"
                               step="10">
                        <span class="input-icon">€</span>
                    </div>
                </div>
                <div class="form-group flex-1">
                    <label for="budget_max" class="form-label">Budget maximum</label>
                    <div class="input-with-icon">
                        <input type="number" 
                               id="budget_max" 
                               x-model.number="formData.budget_max"
                               class="form-input"
                               placeholder="1000"
                               min="0"
                               step="10">
                        <span class="input-icon">€</span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="checkbox-label large">
                    <input type="checkbox" x-model="formData.budget_visible">
                    <span class="checkmark"></span>
                    <div class="checkbox-text">
                        <span class="checkbox-title">Afficher le budget aux prestataires</span>
                        <span class="checkbox-desc">Les prestataires verront votre fourchette de budget</span>
                    </div>
                </label>
            </div>
        </div>

        {{-- ÉTAPE 5: Médias --}}
        <div x-show="currentStep === 5" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-camera"></i></div>
                <div class="step-info">
                    <h2>Ajoutez des photos ou documents</h2>
                    <p>Les visuels aident les prestataires à mieux comprendre votre besoin</p>
                </div>
            </div>

            {{-- Upload Photos --}}
            <div class="form-group">
                <label class="form-label">Photos (jusqu'à 10)</label>
                <div class="upload-zone" 
                     @click="$refs.photoInput.click()"
                     @dragover.prevent="dragOver = true"
                     @dragleave.prevent="dragOver = false"
                     @drop.prevent="handlePhotoDrop($event)"
                     :class="{ 'drag-over': dragOver }">
                    <input type="file" 
                           ref="photoInput" 
                           @change="handlePhotoUpload($event)"
                           accept="image/*"
                           multiple
                           class="hidden">
                    <div class="upload-content">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>Glissez vos photos ici ou cliquez pour sélectionner</p>
                        <span class="upload-hint">JPG, PNG • Max 5 Mo par fichier</span>
                    </div>
                </div>
                
                {{-- Aperçu des photos --}}
                <div class="media-preview" x-show="photos.length > 0">
                    <template x-for="(photo, index) in photos" :key="index">
                        <div class="media-item">
                            <img :src="photo.preview" :alt="photo.name">
                            <button type="button" @click="removePhoto(index)" class="remove-media">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Upload Vidéos --}}
            <div class="form-group">
                <label class="form-label">Vidéos (jusqu'à 3)</label>
                <div class="upload-zone" @click="$refs.videoInput.click()">
                    <input type="file" 
                           ref="videoInput" 
                           @change="handleVideoUpload($event)"
                           accept="video/*"
                           multiple
                           class="hidden">
                    <div class="upload-content">
                        <i class="fas fa-video"></i>
                        <p>Ajouter des vidéos</p>
                        <span class="upload-hint">MP4, MOV • Max 50 Mo par fichier</span>
                    </div>
                </div>

                <div class="media-preview videos" x-show="videos.length > 0">
                    <template x-for="(video, index) in videos" :key="index">
                        <div class="media-item video">
                            <i class="fas fa-play-circle"></i>
                            <span x-text="video.name"></span>
                            <button type="button" @click="removeVideo(index)" class="remove-media">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Upload Documents --}}
            <div class="form-group">
                <label class="form-label">Documents (devis, plans, etc.)</label>
                <div class="upload-zone" @click="$refs.docInput.click()">
                    <input type="file" 
                           ref="docInput" 
                           @change="handleDocUpload($event)"
                           accept=".pdf,.doc,.docx,.xls,.xlsx"
                           multiple
                           class="hidden">
                    <div class="upload-content">
                        <i class="fas fa-file-alt"></i>
                        <p>Ajouter des documents</p>
                        <span class="upload-hint">PDF, DOC, XLS • Max 10 Mo par fichier</span>
                    </div>
                </div>

                <div class="document-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)" class="remove-media">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        {{-- ÉTAPE 6: Contact et accès --}}
        <div x-show="currentStep === 6" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-address-card"></i></div>
                <div class="step-info">
                    <h2>Informations de contact</h2>
                    <p>Comment les prestataires peuvent-ils vous joindre ?</p>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label required">Préférence de contact</label>
                <div class="contact-options">
                    <label class="contact-card" :class="{ 'selected': formData.contact_preference === 'messaging' }">
                        <input type="radio" name="contact_preference" value="messaging" x-model="formData.contact_preference">
                        <i class="fas fa-comments"></i>
                        <span>Via la messagerie</span>
                    </label>
                    <label class="contact-card" :class="{ 'selected': formData.contact_preference === 'email' }">
                        <input type="radio" name="contact_preference" value="email" x-model="formData.contact_preference">
                        <i class="fas fa-envelope"></i>
                        <span>Par email</span>
                    </label>
                    <label class="contact-card" :class="{ 'selected': formData.contact_preference === 'phone' }">
                        <input type="radio" name="contact_preference" value="phone" x-model="formData.contact_preference">
                        <i class="fas fa-phone"></i>
                        <span>Par téléphone</span>
                    </label>
                    <label class="contact-card" :class="{ 'selected': formData.contact_preference === 'any' }">
                        <input type="radio" name="contact_preference" value="any" x-model="formData.contact_preference">
                        <i class="fas fa-check-double"></i>
                        <span>Peu importe</span>
                    </label>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group flex-1">
                    <label for="contact_name" class="form-label">Nom du contact</label>
                    <input type="text" 
                           id="contact_name" 
                           x-model="formData.contact_name"
                           class="form-input"
                           placeholder="Votre nom">
                </div>
                <div class="form-group flex-1">
                    <label for="contact_phone" class="form-label">Téléphone</label>
                    <input type="tel" 
                           id="contact_phone" 
                           x-model="formData.contact_phone"
                           class="form-input"
                           placeholder="06 12 34 56 78">
                </div>
            </div>

            <div class="form-group">
                <label for="contact_email" class="form-label">Email de contact</label>
                <input type="email" 
                       id="contact_email" 
                       x-model="formData.contact_email"
                       class="form-input"
                       placeholder="{{ auth()->user()->email }}">
            </div>

            <div class="form-group">
                <label for="access_instructions" class="form-label">Instructions d'accès (optionnel)</label>
                <textarea id="access_instructions"
                          x-model="formData.access_instructions"
                          class="form-textarea"
                          rows="3"
                          placeholder="Digicode, étage, nom sur l'interphone..."></textarea>
                <div class="form-hint">
                    <i class="fas fa-lock"></i>
                    Ces informations ne seront visibles que par le prestataire sélectionné
                </div>
            </div>
        </div>

        {{-- ÉTAPE 7: Paramètres et récapitulatif --}}
        <div x-show="currentStep === 7" x-transition:enter class="wizard-step">
            <div class="step-header">
                <div class="step-icon"><i class="fas fa-check-circle"></i></div>
                <div class="step-info">
                    <h2>Derniers réglages</h2>
                    <p>Configurez les paramètres de votre appel d'offre</p>
                </div>
            </div>

            <div class="form-group">
                <label for="max_responses" class="form-label required">Nombre maximum de propositions</label>
                <div class="range-with-value">
                    <input type="range" 
                           id="max_responses" 
                           x-model.number="formData.max_responses"
                           min="1" 
                           max="50" 
                           step="1"
                           class="slider">
                    <div class="range-value">
                        <span x-text="formData.max_responses"></span> propositions
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="expires_days" class="form-label required">Durée de validité</label>
                <div class="expires-options">
                    <label class="expires-card" :class="{ 'selected': formData.expires_days === 7 }">
                        <input type="radio" name="expires_days" :value="7" x-model.number="formData.expires_days">
                        <span class="expires-value">7</span>
                        <span class="expires-label">jours</span>
                    </label>
                    <label class="expires-card" :class="{ 'selected': formData.expires_days === 14 }">
                        <input type="radio" name="expires_days" :value="14" x-model.number="formData.expires_days">
                        <span class="expires-value">14</span>
                        <span class="expires-label">jours</span>
                    </label>
                    <label class="expires-card" :class="{ 'selected': formData.expires_days === 30 }">
                        <input type="radio" name="expires_days" :value="30" x-model.number="formData.expires_days">
                        <span class="expires-value">30</span>
                        <span class="expires-label">jours</span>
                    </label>
                    <label class="expires-card" :class="{ 'selected': formData.expires_days === 60 }">
                        <input type="radio" name="expires_days" :value="60" x-model.number="formData.expires_days">
                        <span class="expires-value">60</span>
                        <span class="expires-label">jours</span>
                    </label>
                </div>
            </div>

            <div class="settings-toggles">
                <label class="toggle-setting">
                    <div class="toggle-info">
                        <span class="toggle-title">Matching automatique</span>
                        <span class="toggle-desc">Notifier automatiquement les prestataires correspondants</span>
                    </div>
                    <div class="toggle-switch">
                        <input type="checkbox" x-model="formData.auto_match">
                        <span class="toggle-slider"></span>
                    </div>
                </label>

                <label class="toggle-setting">
                    <div class="toggle-info">
                        <span class="toggle-title">Appel d'offre public</span>
                        <span class="toggle-desc">Visible par tous les prestataires (sinon uniquement les invités)</span>
                    </div>
                    <div class="toggle-switch">
                        <input type="checkbox" x-model="formData.public_visibility">
                        <span class="toggle-slider"></span>
                    </div>
                </label>
            </div>

            {{-- Récapitulatif --}}
            <div class="summary-card">
                <h3><i class="fas fa-clipboard-list"></i> Récapitulatif</h3>
                <div class="summary-grid">
                    <div class="summary-item">
                        <span class="summary-label">Titre</span>
                        <span class="summary-value" x-text="formData.title || '-'"></span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">Catégories</span>
                        <span class="summary-value" x-text="formData.categories.length + ' sélectionnée(s)'"></span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">Lieu</span>
                        <span class="summary-value" x-text="formData.city || '-'"></span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">Date souhaitée</span>
                        <span class="summary-value" x-text="formData.start_date || '-'"></span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">Budget</span>
                        <span class="summary-value" x-text="budgetDisplay"></span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">Médias</span>
                        <span class="summary-value" x-text="photos.length + ' photo(s), ' + documents.length + ' document(s)'"></span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Navigation --}}
        <div class="wizard-navigation">
            <button type="button" 
                    @click="previousStep" 
                    class="btn btn-outline"
                    x-show="currentStep > 1">
                <i class="fas fa-arrow-left"></i>
                Précédent
            </button>
            
            <div class="nav-spacer" x-show="currentStep === 1"></div>

            <div class="nav-actions">
                <button type="button" 
                        @click="saveDraft" 
                        class="btn btn-secondary"
                        :disabled="saving">
                    <i class="fas fa-save"></i>
                    Sauvegarder
                </button>

                <button type="submit" 
                        class="btn btn-primary"
                        :disabled="saving || !isStepValid"
                        x-show="currentStep < 7">
                    <span x-show="!saving">Suivant</span>
                    <span x-show="saving"><i class="fas fa-spinner fa-spin"></i> Sauvegarde...</span>
                    <i class="fas fa-arrow-right" x-show="!saving"></i>
                </button>

                <button type="button" 
                        @click="publishTender" 
                        class="btn btn-success btn-large"
                        :disabled="saving || !isStepValid"
                        x-show="currentStep === 7">
                    <i class="fas fa-rocket"></i>
                    Publier l'appel d'offre
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
function tenderWizard() {
    return {
        currentStep: 1,
        maxStep: {{ $draft ? $draft->form_step : 1 }},
        tenderId: {{ $draft ? $draft->id : 'null' }},
        saving: false,
        locating: false,
        dragOver: false,
        message: '',
        messageType: 'success',
        
        // Données du formulaire
        formData: {
            title: '{{ $draft->title ?? '' }}',
            description: '{{ $draft->description ?? '' }}',
            categories: {!! $draft && $draft->categories ? json_encode($draft->categories->pluck('id')) : '[]' !!},
            urgency: '{{ $draft->urgency ?? 'normal' }}',
            
            city: '{{ $draft->city ?? '' }}',
            address: '{{ $draft->address ?? '' }}',
            postal_code: '{{ $draft->postal_code ?? '' }}',
            radius_km: {{ $draft->radius_km ?? 25 }},
            latitude: {{ $draft->latitude ?? 'null' }},
            longitude: {{ $draft->longitude ?? 'null' }},
            
            start_date: '{{ $draft && $draft->start_date ? $draft->start_date->format('Y-m-d') : '' }}',
            end_date: '{{ $draft && $draft->end_date ? $draft->end_date->format('Y-m-d') : '' }}',
            preferred_time_start: '{{ $draft->preferred_time_start ?? '' }}',
            preferred_time_end: '{{ $draft->preferred_time_end ?? '' }}',
            flexible_dates: {{ $draft && $draft->flexible_dates ? 'true' : 'false' }},
            
            budget_min: {{ $draft->budget_min ?? 'null' }},
            budget_max: {{ $draft->budget_max ?? 'null' }},
            budget_type: '{{ $draft->budget_type ?? 'fixed' }}',
            budget_visible: {{ $draft && $draft->budget_visible ? 'true' : 'true' }},
            
            contact_name: '{{ $draft->contact_name ?? auth()->user()->name }}',
            contact_phone: '{{ $draft->contact_phone ?? '' }}',
            contact_email: '{{ $draft->contact_email ?? auth()->user()->email }}',
            contact_preference: '{{ $draft->contact_preference ?? 'messaging' }}',
            access_instructions: '{{ $draft->access_instructions ?? '' }}',
            
            max_responses: {{ $draft->max_responses ?? 10 }},
            auto_match: {{ $draft && isset($draft->auto_match) ? ($draft->auto_match ? 'true' : 'false') : 'true' }},
            public_visibility: {{ $draft && isset($draft->public_visibility) ? ($draft->public_visibility ? 'true' : 'false') : 'true' }},
            expires_days: 30,
        },
        
        // Fichiers
        photos: [],
        videos: [],
        documents: [],
        
        // Étapes
        steps: [
            { label: 'Description' },
            { label: 'Lieu' },
            { label: 'Dates' },
            { label: 'Budget' },
            { label: 'Médias' },
            { label: 'Contact' },
            { label: 'Validation' },
        ],
        
        get progressPercent() {
            return ((this.currentStep - 1) / (this.steps.length - 1)) * 100;
        },
        
        get minDate() {
            return new Date().toISOString().split('T')[0];
        },
        
        get budgetDisplay() {
            if (this.formData.budget_type === 'negotiable') return 'À négocier';
            if (!this.formData.budget_min && !this.formData.budget_max) return 'Non défini';
            if (this.formData.budget_min && this.formData.budget_max) {
                return this.formData.budget_min + '€ - ' + this.formData.budget_max + '€';
            }
            if (this.formData.budget_max) return 'Jusqu\'à ' + this.formData.budget_max + '€';
            return 'À partir de ' + this.formData.budget_min + '€';
        },
        
        get isStepValid() {
            switch (this.currentStep) {
                case 1:
                    return this.formData.title.length > 0 
                        && this.formData.description.length >= 50 
                        && this.formData.categories.length > 0;
                case 2:
                    return this.formData.city.length > 0;
                case 3:
                    return this.formData.start_date.length > 0;
                case 4:
                    return this.formData.budget_type.length > 0;
                case 5:
                    return true; // Médias optionnels
                case 6:
                    return this.formData.contact_preference.length > 0;
                case 7:
                    return this.formData.max_responses > 0;
                default:
                    return true;
            }
        },
        
        toggleCategory(id) {
            const index = this.formData.categories.indexOf(id);
            if (index > -1) {
                this.formData.categories.splice(index, 1);
            } else if (this.formData.categories.length < 3) {
                this.formData.categories.push(id);
            }
        },
        
        goToStep(step) {
            if (step <= this.maxStep) {
                this.currentStep = step;
            }
        },
        
        previousStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
            }
        },
        
        async submitCurrentStep() {
            await this.saveStep();
            if (this.currentStep < 7) {
                this.currentStep++;
                this.maxStep = Math.max(this.maxStep, this.currentStep);
            }
        },
        
        async saveStep() {
            this.saving = true;
            
            const formData = new FormData();
            formData.append('tender_id', this.tenderId || '');
            
            // Ajouter les données selon l'étape
            switch (this.currentStep) {
                case 1:
                    formData.append('title', this.formData.title);
                    formData.append('description', this.formData.description);
                    formData.append('urgency', this.formData.urgency);
                    this.formData.categories.forEach(cat => {
                        formData.append('categories[]', cat);
                    });
                    break;
                case 2:
                    formData.append('city', this.formData.city);
                    formData.append('address', this.formData.address);
                    formData.append('postal_code', this.formData.postal_code);
                    formData.append('radius_km', this.formData.radius_km);
                    if (this.formData.latitude) formData.append('latitude', this.formData.latitude);
                    if (this.formData.longitude) formData.append('longitude', this.formData.longitude);
                    break;
                case 3:
                    formData.append('start_date', this.formData.start_date);
                    formData.append('end_date', this.formData.end_date || '');
                    formData.append('preferred_time_start', this.formData.preferred_time_start);
                    formData.append('preferred_time_end', this.formData.preferred_time_end);
                    formData.append('flexible_dates', this.formData.flexible_dates ? 1 : 0);
                    break;
                case 4:
                    formData.append('budget_min', this.formData.budget_min || '');
                    formData.append('budget_max', this.formData.budget_max || '');
                    formData.append('budget_type', this.formData.budget_type);
                    formData.append('budget_visible', this.formData.budget_visible ? 1 : 0);
                    break;
                case 5:
                    // Upload des fichiers
                    this.photos.forEach((photo, index) => {
                        if (photo.file) formData.append('photos[]', photo.file);
                    });
                    this.videos.forEach((video, index) => {
                        if (video.file) formData.append('videos[]', video.file);
                    });
                    this.documents.forEach((doc, index) => {
                        if (doc.file) formData.append('documents[]', doc.file);
                    });
                    break;
                case 6:
                    formData.append('access_instructions', this.formData.access_instructions);
                    formData.append('contact_name', this.formData.contact_name);
                    formData.append('contact_phone', this.formData.contact_phone);
                    formData.append('contact_email', this.formData.contact_email);
                    formData.append('contact_preference', this.formData.contact_preference);
                    break;
                case 7:
                    formData.append('max_responses', this.formData.max_responses);
                    formData.append('auto_match', this.formData.auto_match ? 1 : 0);
                    formData.append('public_visibility', this.formData.public_visibility ? 1 : 0);
                    formData.append('expires_days', this.formData.expires_days);
                    break;
            }
            
            try {
                const response = await fetch(`/client/tenders/step/${this.currentStep}`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    this.tenderId = result.tender_id;
                    this.showMessage('Étape sauvegardée', 'success');
                } else {
                    this.showMessage(result.message || 'Erreur lors de la sauvegarde', 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                this.showMessage('Erreur de connexion', 'error');
            }
            
            this.saving = false;
        },
        
        async saveDraft() {
            await this.saveStep();
        },
        
        async publishTender() {
            if (!this.tenderId) {
                this.showMessage('Veuillez d\'abord sauvegarder votre appel d\'offre', 'error');
                return;
            }
            
            this.saving = true;
            
            try {
                const response = await fetch(`/client/tenders/${this.tenderId}/publish`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    }
                });
                
                if (response.redirected) {
                    window.location.href = response.url;
                } else {
                    const result = await response.json();
                    if (result.success) {
                        window.location.href = `/client/tenders/${this.tenderId}`;
                    } else {
                        this.showMessage(result.message || 'Erreur lors de la publication', 'error');
                    }
                }
            } catch (error) {
                console.error('Error:', error);
                this.showMessage('Erreur de connexion', 'error');
            }
            
            this.saving = false;
        },
        
        locateMe() {
            if (!navigator.geolocation) {
                this.showMessage('La géolocalisation n\'est pas supportée', 'error');
                return;
            }
            
            this.locating = true;
            
            navigator.geolocation.getCurrentPosition(
                async (position) => {
                    this.formData.latitude = position.coords.latitude;
                    this.formData.longitude = position.coords.longitude;
                    
                    // Essayer de récupérer le nom de la ville
                    try {
                        const response = await fetch(`/api/reverse-geocode?lat=${position.coords.latitude}&lng=${position.coords.longitude}`);
                        const data = await response.json();
                        if (data.city) {
                            this.formData.city = data.city;
                        }
                        if (data.postal_code) {
                            this.formData.postal_code = data.postal_code;
                        }
                    } catch (e) {
                        console.log('Reverse geocode failed');
                    }
                    
                    this.locating = false;
                    this.showMessage('Position récupérée', 'success');
                },
                (error) => {
                    this.locating = false;
                    this.showMessage('Impossible de récupérer votre position', 'error');
                }
            );
        },
        
        handlePhotoUpload(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (this.photos.length < 10 && file.size <= 5 * 1024 * 1024) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.photos.push({
                            file: file,
                            name: file.name,
                            preview: e.target.result
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });
        },
        
        handlePhotoDrop(event) {
            this.dragOver = false;
            const files = Array.from(event.dataTransfer.files).filter(f => f.type.startsWith('image/'));
            files.forEach(file => {
                if (this.photos.length < 10 && file.size <= 5 * 1024 * 1024) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.photos.push({
                            file: file,
                            name: file.name,
                            preview: e.target.result
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });
        },
        
        removePhoto(index) {
            this.photos.splice(index, 1);
        },
        
        handleVideoUpload(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (this.videos.length < 3 && file.size <= 50 * 1024 * 1024) {
                    this.videos.push({
                        file: file,
                        name: file.name
                    });
                }
            });
        },
        
        removeVideo(index) {
            this.videos.splice(index, 1);
        },
        
        handleDocUpload(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (this.documents.length < 10 && file.size <= 10 * 1024 * 1024) {
                    this.documents.push({
                        file: file,
                        name: file.name
                    });
                }
            });
        },
        
        removeDocument(index) {
            this.documents.splice(index, 1);
        },
        
        showMessage(msg, type) {
            this.message = msg;
            this.messageType = type;
            setTimeout(() => {
                this.message = '';
            }, 5000);
        }
    }
}
</script>
@endsection