@extends('layouts.app')

@section('title', 'Modifier l\'annonce')

@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">✏️ Modifier l'annonce</h1>
            <div></div>
        </div>

        {{-- Formulaire --}}
        <form action="{{ route('client.my-urgent-sales.update', $urgentSale) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')
            
            <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', $urgentSale->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"
                           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"
                              required>{{ old('description', $urgentSale->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', $urgentSale->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"
                           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="new" {{ old('condition', $urgentSale->condition) == 'new' ? 'selected' : '' }}>Neuf</option>
                        <option value="good" {{ old('condition', $urgentSale->condition) == 'good' ? 'selected' : '' }}>Bon état</option>
                        <option value="used" {{ old('condition', $urgentSale->condition) == 'used' ? 'selected' : '' }}>Usagé</option>
                        <option value="fair" {{ old('condition', $urgentSale->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>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id', $urgentSale->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', $urgentSale->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="Entrez une ville..." autocomplete="off" required>
                            <div id="location-suggestions" class="absolute left-0 right-0 top-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-50 hidden max-h-48 overflow-y-auto">
                            </div>
                        </div>
                        <button type="button" id="geolocBtn" 
                                class="px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition flex items-center gap-1"
                                title="Utiliser ma position">
                            <i class="fas fa-location-arrow" id="geolocIcon"></i>
                            <span class="hidden" id="geolocSpinner"><i class="fas fa-spinner fa-spin"></i></span>
                        </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', $urgentSale->latitude) }}">
                    <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $urgentSale->longitude) }}">
                </div>

                {{-- Photos existantes --}}
                @if($urgentSale->photos && count($urgentSale->photos) > 0)
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Photos actuelles</label>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        @foreach($urgentSale->photos as $photo)
                        <div class="relative">
                            <img src="{{ asset('storage/' . $photo) }}" alt="" class="w-full h-20 object-cover rounded">
                            <label class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center cursor-pointer">
                                <input type="checkbox" name="delete_photos[]" value="{{ $photo }}" class="hidden">
                                <i class="fas fa-times text-xs"></i>
                            </label>
                        </div>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Cliquez sur ✕ pour supprimer une photo</p>
                </div>
                @endif

                {{-- Nouvelles photos --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Ajouter des photos</label>
                    <input type="file" name="new_photos[]" id="new_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. Total max 5 photos.</p>
                    @error('new_photos')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>

            {{-- Boutons --}}
            <div class="flex gap-3">
                <a href="{{ route('client.my-urgent-sales.index') }}" 
                   class="flex-1 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-xl transition text-center">
                    Annuler
                </a>
                <button type="submit" 
                        class="flex-1 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl transition">
                    Enregistrer
                </button>
            </div>

        </form>

    </div>
</div>

<script>
// Gérer la suppression des photos
document.querySelectorAll('input[name="delete_photos[]"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const parent = this.closest('.relative');
        if (this.checked) {
            parent.classList.add('opacity-50');
        } else {
            parent.classList.remove('opacity-50');
        }
    });
});

// Autocomplétion de la localisation
const locationInput = document.getElementById('location');
const suggestionsBox = document.getElementById('location-suggestions');
const latitudeInput = document.getElementById('latitude');
const longitudeInput = document.getElementById('longitude');
const geolocBtn = document.getElementById('geolocBtn');
const geolocIcon = document.getElementById('geolocIcon');
const geolocSpinner = document.getElementById('geolocSpinner');

let searchTimeout = null;

// Recherche de villes via l'API interne puis Nominatim en fallback
async function searchCities(query) {
    if (query.length < 2) {
        suggestionsBox.classList.add('hidden');
        return;
    }

    try {
        // Essayer d'abord l'API interne
        let response = await fetch(`/api/public/geolocation/cities?search=${encodeURIComponent(query)}`);
        let data = await response.json();
        
        if (data.cities && data.cities.length > 0) {
            displaySuggestions(data.cities.map(city => ({
                name: city.name + (city.postal_code ? ` (${city.postal_code})` : ''),
                lat: city.latitude,
                lon: city.longitude
            })));
            return;
        }
    } catch (e) {
        console.log('API interne non disponible, utilisation de Nominatim');
    }

    // Fallback Nominatim (OpenStreetMap)
    try {
        const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=fr&limit=5`);
        const data = await response.json();
        
        if (data.length > 0) {
            displaySuggestions(data.map(place => ({
                name: place.display_name.split(',').slice(0, 2).join(','),
                lat: place.lat,
                lon: place.lon
            })));
        } else {
            suggestionsBox.classList.add('hidden');
        }
    } catch (e) {
        console.error('Erreur recherche:', e);
        suggestionsBox.classList.add('hidden');
    }
}

function displaySuggestions(suggestions) {
    suggestionsBox.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 last:border-b-0';
        div.textContent = suggestion.name;
        div.addEventListener('click', () => {
            locationInput.value = suggestion.name;
            latitudeInput.value = suggestion.lat;
            longitudeInput.value = suggestion.lon;
            suggestionsBox.classList.add('hidden');
        });
        suggestionsBox.appendChild(div);
    });
    suggestionsBox.classList.remove('hidden');
}

// Événement sur l'input
locationInput.addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        searchCities(this.value);
    }, 300);
});

// Fermer les suggestions si on clique ailleurs
document.addEventListener('click', function(e) {
    if (!locationInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
        suggestionsBox.classList.add('hidden');
    }
});

// Géolocalisation
geolocBtn.addEventListener('click', function() {
    if (!navigator.geolocation) {
        alert('La géolocalisation n\'est pas supportée par votre navigateur');
        return;
    }

    // Afficher le spinner
    geolocIcon.classList.add('hidden');
    geolocSpinner.classList.remove('hidden');
    geolocBtn.disabled = true;

    navigator.geolocation.getCurrentPosition(
        async function(position) {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;

            latitudeInput.value = lat;
            longitudeInput.value = lon;

            // Reverse geocoding pour obtenir le nom de la ville
            try {
                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
                const data = await response.json();
                
                if (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})` : '');
                }
            } catch (e) {
                locationInput.value = `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
            }

            // Cacher le spinner
            geolocIcon.classList.remove('hidden');
            geolocSpinner.classList.add('hidden');
            geolocBtn.disabled = false;
        },
        function(error) {
            alert('Impossible d\'obtenir votre position: ' + error.message);
            geolocIcon.classList.remove('hidden');
            geolocSpinner.classList.add('hidden');
            geolocBtn.disabled = false;
        },
        { enableHighAccuracy: true, timeout: 10000 }
    );
});
</script>
@endsection