@extends('layouts.app')

@section('title', 'Nouvelle annonce vente flash')

@section('content')
<div class="min-h-screen bg-gray-50 py-4 px-3">
    <div class="max-w-lg mx-auto">
        
        {{-- Header --}}
        <div class="flex items-center justify-between mb-4">
            <a href="{{ route('client.my-urgent-sales.index') }}" class="text-blue-600 hover:underline text-sm flex items-center gap-1">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
            <h1 class="text-lg font-bold text-gray-800">➕ Nouvelle annonce</h1>
            <div></div>
        </div>

        {{-- Info emplacements --}}
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
            <p class="text-sm text-blue-800">
                <i class="fas fa-info-circle"></i>
                Il vous reste <strong>{{ $remainingSlots }}</strong> emplacement(s) disponible(s) sur 5.
            </p>
        </div>

        {{-- Formulaire --}}
        <form action="{{ route('client.my-urgent-sales.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            
            <div class="bg-white rounded-xl shadow-sm border p-4 space-y-4">
                
                {{-- Titre --}}
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Titre *</label>
                    <input type="text" name="title" id="title" value="{{ old('title') }}" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Ex: iPhone 12 Pro 128Go" required>
                    @error('title')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Description --}}
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                    <textarea name="description" id="description" rows="4" 
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="Décrivez votre article en détail..." required>{{ old('description') }}</textarea>
                    @error('description')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Prix --}}
                <div>
                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Prix (€) *</label>
                    <input type="number" name="price" id="price" value="{{ old('price') }}" 
                           step="0.01" min="0.01" max="10000"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="29.99" required>
                    @error('price')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- État --}}
                <div>
                    <label for="condition" class="block text-sm font-medium text-gray-700 mb-1">État *</label>
                    <select name="condition" id="condition" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                        <option value="">Sélectionner...</option>
                        <option value="new" {{ old('condition') == 'new' ? 'selected' : '' }}>Neuf</option>
                        <option value="good" {{ old('condition') == 'good' ? 'selected' : '' }}>Bon état</option>
                        <option value="used" {{ old('condition') == 'used' ? 'selected' : '' }}>Usagé</option>
                        <option value="fair" {{ old('condition') == 'fair' ? 'selected' : '' }}>État correct</option>
                    </select>
                    @error('condition')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Catégorie --}}
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">Catégorie *</label>
                    <select name="category_id" id="category_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                        <option value="">Sélectionner...</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('category_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Localisation avec autocomplétion --}}
                <div class="relative">
                    <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Localisation *</label>
                    <div class="flex gap-2">
                        <div class="flex-1 relative">
                            <input type="text" name="location" id="location" value="{{ old('location') }}" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="Tapez une ville..." required autocomplete="off">
                            <div id="location-suggestions" class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-lg shadow-xl mt-1 hidden max-h-48 overflow-y-auto z-50">
                                <!-- Suggestions -->
                            </div>
                        </div>
                        <button type="button" id="geolocBtn" class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition flex items-center justify-center" title="Ma position">
                            <i class="fas fa-location-arrow"></i>
                        </button>
                    </div>
                    @error('location')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude') }}">
                    <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude') }}">
                </div>

                {{-- Photos --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Photos (max 5)</label>
                    <input type="file" name="photos[]" id="photos" multiple accept="image/*"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-500 mt-1">JPG, PNG ou WebP. Max 5 Mo par photo.</p>
                    @error('photos')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @error('photos.*')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>

            {{-- Info paiement --}}
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                <p class="text-sm text-yellow-800">
                    <i class="fas fa-info-circle"></i>
                    Les acheteurs vous contacteront directement. Le paiement se fera en main propre.
                </p>
            </div>

            {{-- Bouton publier --}}
            <button type="submit" 
                    class="w-full py-3 bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl transition flex items-center justify-center gap-2">
                <i class="fas fa-check"></i>
                Publier l'annonce
            </button>

        </form>

    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const locationInput = document.getElementById('location');
    const suggestionsContainer = document.getElementById('location-suggestions');
    const latitudeInput = document.getElementById('latitude');
    const longitudeInput = document.getElementById('longitude');
    const geolocBtn = document.getElementById('geolocBtn');
    
    let autocompleteTimeout;
    
    // Autocomplétion de la localisation
    locationInput.addEventListener('input', function() {
        clearTimeout(autocompleteTimeout);
        const query = this.value.trim();
        
        if (query.length >= 2) {
            autocompleteTimeout = setTimeout(() => fetchSuggestions(query), 300);
        } else {
            hideSuggestions();
        }
    });
    
    // Fermer les suggestions au clic ailleurs
    document.addEventListener('click', function(e) {
        if (!locationInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
            hideSuggestions();
        }
    });
    
    // Bouton géolocalisation
    geolocBtn.addEventListener('click', function() {
        if (navigator.geolocation) {
            geolocBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;
                    
                    latitudeInput.value = lat.toFixed(6);
                    longitudeInput.value = lon.toFixed(6);
                    
                    // Reverse geocoding pour obtenir l'adresse
                    fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&zoom=10&addressdetails=1`, {
                        headers: { 'User-Agent': 'TaPrestation/1.0' }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.address) {
                            const city = data.address.city || data.address.town || data.address.village || data.address.municipality || '';
                            const postcode = data.address.postcode || '';
                            locationInput.value = city + (postcode ? ` (${postcode})` : '');
                        } else {
                            locationInput.value = `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
                        }
                        geolocBtn.innerHTML = '<i class="fas fa-location-arrow"></i>';
                    })
                    .catch(error => {
                        console.error('Reverse geocoding error:', error);
                        locationInput.value = `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
                        geolocBtn.innerHTML = '<i class="fas fa-location-arrow"></i>';
                    });
                },
                function(error) {
                    console.error('Geolocation error:', error);
                    alert('Impossible de récupérer votre position. Vérifiez les permissions.');
                    geolocBtn.innerHTML = '<i class="fas fa-location-arrow"></i>';
                }
            );
        } else {
            alert('La géolocalisation n\'est pas supportée par votre navigateur.');
        }
    });
    
    function fetchSuggestions(query) {
        // Essayer d'abord l'API interne
        fetch(`/api/public/geolocation/cities?search=${encodeURIComponent(query)}&limit=8`)
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    displaySuggestions(data.map(city => ({
                        name: city.name || city.city,
                        postcode: city.postal_code || city.postcode || '',
                        lat: city.latitude || city.lat,
                        lon: city.longitude || city.lon || city.lng
                    })));
                } else {
                    // Fallback vers Nominatim
                    fetchNominatimSuggestions(query);
                }
            })
            .catch(() => {
                fetchNominatimSuggestions(query);
            });
    }
    
    function fetchNominatimSuggestions(query) {
        fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}, France&limit=8&addressdetails=1`, {
            headers: { 'User-Agent': 'TaPrestation/1.0' }
        })
        .then(response => response.json())
        .then(data => {
            if (data && data.length > 0) {
                displaySuggestions(data.map(item => ({
                    name: item.address?.city || item.address?.town || item.address?.village || item.display_name.split(',')[0],
                    postcode: item.address?.postcode || '',
                    lat: parseFloat(item.lat),
                    lon: parseFloat(item.lon)
                })));
            } else {
                hideSuggestions();
            }
        })
        .catch(() => hideSuggestions());
    }
    
    function displaySuggestions(suggestions) {
        suggestionsContainer.innerHTML = '';
        
        suggestions.forEach(suggestion => {
            const div = document.createElement('div');
            div.className = 'px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm border-b border-gray-100 last:border-0';
            div.innerHTML = `
                <div class="font-medium text-gray-800">${suggestion.name}</div>
                ${suggestion.postcode ? `<div class="text-xs text-gray-500">${suggestion.postcode}</div>` : ''}
            `;
            
            div.addEventListener('click', function() {
                locationInput.value = suggestion.name + (suggestion.postcode ? ` (${suggestion.postcode})` : '');
                latitudeInput.value = suggestion.lat;
                longitudeInput.value = suggestion.lon;
                hideSuggestions();
            });
            
            suggestionsContainer.appendChild(div);
        });
        
        suggestionsContainer.classList.remove('hidden');
    }
    
    function hideSuggestions() {
        suggestionsContainer.classList.add('hidden');
    }
});
</script>
@endpush