{% extends 'dashboard/base.html.twig' %}

{% block title %}
    {% if item.id %}
        {{ 'dashboard.item_form.edit_title'|trans }}
    {% else %}
        {{ 'dashboard.item_form.create_title'|trans }}
    {% endif %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/styles/upload-bundle.css') }}">
    <style>
        .modern-form-container {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid #e9ecef;
        }
        
        .form-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .image-reorder-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .existing-image-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            cursor: move;
            transition: all 0.3s ease;
            background: white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .existing-image-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .existing-image-item.sortable-chosen {
            transform: scale(1.05);
            box-shadow: 0 12px 30px rgba(0,123,255,0.3);
        }
        
        .existing-image-item.sortable-ghost {
            opacity: 0.5;
            transform: scale(0.95);
        }
        
        .badge-primary-image {
            position: absolute;
            top: 8px;
            left: 8px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border: none;
            box-shadow: 0 2px 8px rgba(40,167,69,0.3);
        }
        
        .delete-existing-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(220,53,69,0.9);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .delete-existing-btn:hover {
            background: #dc3545;
            transform: scale(1.1);
        }
        
        .image-info-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 10px;
            font-size: 0.75rem;
        }
        
        .sortable-helper {
            transform: rotate(5deg);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            z-index: 1000;
        }
    </style>
{% endblock %}

{% block dashboard_content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        {% if item.id %}
            <i class="bi bi-pencil-square"></i> {{ 'dashboard.item_form.edit_title'|trans }}
        {% else %}
            <i class="bi bi-plus-circle"></i> {{ 'dashboard.item_form.create_title'|trans }}
        {% endif %}
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ path('app_dashboard_items') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> {{ 'dashboard.items.back_to_list'|trans }}
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
            <div class="modern-form-container">
                <h2 class="form-title">
                    <i class="bi bi-{% if item.id %}pencil-square{% else %}plus-circle{% endif %} text-primary"></i>
                    {% if item.id %}
                        {{ 'dashboard.item_form.edit_title'|trans }}
                    {% else %}
                        {{ 'dashboard.item_form.create_title'|trans }}
                    {% endif %}
                </h2>

                {{ form_start(form, {'attr': {'id': 'itemForm', 'novalidate': 'novalidate'}}) }}

                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_row(form.title, {'attr': {'class': 'form-control form-control-lg'}}) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_row(form.price, {'attr': {'class': 'form-control form-control-lg'}}) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        {{ form_row(form.category, {'attr': {'class': 'form-select form-select-lg'}}) }}
                    </div>
                    <div class="col-md-6 mb-3">
                        {{ form_row(form.status, {'attr': {'class': 'form-select form-select-lg'}}) }}
                    </div>
                </div>

                <div class="mb-3">
                    {{ form_row(form.description, {'attr': {'class': 'form-control', 'rows': '5'}}) }}
                </div>

                <!-- Upload d'images amélioré -->
                <div class="mb-4">
                    <label class="form-label h5">
                        <i class="bi bi-images text-primary"></i>
                        {{ 'dashboard.item_form.images'|trans }}
                    </label>
                    
                    <div class="alert alert-info">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-info-circle me-2"></i>
                            <div>
                                <strong>{{ 'dashboard.item_form.ajax.title'|trans }}</strong><br>
                                <small>{{ 'dashboard.item_form.ajax.description'|trans }}</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="image-upload-container" id="imageUploadContainer">
                        <div class="upload-content">
                            <i class="bi bi-cloud-upload upload-icon"></i>
                            <h5>{{ 'dashboard.item_form.drag_drop_images'|trans }}</h5>
                            <p class="text-muted">{{ 'dashboard.item_form.or_click_to_select'|trans }}</p>
                            <button type="button" class="upload-button" id="selectFilesBtn">
                                <i class="bi bi-folder2-open"></i> {{ 'dashboard.item_form.select_files'|trans }}
                            </button>
                            <p class="text-muted mt-3">
                                <small><i class="bi bi-check-circle text-success"></i> {{ 'dashboard.item_form.ajax.formats'|trans }}</small><br>
                                <small><i class="bi bi-check-circle text-success"></i> {{ 'dashboard.item_form.ajax.max_size'|trans }}</small><br>
                                <small><i class="bi bi-check-circle text-success"></i> {{ 'dashboard.item_form.ajax.concurrent'|trans }}</small>
                            </p>
                        </div>
                    </div>
                    
                    <!-- Cacher l'input file original -->
                    {{ form_widget(form.images, {'attr': {'class': 'hidden-input-field', 'id': 'imageInput'}}) }}
                    
                    <div id="errorMessages" class="error-message"></div>
                    <div id="imagePreviewContainer" class="image-preview-container"></div>
                    
                    <!-- Champ caché pour stocker les noms de fichiers uploadés -->
                    <input type="hidden" id="uploadedFilenames" name="uploaded_filenames" value="">
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                            <a href="{{ path('app_dashboard_items') }}" class="btn btn-outline-secondary btn-lg me-md-2">
                        <i class="bi bi-arrow-left"></i> {{ 'dashboard.item_form.cancel'|trans }}
                    </a>
                    <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                        <i class="bi bi-check-circle"></i>
                        {% if item.id %}
                            {{ 'dashboard.item_form.update'|trans }}
                        {% else %}
                            {{ 'dashboard.item_form.create'|trans }}
                        {% endif %}
                    </button>
                </div>

                {{ form_end(form) }}
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-gradient bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-lightbulb"></i> {{ 'dashboard.item_form.tips_title'|trans }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info border-0">
                        <h6><i class="bi bi-rocket"></i> {{ 'dashboard.item_form.features.title'|trans }}</h6>
                        <ul class="mb-0 small">
                            <li><strong>{{ 'dashboard.item_form.features.simultaneous'|trans }}</strong></li>
                            <li><strong>{{ 'dashboard.item_form.features.progress'|trans }}</strong></li>
                            <li><strong>{{ 'dashboard.item_form.features.error_handling'|trans }}</strong></li>
                            <li><strong>{{ 'dashboard.item_form.features.cancel'|trans }}</strong></li>
                            <li><strong>{{ 'dashboard.item_form.features.reorder'|trans }}</strong></li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-warning border-0">
                        <h6><i class="bi bi-star"></i> {{ 'dashboard.item_form.tips.title'|trans }}</h6>
                        <ul class="mb-0 small">
                            <li>{{ 'dashboard.item_form.tips.description'|trans }}</li>
                            <li>{{ 'dashboard.item_form.tips.images'|trans }}</li>
                            <li>{{ 'dashboard.item_form.tips.price'|trans }}</li>
                            <li>{{ 'dashboard.item_form.tips.category'|trans }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            {% if item.id and item.images|length > 0 %}
            <div class="card border-0 shadow-sm mt-3">
                <div class="card-header bg-gradient bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-images"></i> {{ 'dashboard.item_form.current_images.title'|trans }}
                        <span class="badge bg-light text-dark ms-2">{{ item.images|length }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info border-0 mb-3">
                        <i class="bi bi-info-circle"></i>
                        {{ 'dashboard.item_form.current_images.reorder_info'|trans }}
                    </div>
                    
                    <div class="image-reorder-container" id="existingImagesContainer">
                        {% for image in item.images %}
                            <div class="existing-image-item" data-image-id="{{ image.id }}">
                                <img src="{{ asset('uploads/items/' ~ image.filename) }}" 
                                     alt="{{ item.title }}" 
                                     class="img-fluid"
                                     style="width: 100%; height: 120px; object-fit: cover;">
                                
                                {% if loop.first %}
                                    <span class="badge badge-primary-image">
                                        <i class="bi bi-star"></i> {{ 'dashboard.item_form.current_images.primary_badge'|trans }}
                                    </span>
                                {% endif %}
                                
                                <button type="button" 
                                        class="delete-existing-btn" 
                                        onclick="deleteExistingImage({{ image.id }}, '{{ image.filename|e('js') }}')"
                                        title="{{ 'dashboard.item_form.current_images.delete_tooltip'|trans }}">
                                    <i class="bi bi-x"></i>
                                </button>
                                
                                <div class="image-info-overlay">
                                    <div><i class="bi bi-file-earmark"></i> {{ image.originalName|length > 20 ? image.originalName[:20] ~ '...' : image.originalName }}</div>
                                    <div><i class="bi bi-hdd"></i> {{ image.formattedFileSize }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script src="{{ asset('assets/js/ajax-image-uploader.js') }}"></script>
    <script>
        // Variables de traduction pour JavaScript
        const translations = {
            uploadInProgress: {{ 'dashboard.item_form.messages.upload_in_progress'|trans|json_encode|raw }},
            waitUploads: {{ 'dashboard.item_form.messages.wait_uploads'|trans|json_encode|raw }},
            orderUpdated: {{ 'dashboard.item_form.messages.order_updated'|trans|json_encode|raw }},
            imageDeleted: {{ 'dashboard.item_form.messages.image_deleted'|trans|json_encode|raw }},
            connectionError: {{ 'dashboard.item_form.messages.connection_error'|trans|json_encode|raw }},
            deleteConfirm: {{ 'dashboard.item_form.messages.delete_confirm'|trans|json_encode|raw }},
            errorPrefix: {{ 'dashboard.item_form.messages.error_prefix'|trans|json_encode|raw }},
            saving: {{ 'dashboard.item_form.saving'|trans|json_encode|raw }}
        };
        
        // Initialiser l'uploader AJAX
        document.addEventListener('DOMContentLoaded', () => {
            const itemId = {{ item.id ?? 'null' }};
            const locale = '{{ app.request.locale }}';
            
            const uploader = new AjaxImageUploader({
                itemId: itemId,
                maxFiles: 10,
                maxSize: 10 * 1024 * 1024, // 10MB
                maxConcurrentUploads: 3,
                uploadUrl: `/${locale}/dashboard/store/upload/image`,
                deleteUrl: `/${locale}/dashboard/store/upload/delete-temp-image`
            });
            
            // Initialiser le drag & drop pour réorganiser les images existantes
            if (itemId && document.getElementById('existingImagesContainer')) {
                initImageReordering();
            }
            
            // Gestion de la soumission du formulaire
            const form = document.getElementById('itemForm');
            const submitBtn = document.getElementById('submitBtn');
            const uploadedFilenamesInput = document.getElementById('uploadedFilenames');
            
            form.addEventListener('submit', (e) => {
                // Si pas d'item ID (nouveau), on doit gérer les images temporaires
                if (!itemId) {
                    // Vérifier s'il y a des uploads en cours
                    if (uploader.hasActiveUploads()) {
                        e.preventDefault();
                        
                        // Afficher un message stylé
                        const toast = document.createElement('div');
                        toast.className = 'alert alert-warning alert-dismissible fade show position-fixed';
                        toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
                        toast.innerHTML = `
                            <i class="bi bi-exclamation-triangle"></i>
                            <strong>${translations.uploadInProgress}</strong><br>
                            ${translations.waitUploads}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        `;
                        document.body.appendChild(toast);
                        
                        setTimeout(() => {
                            if (toast.parentNode) {
                                toast.remove();
                            }
                        }, 5000);
                        
                        return;
                    }
                    
                    // Stocker les noms de fichiers uploadés
                    const filenames = uploader.getUploadedFilenames();
                    uploadedFilenamesInput.value = JSON.stringify(filenames);
                    
                    console.log('Formulaire soumis avec images:', filenames);
                }
                
                // Désactiver le bouton pendant la soumission
                submitBtn.disabled = true;
                submitBtn.innerHTML = `<i class="bi bi-hourglass-split"></i> ${translations.saving}`;
            });
        });
        
        // Fonction pour initialiser la réorganisation des images
        function initImageReordering() {
            const container = document.getElementById('existingImagesContainer');
            if (!container) return;
            
            new Sortable(container, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                dragClass: 'sortable-drag',
                handle: '.existing-image-item',
                onEnd: function(evt) {
                    const imageIds = Array.from(container.children).map(item => 
                        item.dataset.imageId
                    );
                    
                    // Mettre à jour les badges "Principal"
                    updatePrimaryBadges(container);
                    
                    // Sauvegarder l'ordre sur le serveur
                    saveImageOrder(imageIds);
                }
            });
        }
        
        // Mettre à jour les badges d'image principale
        function updatePrimaryBadges(container) {
            const badges = container.querySelectorAll('.badge-primary-image');
            badges.forEach(badge => badge.style.display = 'none');
            
            const firstBadge = container.querySelector('.badge-primary-image');
            if (firstBadge) {
                firstBadge.style.display = 'block';
            }
        }
        
        // Sauvegarder l'ordre des images
        function saveImageOrder(imageIds) {
            const locale = '{{ app.request.locale }}';
            fetch(`/${locale}/dashboard/store/upload/reorder-images`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: new URLSearchParams({
                    'image_ids': imageIds
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Afficher un toast de succès
                    showToast(translations.orderUpdated, 'success');
                } else {
                    showToast(translations.errorPrefix + data.error, 'danger');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                showToast(translations.connectionError, 'danger');
            });
        }
        
        // Afficher un toast message
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 250px;';
            toast.innerHTML = `
                <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-triangle' : 'info-circle'}"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 3000);
        }
        
        // Fonction globale pour supprimer les images existantes
        window.deleteExistingImage = function(imageId, filename) {
            if (!confirm(`${translations.deleteConfirm} "${filename}" ?`)) {
                return;
            }
            
            const button = event.target.closest('button');
            const imageContainer = button.closest('.existing-image-item');
            const originalContent = button.innerHTML;
            
            button.disabled = true;
            button.innerHTML = '<i class="bi bi-hourglass-split"></i>';
            
            const itemId = {{ item.id ?? 'null' }};
            const locale = '{{ app.request.locale }}';
            
            fetch(`/${locale}/dashboard/store/upload/delete-image/${imageId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Animer la suppression
                    imageContainer.style.transition = 'all 0.5s ease';
                    imageContainer.style.opacity = '0';
                    imageContainer.style.transform = 'scale(0.8) rotate(10deg)';
                    
                    setTimeout(() => {
                        imageContainer.remove();
                        updatePrimaryBadges(document.getElementById('existingImagesContainer'));
                        showToast(translations.imageDeleted, 'success');
                    }, 500);
                } else {
                    button.disabled = false;
                    button.innerHTML = originalContent;
                    showToast(translations.errorPrefix + data.error, 'danger');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                button.disabled = false;
                button.innerHTML = originalContent;
                showToast(translations.connectionError, 'danger');
            });
        };
    </script>
{% endblock %}