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

{% block title %}Demande de pré-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">
            <h1 class="h3 mb-3 font-weight-normal text-uppercase text-primary text-center fst-italic mt-md-5">Demande de pré-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>Vous allez rejoindre le Groupe Hans & associés ! Bienvenue dans cette grande aventure, nous aurions juste besoin que vous renseigniez quelques informations d'abord. Promis ça prends moins de 5 minutes !</p>
                    <h2>Informations</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) }}
                    {{ form_row(form.jobFunctions) }}
                    {{ form_row(form.offices) }}
                    {{ form_row(form.competencies) }}
                    {{ form_row(form.CNCCRegistered) }}
                    {{ form_row(form.OECRegistered) }}
                </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 %}