{% block _properties_images_widget %}
<div id="properties-images-container">
    <div id="properties-images-fields-list"
        data-prototype="{{ form_widget(prototype)|e }}"
        data-widget-tags="{{ '<div class="form-group"></div>'|e }}"
        data-widget-counter="{{ value|length }}"
    >
        {% for key, imageForm in form.children %}
            <div class="form-group">
                {{ form_widget(imageForm, { 'attr': {
                    'class': 'form-control-file',
                    'data-key': key,
                    'accept': 'image/*', 
                    'maxlength': '10485760'
                } }) }}
                <label class="image-label" for="{{ imageForm.vars.id }}">Image {{ key + 1 }}</label>
                <label class="selected-file-name" id="selected-file-name-image{{ key }}" for="{{ imageForm.vars.id }}">Aucun fichier choisi</label>
                <button type="button" class="btn btn-danger remove-image-widget">Supprimer</button>
                <!-- Ajouter un conteneur pour l'aperçu de l'image -->
                <img id="image-preview-{{ key }}" style="display:none; max-width:100px; max-height:100px;" />
            </div>
        {% endfor %}
    </div>
    <button type="button"
            class="btn btn-primary add-another-collection-widget"
            data-list-selector="#properties-images-fields-list">Ajouter une autre image de bien</button>
</div>

<!-- Ajout de l'élément invisible pour les annonces ARIA -->
<div id="file-announcement" aria-live="polite" style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden;">Aucun fichier choisi</div>

<script>
    jQuery(document).ready(function() {
        var list = jQuery('#properties-images-fields-list');
        var counter = list.children().length; // Compter les images existantes

        function updateWidgetCounter() {
            var counter = list.children().length;
            list.data('widget-counter', counter);

            // Masquer le bouton si plus de 6 widgets
            if (counter >= 12) {
                jQuery('.add-another-collection-widget').hide();
            } else {
                jQuery('.add-another-collection-widget').show();
            }
        }

        function displayFileName(input, key) {
            var fileName = input[0].files[0].name;
            var label = jQuery('#selected-file-name-image' + key);
            label.text(fileName);
            jQuery('#file-announcement').text(fileName);
        }

        function displayImagePreview(input, key) {
            if (input[0].files && input[0].files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    jQuery('#image-preview-' + key).attr('src', e.target.result).show();
                };

                reader.readAsDataURL(input[0].files[0]);
            }
        }

        // Ajouter une nouvelle image
        jQuery('.add-another-collection-widget').click(function (e) {
            if (counter < 12) {
                var newWidget = jQuery(list.attr('data-prototype').replace(/__name__/g, counter));
                counter++;

                var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
                newElem.appendTo(list);

                newElem.prepend('<label class="image-label">Image ' + counter + '</label>');

                newElem.find('input[type="file"]').on('change', function() {
                    var key = jQuery(this).data('key');
                    displayFileName(jQuery(this), key);
                    displayImagePreview(jQuery(this), key);
                });

                newElem.append('<button type="button" class="btn btn-danger remove-image-widget">Supprimer</button>');

                updateWidgetCounter();
            }
        });

        // Supprimer une image existante
        jQuery(document).on('click', '.remove-image-widget', function (e) {
            e.preventDefault();
            jQuery(this).closest('.form-group').remove();
            updateWidgetCounter();
        });

        // Gestion des événements pour les nouveaux éléments
        jQuery(document).on('change', 'input[type="file"]', function() {
            var key = jQuery(this).data('key');
            displayFileName(jQuery(this), key);
            displayImagePreview(jQuery(this), key);
        });

        updateWidgetCounter();
    });
</script>
{% endblock %}