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

{% block title %}Première connexion{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-12 col-lg-2 order-2 order-lg-1 bg-primary p-5 text-center d-none d-lg-block">
            <img src="{{ asset('images/Hextra-bg-transparent.svg') }}" alt="Logo Hans & associés" class="img-fluid mb-4 mt-md-5">
        </div>
        <div id="first-login-form" class="col-12 col-lg-10 order-1 order-lg-2 p-5">
            <img src="{{ asset('images/Hextra.svg') }}" alt="Logo Hans & associés" class="img-fluid mb-4 mt-md-5 d-block d-lg-none">
            {% if is_granted('IS_IMPERSONATOR') %}
                <a class="nav-link float-end" href="{{ impersonation_exit_path(path('admin_admin_dashboard') ) }}" title="Quitter l'impersonation"><i class="fas fa-door-open fs-3"></i></a>
            {% endif %}
            <h1 class="h3 mb-3 font-weight-normal text-uppercase text-primary text-center fst-italic mt-md-5">Première connexion</h1>
            {{ 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">
                    <p></p>
                    <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 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 %}