{% block content %}
    <div class="form-group">
        <label for="image-input">Téléchargez une image :</label>
        <input type="file" id="image-input" class="form-control" accept="image/*" />

        <div class="mt-3">
            <img id="image-preview" class="img-fluid" src="{{ asset('images/formateurs/' ~ form.vars.value.imageName) }}" alt="Prévisualisation" />
        </div>

        <div class="mt-3">
            <button id="crop-button" class="btn btn-primary">Recadrer</button>
            <button id="upload-button" class="btn btn-success">Enregistrer</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('image-input');
            const preview = document.getElementById('image-preview');
            const cropButton = document.getElementById('crop-button');
            const uploadButton = document.getElementById('upload-button');
            let cropper;

            // Prévisualisation de l'image après téléchargement
            input.addEventListener('change', (event) => {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        preview.src = reader.result;

                        if (cropper) {
                            cropper.destroy();
                        }

                        // Initialisation de Cropper.js
                        cropper = new Cropper(preview, {
                            aspectRatio: 1, // Carré
                            viewMode: 2,
                        });
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Action de recadrage
            cropButton.addEventListener('click', () => {
                if (cropper) {
                    const croppedCanvas = cropper.getCroppedCanvas();
                    preview.src = croppedCanvas.toDataURL();
                }
            });

            // Envoi de l'image recadrée au serveur
            uploadButton.addEventListener('click', () => {
                if (cropper) {
                    const croppedCanvas = cropper.getCroppedCanvas();
                    croppedCanvas.toBlob((blob) => {
                        const formData = new FormData();
                        formData.append('croppedImage', blob, 'image-cropped.png');

                        fetch('/admin/formateurs/upload-cropped-image', {
                            method: 'POST',
                            body: formData,
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                alert('Image recadrée et enregistrée avec succès.');
                                location.reload();
                            } else {
                                alert('Erreur lors de l\'enregistrement : ' + data.error);
                            }
                        })
                        .catch(error => {
                            console.error('Erreur :', error);
                            alert('Une erreur est survenue.');
                        });
                    });
                } else {
                    alert('Veuillez sélectionner une image et effectuer un recadrage.');
                }
            });
        });
    </script>
{% endblock %}