@extends('layouts.app')

@section('content')
<div class="bg-blue-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
        <div class="max-w-4xl mx-auto">
            <!-- En-tête -->
            <div class="mb-4 sm:mb-6 lg:mb-8 text-center">
                <h1 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-extrabold text-blue-900 mb-1 sm:mb-2">Créer un nouveau service</h1>
                <p class="text-sm sm:text-base lg:text-lg text-blue-700">Étape 3 : Photos</p>
            </div>

            <!-- Indicateur d'étapes -->
            <div class="bg-white rounded-xl shadow-lg border border-blue-200 p-3 sm:p-4 lg:p-6 mb-4 sm:mb-6">
                <div class="flex items-center justify-between mb-3 sm:mb-4">
                    <div class="flex items-center space-x-2 sm:space-x-3 lg:space-x-4">
                        <a href="{{ route('prestataire.services.create.step2') }}" class="text-blue-600 hover:text-blue-900 transition-colors duration-200">
                            <i class="fas fa-arrow-left text-base sm:text-lg lg:text-xl"></i>
                        </a>
                        <div>
                            <h2 class="text-base sm:text-lg lg:text-xl font-bold text-blue-900">Étape 3 sur 4</h2>
                            <p class="text-xs sm:text-sm lg:text-base text-blue-700 hidden sm:block">Photos</p>
                        </div>
                    </div>
                </div>
                
                <!-- Barre de progression -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-1 sm:space-x-2 lg:space-x-4 w-full overflow-x-auto">
                        <div class="flex items-center flex-shrink-0">
                            <div class="w-6 h-6 sm:w-8 sm:h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-xs sm:text-sm font-bold">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <span class="ml-1 sm:ml-2 text-xs sm:text-sm font-medium text-green-600 hidden sm:inline">Informations</span>
                            <span class="ml-1 text-xs font-medium text-green-600 sm:hidden">Info</span>
                        </div>
                        <div class="flex-1 h-1 bg-gray-200 rounded min-w-4">
                            <div class="h-1 bg-green-600 rounded" style="width: 100%"></div>
                        </div>
                        <div class="flex items-center flex-shrink-0">
                            <div class="w-6 h-6 sm:w-8 sm:h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-xs sm:text-sm font-bold">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <span class="ml-1 sm:ml-2 text-xs sm:text-sm font-medium text-green-600 hidden sm:inline">Prix & Catégorie</span>
                            <span class="ml-1 text-xs font-medium text-green-600 sm:hidden">Prix</span>
                        </div>
                        <div class="flex-1 h-1 bg-gray-200 rounded min-w-4">
                            <div class="h-1 bg-blue-600 rounded" style="width: 75%"></div>
                        </div>
                        <div class="flex items-center flex-shrink-0">
                            <div class="w-6 h-6 sm:w-8 sm:h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs sm:text-sm font-bold">
                                3
                            </div>
                            <span class="ml-1 sm:ml-2 text-xs sm:text-sm font-medium text-blue-600 hidden sm:inline">Photos</span>
                            <span class="ml-1 text-xs font-medium text-blue-600 sm:hidden">Photo</span>
                        </div>
                        <div class="flex-1 h-1 bg-gray-200 rounded min-w-4">
                            <div class="h-1 bg-gray-200 rounded" style="width: 0%"></div>
                        </div>
                        <div class="flex items-center flex-shrink-0">
                            <div class="w-6 h-6 sm:w-8 sm:h-8 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold">
                                4
                            </div>
                            <span class="ml-1 sm:ml-2 text-xs sm:text-sm font-medium text-gray-500 hidden sm:inline">Localisation</span>
                            <span class="ml-1 text-xs font-medium text-gray-500 sm:hidden">Lieu</span>
                        </div>
                    </div>
                </div>
            </div>

            @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-400 p-3 sm:p-4 mb-4 sm:mb-6 rounded-r-lg" role="alert">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">Veuillez corriger les erreurs suivantes :</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc pl-5 space-y-1">
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <form method="POST" action="{{ route('prestataire.services.create.step3.store') }}" enctype="multipart/form-data" id="step3Form">
                @csrf

                <!-- Photos -->
                <div class="bg-white rounded-xl shadow-lg border border-blue-200 p-3 sm:p-4 lg:p-6 mb-4 sm:mb-6">
                    <h2 class="text-base sm:text-lg lg:text-xl font-bold text-blue-900 mb-3 sm:mb-4 border-b border-blue-200 pb-2">
                        <i class="fas fa-camera text-purple-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>Photos de votre service
                    </h2>
                    
                    <div class="mb-3 sm:mb-4">
                        <p class="text-xs sm:text-sm text-blue-700 mb-2">
                            <i class="fas fa-info-circle mr-1 text-xs sm:text-sm"></i>
                            Ajoutez des photos de qualité pour présenter votre service. Les photos aident les clients à mieux comprendre ce que vous proposez.
                        </p>
                        <div class="bg-blue-50 p-2 sm:p-3 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-1 sm:mb-2 text-xs sm:text-sm">Conseils pour de bonnes photos :</h4>
                            <ul class="text-xs sm:text-sm text-blue-700 space-y-0.5 sm:space-y-1">
                                <li>• Utilisez un bon éclairage naturel</li>
                                <li>• Montrez votre travail sous différents angles</li>
                                <li>• Incluez des photos avant/après si applicable</li>
                                <li>• Évitez les photos floues ou sombres</li>
                                <li>• Vous pouvez réorganiser l'ordre en glissant-déposant les photos</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="border-2 border-dashed border-blue-300 rounded-lg p-3 sm:p-4 lg:p-6 text-center bg-blue-50 hover:border-blue-400 transition-colors" id="dropZone">
                        <input type="file" id="images" name="images[]" multiple accept="image/jpeg,image/png,image/gif,image/webp" style="position:absolute;left:-9999px;opacity:0">
                        
                        <div id="upload-area">
                            <i class="fas fa-cloud-upload-alt text-blue-400 text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 lg:mb-4"></i>
                            <p class="text-blue-600 mb-2 text-xs sm:text-sm lg:text-base font-semibold">Ajoutez des photos de votre service</p>
                            <p class="text-blue-500 text-xs sm:text-sm mb-3">Maximum 5 photos • JPG, PNG, GIF • 5MB max</p>
                            <label for="images" style="display:inline-block;padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:white;border-radius:10px;font-weight:600;font-size:0.9rem;cursor:pointer;box-shadow:0 4px 12px rgba(59,130,246,0.4)">
                                <i class="fas fa-camera" style="margin-right:6px"></i> Choisir des photos
                            </label>
                        </div>
                        
                        <!-- Aperçu des images sélectionnées -->
                        <div id="image-preview" class="hidden mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4"></div>
                    </div>
                    
                    @error('images')
                        <p class="text-red-500 text-xs sm:text-sm mt-1 sm:mt-2">{{ $message }}</p>
                    @enderror
                    @error('images.*')
                        <p class="text-red-500 text-xs sm:text-sm mt-1 sm:mt-2">{{ $message }}</p>
                    @enderror
                    
                    <div class="mt-3 sm:mt-4 p-2 sm:p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                        <p class="text-xs sm:text-sm text-yellow-800">
                            <i class="fas fa-lightbulb mr-1 text-xs sm:text-sm"></i>
                            <strong>Optionnel :</strong> Vous pouvez passer cette étape et ajouter des photos plus tard depuis votre tableau de bord.
                        </p>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex flex-col sm:flex-row justify-between items-center pt-4 sm:pt-6 lg:pt-8 border-t border-blue-200 space-y-3 sm:space-y-0">
                    <a href="{{ route('prestataire.services.create.step2') }}" class="w-full sm:w-auto bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 px-3 sm:px-4 lg:px-6 py-2.5 sm:py-3 rounded-lg transition duration-200 font-medium text-center text-xs sm:text-sm lg:text-base">
                        <i class="fas fa-arrow-left mr-1 sm:mr-2 text-xs sm:text-sm"></i><span class="hidden xs:inline">Précédent</span><span class="xs:hidden">Retour</span>
                    </a>
                    <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 lg:space-x-3 w-full sm:w-auto">
                        <button type="button" onclick="skipPhotos()" class="w-full sm:w-auto bg-yellow-500 hover:bg-yellow-600 text-white px-3 sm:px-4 lg:px-6 py-2.5 sm:py-3 rounded-lg transition duration-200 font-medium text-xs sm:text-sm lg:text-base">
                            <i class="fas fa-forward mr-1 sm:mr-2 text-xs sm:text-sm"></i><span class="hidden xs:inline">Passer cette étape</span><span class="xs:hidden">Passer</span>
                        </button>
                        <button type="submit" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 sm:px-6 lg:px-8 py-2.5 sm:py-3 rounded-lg transition duration-200 font-semibold shadow-lg hover:shadow-xl text-xs sm:text-sm lg:text-base">
                            <span class="hidden xs:inline">Suivant : Localisation</span><span class="xs:hidden">Suivant</span><i class="fas fa-arrow-right ml-1 sm:ml-2 text-xs sm:text-sm"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const imageInput = document.getElementById('images');
    const previewContainer = document.getElementById('image-preview');
    const uploadArea = document.getElementById('upload-area');
    let existingFiles = [];

    // Seul handler pour l'input file
    imageInput.addEventListener('change', function() {
        handleFiles(this);
    });

    // Aussi appelé par onchange HTML (au cas où)
    window.previewImages = function(input) {
        handleFiles(input);
    };

    function handleFiles(input) {
        if (!input.files || input.files.length === 0) {
            resetDisplay();
            return;
        }

        const files = Array.from(input.files).slice(0, 5);
        const maxSize = 5 * 1024 * 1024;
        let errors = [];

        // Validation
        files.forEach(file => {
            if (!file.type.startsWith('image/')) {
                errors.push(file.name + ' : format non supporté');
            }
            if (file.size > maxSize) {
                errors.push(file.name + ' : trop volumineux (' + (file.size / 1024 / 1024).toFixed(1) + 'MB)');
            }
        });

        if (errors.length > 0) {
            showNotification('Erreur', errors, 'error');
            // Ne PAS vider l'input ici, laisser l'utilisateur réessayer
            resetDisplay();
            return;
        }

        existingFiles = files;
        previewContainer.innerHTML = '';
        previewContainer.classList.remove('hidden');
        uploadArea.classList.add('hidden');

        files.forEach((file, index) => {
            const div = document.createElement('div');
            div.className = 'relative group bg-white rounded-lg shadow-md overflow-hidden border border-gray-200';
            div.style.cssText = 'position:relative;';

            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            // NE PAS révoquer l'URL — sinon l'image disparaît
            img.style.cssText = 'width:100%;height:120px;object-fit:cover;display:block;';

            const label = document.createElement('div');
            label.style.cssText = 'position:absolute;bottom:4px;left:4px;background:#2563eb;color:white;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;';
            label.textContent = 'Photo ' + (index + 1);

            const removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.style.cssText = 'position:absolute;top:4px;right:4px;background:#ef4444;color:white;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;';
            removeBtn.innerHTML = '✕';
            removeBtn.onclick = function() { removeImage(index); };

            div.appendChild(img);
            div.appendChild(label);
            div.appendChild(removeBtn);
            previewContainer.appendChild(div);
        });

        // Bouton ajouter plus
        if (files.length < 5) {
            const addMore = document.createElement('div');
            addMore.style.cssText = 'display:flex;align-items:center;justify-content:center;height:120px;border:2px dashed #93c5fd;border-radius:8px;cursor:pointer;background:#f0f9ff;';
            addMore.innerHTML = '<div style="text-align:center"><div style="font-size:24px;color:#60a5fa">+</div><div style="font-size:12px;color:#3b82f6;font-weight:600">Ajouter</div><div style="font-size:11px;color:#9ca3af">' + (5 - files.length) + ' restante(s)</div></div>';
            addMore.onclick = function(e) {
                e.preventDefault();
                // Créer un nouvel input temporaire pour ajouter plus
                const tempInput = document.createElement('input');
                tempInput.type = 'file';
                tempInput.multiple = true;
                tempInput.accept = 'image/jpeg,image/png,image/gif,image/webp';
                tempInput.onchange = function() {
                    const combined = new DataTransfer();
                    existingFiles.forEach(f => { if (combined.files.length < 5) combined.items.add(f); });
                    Array.from(this.files).forEach(f => { if (combined.files.length < 5) combined.items.add(f); });
                    imageInput.files = combined.files;
                    handleFiles(imageInput);
                };
                tempInput.click();
            };
            previewContainer.appendChild(addMore);
        }

        showNotification('Photos ajoutées', [files.length + ' photo(s) sélectionnée(s)'], 'success');
    }

    window.removeImage = function(index) {
        const dt = new DataTransfer();
        for (let i = 0; i < imageInput.files.length; i++) {
            if (i !== index) dt.items.add(imageInput.files[i]);
        }
        imageInput.files = dt.files;
        handleFiles(imageInput);
    };

    function resetDisplay() {
        previewContainer.innerHTML = '';
        previewContainer.classList.add('hidden');
        uploadArea.classList.remove('hidden');
    }

    // Anti double-submit
    document.getElementById('step3Form').addEventListener('submit', function() {
        const btn = this.querySelector('button[type="submit"]');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Envoi...';
        }
    });

    // Skip photos
    window.skipPhotos = function() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("prestataire.services.create.step3.store") }}';
        const csrf = document.createElement('input');
        csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = '{{ csrf_token() }}';
        const skip = document.createElement('input');
        skip.type = 'hidden'; skip.name = 'skip_photos'; skip.value = '1';
        form.appendChild(csrf);
        form.appendChild(skip);
        document.body.appendChild(form);
        form.submit();
    };

    // Notification
    function showNotification(title, messages, type) {
        const existing = document.querySelectorAll('.upload-notif');
        existing.forEach(n => n.remove());

        const div = document.createElement('div');
        div.className = 'upload-notif';
        const bg = type === 'error' ? '#fef2f2' : '#f0fdf4';
        const border = type === 'error' ? '#fca5a5' : '#86efac';
        const color = type === 'error' ? '#991b1b' : '#166534';
        div.style.cssText = 'position:fixed;top:16px;right:16px;max-width:350px;background:' + bg + ';border:1px solid ' + border + ';border-radius:8px;padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:9999;color:' + color + ';font-size:14px;';
        div.innerHTML = '<strong>' + title + '</strong><br>' + messages.join('<br>');
        document.body.appendChild(div);
        setTimeout(() => div.remove(), 4000);
    }

    // Drag & drop (desktop)
    const dropZone = document.getElementById('dropZone');
    if (dropZone) {
        ['dragover', 'drop'].forEach(evt => {
            dropZone.addEventListener(evt, function(e) { e.preventDefault(); e.stopPropagation(); });
        });
        dropZone.addEventListener('drop', function(e) {
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const combined = new DataTransfer();
                for (let i = 0; i < imageInput.files.length && combined.files.length < 5; i++) combined.items.add(imageInput.files[i]);
                for (let i = 0; i < files.length && combined.files.length < 5; i++) combined.items.add(files[i]);
                imageInput.files = combined.files;
                handleFiles(imageInput);
            }
        });
    }
});
</script>
@endpush