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

{% block title %}Mon 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">Mon compte</h1>
                </div>
                <div class="card-body bg-white py-3">
                    {{ form_start(form) }}
                        {% if form_errors(form) %}
                        <div class="alert alert-primary" role="alert">
                            {{ form_errors(form) }}
                        </div>
                        {% endif %}
                        <div class="row">
                            <div class="col-12">
                                <h2>Informations civiles</h2>
                                {{ form_row(form.gender) }}
                                {{ form_row(form.lastName) }}
                                {{ form_row(form.firstName) }}
                                {{ form_row(form.birthday) }}
                                {{ form_row(form.childrenNumber) }}
                                {{ form_row(form.maritalStatus) }}
                                <div class="mb-3">
                                    <p>
                                    {% if app.user.picture %}
                                        <img id="picture-image" class="img-fluid" src="{{ app.user.base64Picture }}" alt="Votre photo">
                                    {% else %}
                                        <img id="picture-image" class="img-fluid" src="{{ asset('images/default-user-picture.png') }}" alt="Votre photo">
                                    {% endif %}
                                    </p>
                                </div>
                                {{ form_row(form.picture) }}

                                <h2 class="my-5">Informations professionnelles</h2>
                                {{ form_row(form.phoneNumber) }}
                                {{ form_row(form.mail) }}
                                {{ form_row(form.joinDate) }}
                                {{ form_row(form.leaveDate) }}
                                {{ form_row(form.jobFunctions) }}
                                {{ form_row(form.competencies) }}
                                {{ form_row(form.offices) }}
                                {{ form_row(form.CNCCRegistered) }}
                                {{ form_row(form.OECRegistered) }}

                                <h2 class="my-5">A propos</h2>
                                {{ form_row(form.spokenLanguages) }}
                                {{ form_row(form.alimentaryRestrictions) }}
                                {{ form_row(form.hobbies) }}
                                {{ form_row(form.workExperiences) }}
                                {{ form_row(form.about) }}
                            </div>
                            <div class="text-center mt-3">
                                <button class="btn btn-fw btn-primary fw-bold text-uppercase ls-2 py-2" type="submit">
                                    Envoyer les informations
                                </button>
                            </div>
                        </div>
                    {{ form_end(form) }}
                </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 %}