{% block vich_image_widget %}
<!-- Include Cropper.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css" integrity="sha512-UtLOu9C7NuThQhuXXrGwx9Jb/z9zPQJctuAgNUBK3Z6kkSYT9wJ+2+dh6klS+TDBCV9kNPBbAxbVD+vCcfGPaA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Include Cropper.js JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js" integrity="sha512-JyCZjCOZoyeQZSd5+YEAcFgz2fowJ1F1hyJOXgtKu4llIa0KneLcidn5bwfutiehUTiOuK87A986BZJMko0eWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="vichFile">
    {% if formTypeOptions.imagine_pattern is defined and formTypeOptions.imagine_pattern is not empty %}
    <div id="image-position-editor" class="image-position-editor{{ form.file.vars.id }}" 
            style="background-image: url('{{ (asset_helper is same as(true) ? asset(download_uri) : download_uri)|ea_apply_filter_if_exists('imagine_filter', formTypeOptions.imagine_pattern) }}');
                background-size: contain; background-repeat:no-repeat;width: 100%; height: 300px;">
        <img id="croppedImage" class="d-none" 
                src="{{ (asset_helper is same as(true) ? asset(download_uri) : download_uri)|ea_apply_filter_if_exists('imagine_filter', formTypeOptions.imagine_pattern) }}">
    </div>
    {% elseif download_uri|split('.')|last == 'pdf' %}
        <a href="{{ download_uri }}" target="_blank">afficher pdf</a>
    {% else %}
    <div id="image-position-editor" class="image-position-editor{{ form.file.vars.id }}" 
            style="background-image: url('{{ asset_helper is same as(true) ? asset(download_uri) : download_uri }}');
                background-size: contain; background-repeat:no-repeat;width: 100%; height: 300px;">
        <img id="croppedImage" class="d-none" 
                src="{{ asset_helper is same as(true) ? asset(download_uri) : download_uri }}">
    </div>
    {% endif %}
    <!-- Other HTML elements -->
    <div class="ea-vich-image-actions">
        <div class="btn btn-secondary input-file-container">
            <i class="fa fa-fw fa-upload"></i>
            {{ form_widget(form.file, { 'attr': { 'onchange': "enableCropButton('" ~ form.file.vars.id ~ "')" }, vich: true}) }}
            <div id="image_name_{{ form.file.vars.id }}"></div>
        </div>
        <button type="button" id="openCropEditor_{{ form.file.vars.id }}" class="btn btn-primary mt-3" disabled>Rogner l'image</button>
        <button type="button" id="crop_{{ form.file.vars.id }}" class="btn btn-primary mt-3 d-none">Enregistrer le recadrage</button>
        <div class="check_crop_{{ form.file.vars.id }} text-success"></div>

        {% if form.delete is defined %}
            {{ form_row(form.delete) }}
        {% endif %}
    </div>
    
    <div id="image-position-editor" class="image-position-editor">
        <img id="croppedImage_{{ form.file.vars.id }}" class="d-none">
    </div>
    <div class="preview{{ form.file.vars.id }}" style="width: 160px; height: 160px; overflow: hidden;"></div>
</div>
<script>
    var cropper, reader;

    // Activer le bouton pour rogner après sélection d'image
    function enableCropButton(vichFileId) {
        var newFile = document.getElementById(vichFileId).files[0];
        console.log(newFile);
        var fileSizeInMegabytes = newFile.size > 1024 * 1024;
        var fileSize = fileSizeInMegabytes ? newFile.size / (1024 * 1024) : newFile.size / 1024;

        
        var fileInput = document.getElementById(vichFileId);
        var files = fileInput.files;

        if (files && files.length > 0) {
            var file = files[0];
            var done = function (url) {
                var preview = document.querySelector('.image-position-editor'+vichFileId);
                preview.style.backgroundImage = `url(${url})`;
            };

            if (URL) {
                done(URL.createObjectURL(file)); // Afficher l'image via l'URL de l'objet
            } else if (FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result); // Utiliser le résultat du FileReader pour afficher l'image
                };
                reader.readAsDataURL(file);
            }
        }

        // Update image name display
        document.getElementById('image_name_' + vichFileId).innerText = newFile.name + ' (' + fileSize.toFixed(2) + ' ' + (fileSizeInMegabytes ? 'MB' : 'KB') + ')';

        var files = document.getElementById(vichFileId).files;
        if (files && files.length > 0) {
            document.getElementById('openCropEditor_' + vichFileId).disabled = false; // Enable crop button
        }
    }


    document.querySelectorAll('.vichFile').forEach(function(vichFileContainer) {
            var vichFileId = vichFileContainer.querySelector('input[type="file"]').id;

            // Écouteur pour le bouton "Open Crop Editor"
            document.getElementById('openCropEditor_' + vichFileId).addEventListener('click', function () {
                var fileInput = document.getElementById(vichFileId);
                var files = fileInput.files;

                if (files && files.length > 0) {
                    var file = files[0];
                    var done = function (url) {
                        var croppedImage = document.getElementById('croppedImage_' + vichFileId);
                        croppedImage.src = url; // Affiche l'image sélectionnée
                        croppedImage.style.display = 'block'; // Rendre l'image visible
                        
                        if (cropper) {
                            cropper.destroy(); // Supprimer l'instance Cropper précédente s'il y en a une
                        }

                        cropper = new Cropper(croppedImage, {
                            viewMode: 1,
                            preview: '.preview' + vichFileId // Sélectionner l'élément de preview
                        });

                        // Afficher le bouton "Crop & Upload" après avoir ouvert l'éditeur
                        document.getElementById('crop_' + vichFileId).classList.remove('d-none');
                    };

                    if (URL) {
                        done(URL.createObjectURL(file)); // Afficher l'image via l'URL de l'objet
                    } else if (FileReader) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result); // Utiliser le résultat du FileReader pour afficher l'image
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });

            // Bouton pour cropper l'image
            document.getElementById('crop_' + vichFileId).addEventListener('click', function () {
                if (cropper) {
                    // Récupérer les dimensions du crop
                    const check_crop = document.querySelector('.check_crop_'+vichFileId).innerText = 'Votre image est bien recadré';
                    const form = document.querySelector('.ea-edit-form'); // Modifie si nécessaire pour sélectionner le bon formulaire
                    const cropData = cropper.getData(true);

                    var splitName = vichFileId.split('_');

                    addOrUpdateHiddenInput(form, 'crop_x_' + splitName[1], cropData.x);
                    addOrUpdateHiddenInput(form, 'crop_y_' + splitName[1], cropData.y);
                    addOrUpdateHiddenInput(form, 'crop_width_' + splitName[1], cropData.width);
                    addOrUpdateHiddenInput(form, 'crop_height_' + splitName[1], cropData.height);
                }
            });
        });

    function addOrUpdateHiddenInput(form, name, value) {
        // Vérifie si un input avec ce nom existe déjà
        
        var existingInput = form.querySelector('input[name="' + name + '"]');
        
        if (existingInput) {
            // Si l'input existe, on met à jour sa valeur
            existingInput.value = value;
        } else {
            // Sinon, on crée un nouvel input caché
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = name;
            input.value = value;
            form.appendChild(input);
        }
    }
</script>
{% endblock %}