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

{% block title %}Edition de compte{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12 col-xl-6 mx-xl-auto">
            <div class="card border-0 mb-3">
                <div class="card-header bg-grey">
                    <h1 class="h5 text-white m-0 fw-bold float-start">Edition de compte</h1>
                    <div class="float-end">
                        {{ include('admin_user/_delete_form.html.twig') }}
                    </div>
                </div>
                <div class="card-body bg-white py-3">
                    {{ include('admin_user/_form.html.twig', {'button_label': 'Modifier'}) }}
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="picture-resize" tabindex="-1" aria-labelledby="picture-resize-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="h5 modal-title" id="picture-resize-label">Recadrer votre photo</div>
                </div>
                <div class="modal-body">
                    <img class="image-to-be-cropped" id="uploaded-picture" src="{{ asset('images/default-user-picture.png') }}" alt="vide"/>
                    <p class="mt-2 fw-bold">Votre photo doit impérativement être carrée</p>
                </div>
                <div class="modal-footer">
                    <button type="button" id="img-cropper-save" class="btn btn-primary btn-fw">Recadrer</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        let pictureField = document.getElementById('user_picture');
        let uploadedPicture = document.getElementById("uploaded-picture");
        let picturePreview = document.getElementById('picture-image');
        let cropper;
        let modal = new bootstrap.Modal(document.getElementById('picture-resize'), { backdrop: 'static'});
        let modalSaveButton  = document.getElementById('img-cropper-save');

        pictureField.addEventListener('input', event => {
            uploadedPicture.src = window.URL.createObjectURL(pictureField.files[0]);
            picturePreview.src = window.URL.createObjectURL(pictureField.files[0]);
            pictureField.value = null;

            cropper = new Cropper(uploadedPicture, {
                aspectRatio: 1,
                initialAspectRatio: 1,
                viewMode: 1,
                autoCropArea: 100,
                minContainerHeight: 400,
                minContainerWidth: 400,
                responsive: true
            });

            modal.show();
        });

        modalSaveButton.addEventListener('click', event => {
            let canvas = cropper.getCroppedCanvas();
            canvas.toBlob((blob => {
                let file = new File([blob], "image-recadrée.jpg", {type:"image/jpeg", lastModified:new Date().getTime()});
                let container = new DataTransfer();
                container.items.add(file);
                pictureField.files = container.files;
            }))

            picturePreview.src = canvas.toDataURL();
            modal.hide();
            cropper.destroy();
        })

    </script>
{% endblock %}