@extends('layouts.app')

@section('title', 'Ajouter un équipement - Étape 3')

@section('content')
<div class="bg-green-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-6 sm:mb-8 text-center">
                <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-green-900 mb-2">Ajouter un équipement</h1>
                <p class="text-base sm:text-lg text-green-700">Étape 3 : Photos</p>
            </div>

            <!-- Barre de progression -->
            <div class="bg-white rounded-xl shadow-lg border border-green-200 p-4 sm:p-6 mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-green-900">Processus de création</h2>
                    <span class="text-sm text-green-600">Étape 3 sur 4</span>
                </div>
                <div class="flex items-center space-x-2 sm:space-x-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                            ✓
                        </div>
                        <span class="ml-2 text-sm font-medium text-green-900">Informations de base</span>
                    </div>
                    <div class="flex-1 h-1 bg-green-600 rounded"></div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                            ✓
                        </div>
                        <span class="ml-2 text-sm font-medium text-green-900">Tarifs et conditions</span>
                    </div>
                    <div class="flex-1 h-1 bg-green-600 rounded"></div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
                            3
                        </div>
                        <span class="ml-2 text-sm font-medium text-green-900">Photos</span>
                    </div>
                    <div class="flex-1 h-1 bg-gray-200 rounded"></div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
                            4
                        </div>
                        <span class="ml-2 text-sm font-medium text-gray-500">Localisation et résumé</span>
                    </div>
                </div>
            </div>

            <!-- Formulaire Étape 3 -->
            <div class="bg-white rounded-xl shadow-lg border border-green-200 p-4 sm:p-6">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 sm:mb-6 space-y-3 sm:space-y-0">
                    <div class="flex items-center space-x-3">
                        <a href="{{ route('prestataire.equipment.create.step2') }}" class="text-green-600 hover:text-green-900 transition-colors duration-200 p-1">
                            <i class="fas fa-arrow-left text-base sm:text-lg"></i>
                        </a>
                        <div>
                            <h2 class="text-lg sm:text-xl font-bold text-green-900">Photos de l'équipement</h2>
                            <p class="text-xs sm:text-sm text-green-700">Ajoutez une photo principale de votre équipement</p>
                        </div>
                    </div>
                </div>

                @if ($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
                        <strong class="font-bold">Oups!</strong>
                        <span class="block sm:inline">Quelque chose s'est mal passé.</span>
                        <ul class="mt-2">
                            @foreach ($errors->all() as $error)
                                <li>- {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('prestataire.equipment.store.step3') }}" method="POST" enctype="multipart/form-data" id="step3Form">
                    @csrf
                    
                    <div class="space-y-4 sm:space-y-6">
                        <!-- Photos -->
                        <div>
                            <h3 class="text-base sm:text-lg font-semibold text-green-900 mb-3 sm:mb-4">Photos de l'équipement *</h3>
                            <div id="dropZone" class="border-2 border-dashed border-green-300 rounded-lg p-4 sm:p-6 text-center hover:border-green-400 transition-colors">
                                <input type="file" name="photos[]" id="photos" multiple accept="image/*" style="position:absolute;left:-9999px;opacity:0;width:1px;height:1px;">
                                <label for="photos" id="upload-area" class="cursor-pointer block">
                                    <i class="fas fa-cloud-upload-alt text-green-400 text-2xl sm:text-4xl mb-2 sm:mb-4"></i>
                                    <p class="text-green-600 mb-1 sm:mb-2 text-sm sm:text-base">Cliquez pour ajouter des photos ou glissez-déposez</p>
                                    <p class="text-green-500 text-xs sm:text-sm">Maximum 5 photos, 5MB par photo</p>
                                    <p class="text-gray-500 text-xs mt-1 sm:mt-2">Formats acceptés : JPG, PNG, WebP</p>
                                    <p class="text-gray-500 text-xs mt-1">Les photos iPhone en HEIC ne sont pas encore supportées ici.</p>
                                    <p class="text-gray-500 text-xs mt-1">La première photo sera utilisée comme photo principale.</p>
                                </label>
                                <div id="image-preview" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-4 mt-3 sm:mt-4 hidden"></div>
                                <div id="upload-feedback" class="hidden mt-4 text-left"></div>
                                <button type="button" id="clear-selection" class="hidden mt-4 inline-flex items-center rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                    <i class="fas fa-rotate-left mr-2"></i>Réinitialiser la sélection
                                </button>
                            </div>
                            @error('photos')
                                <p class="text-red-500 text-xs sm:text-sm mt-1">{{ $message }}</p>
                            @enderror
                            @error('photos.*')
                                <p class="text-red-500 text-xs sm:text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Conseils pour les photos -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4">
                            <div class="flex items-start">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-500 mt-0.5 mr-2 sm:mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                                </svg>
                                <div class="text-xs sm:text-sm text-blue-700">
                                    <p class="font-medium mb-1 sm:mb-2">Conseils pour de meilleures photos :</p>
                                    <ul class="list-disc list-inside space-y-0.5 sm:space-y-1">
                                        <li>Utilisez un bon éclairage naturel</li>
                                        <li>Montrez l'équipement sous différents angles</li>
                                        <li>Assurez-vous que l'équipement soit propre et bien visible</li>
                                        <li>Évitez les arrière-plans encombrés</li>
                                        <li>Incluez les accessoires importants dans la photo</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex flex-col sm:flex-row justify-between items-center pt-6 border-t border-green-200 gap-3 sm:gap-0 mt-8">
                        <a href="{{ route('prestataire.equipment.create.step2') }}" class="w-full sm:w-auto bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 px-6 py-3 rounded-lg transition duration-200 font-medium text-center">
                            <i class="fas fa-arrow-left mr-2"></i>Précédent
                        </a>
                        
                        <button type="submit" class="w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg transition duration-200 font-semibold shadow-lg hover:shadow-xl">
                            Suivant : Localisation et résumé
                            <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('step3Form');
    const imageInput = document.getElementById('photos');
    const preview = document.getElementById('image-preview');
    const uploadArea = document.getElementById('upload-area');
    const dropZone = document.getElementById('dropZone');
    const feedback = document.getElementById('upload-feedback');
    const clearSelectionButton = document.getElementById('clear-selection');
    const maxFiles = 5;
    const maxFileSize = 5 * 1024 * 1024;
    const acceptedMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
    const acceptedFileNamePattern = /\.(jpe?g|png|webp)$/i;
    let validationErrors = [];

    imageInput.addEventListener('change', function () {
        renderSelection();
    });

    clearSelectionButton.addEventListener('click', function () {
        resetSelection();
    });

    function isAcceptedFile(file) {
        const fileType = (file.type || '').toLowerCase();

        return acceptedMimeTypes.includes(fileType) || acceptedFileNamePattern.test(file.name || '');
    }

    function showFeedback(messages = [], type = 'error') {
        if (!messages.length) {
            feedback.className = 'hidden mt-4 text-left';
            feedback.innerHTML = '';
            return;
        }

        const classes = type === 'warning'
            ? 'mt-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-left text-sm text-amber-800'
            : 'mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-left text-sm text-red-700';

        feedback.className = classes;
        feedback.innerHTML = `
            <ul class="list-disc list-inside space-y-1">
                ${messages.map(message => `<li>${message}</li>`).join('')}
            </ul>
        `;
    }

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

    function resetSelection() {
        imageInput.value = '';
        validationErrors = [];
        resetDisplay();
        showFeedback();
    }

    function renderSelection() {
        const files = Array.from(imageInput.files || []);
        validationErrors = [];
        preview.innerHTML = '';

        if (!files.length) {
            resetDisplay();
            showFeedback();
            return;
        }

        preview.classList.remove('hidden');
        uploadArea.classList.add('hidden');
        clearSelectionButton.classList.remove('hidden');

        if (files.length > maxFiles) {
            validationErrors.push(`Maximum ${maxFiles} photos. Réduisez la sélection avant de continuer.`);
        }

        files.slice(0, maxFiles).forEach((file, index) => {
            if (!isAcceptedFile(file)) {
                validationErrors.push(`${file.name} : format non supporté. Utilisez JPG, PNG ou WebP.`);
                return;
            }

            if (file.size > maxFileSize) {
                validationErrors.push(`${file.name} : fichier supérieur à 5 Mo.`);
                return;
            }

            const card = document.createElement('div');
            card.className = 'relative';

            const img = document.createElement('img');
            img.className = 'w-full h-24 object-cover rounded-lg';
            img.src = URL.createObjectURL(file);
            img.onload = function () {
                URL.revokeObjectURL(img.src);
            };

            const resetButton = document.createElement('button');
            resetButton.type = 'button';
            resetButton.className = 'absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs';
            resetButton.innerHTML = '<i class="fas fa-times"></i>';
            resetButton.addEventListener('click', function () {
                resetSelection();
            });

            const label = document.createElement('div');
            label.className = 'absolute bottom-1 left-1 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded';
            label.textContent = index === 0 ? 'Principale' : `Photo ${index + 1}`;

            card.appendChild(img);
            card.appendChild(resetButton);
            card.appendChild(label);
            preview.appendChild(card);
        });

        if (!preview.children.length) {
            resetDisplay();
        }

        showFeedback(validationErrors);
    }

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, function (event) {
            event.preventDefault();
            event.stopPropagation();
        });
    });

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, function () {
            dropZone.classList.add('border-green-500', 'bg-green-50');
        });
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, function () {
            dropZone.classList.remove('border-green-500', 'bg-green-50');
        });
    });

    dropZone.addEventListener('drop', function (event) {
        if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length) {
            imageInput.files = event.dataTransfer.files;
            renderSelection();
        }
    });

    form.addEventListener('submit', function (event) {
        if (!(imageInput.files && imageInput.files.length)) {
            event.preventDefault();
            showFeedback(['Ajoutez au moins une photo avant de continuer.']);
            return;
        }

        if (validationErrors.length) {
            event.preventDefault();
            showFeedback(validationErrors);
            return;
        }

        const submitButton = form.querySelector('button[type="submit"]');
        if (submitButton) {
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Envoi...';
        }
    });
});
</script>
@endsection