{% extends 'admin/base.html.twig' %}
{% block content %}
    <div class="container-fluid">

        {% embed "admin/panels/page-title-panel.html.twig" %}
            {% block pageTitle %}
                My Profile
            {% endblock %}
        {% endembed %}

        {% include "admin/panels/feedback-message-panel.html.twig" %}

        <div class="row">
            <!-- Column -->
            <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
                {{ form_start(form) }}
                {{ form_end(form) }}
                <br class="clearfix"/>
            </div>

            <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
                {% if user is not null %}
                    <div class="row justify-content-center">
                        <label class="font-weight-bold text-center">Profile picture</label>

                        <div id="profile-pic-croppie" class="profile-image pb-5 border-0">
                            {% set imagePath = 'https://png.pngitem.com/pimgs/s/649-6490124_katie-notopoulos-katienotopoulos-i-write-about-tech-round.png' %}
                            {% if user.getImagePath() is not null %}
                                {% set imagePath = asset(profile_pic_directory ~ user.getImagePath()) %}
                            {% endif %}
                            <img id="profile-pic-update"
                                 class=""
                                 src="{{ imagePath }}"
                                 alt="{{ user.getFirstName() ~ ' ' ~ user.getLastName() }}'s profile picture "
                            />
                            <br class="clearfix">
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts_post_body %}
    <script type="text/javascript">
        $(function () {
            $('#profile-pic-update, #initials-click').on('click', function () {
                $('#profile_imagePath').click();
            });

            let $uploadCrop = $('#profile-pic-update').croppie({
                enableExif: true,
                enableResize: true,
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'circle'
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });

            $('#profile_imagePath').on('change', function () {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    }).then(function () {
                        console.log('jQuery bind complete');
                    });
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('#profile_Save').on('click', function (ev) {
                ev.preventDefault();
                let fileInputField = $('#profile_imagePath'),
                    hiddenImageField = $('#profile_base64Image'),
                    profileForm = $(this).closest('form');

                if (profileForm && fileInputField) {
                    $uploadCrop.croppie('result', {
                        type: 'canvas',
                        size: 'viewport'
                    }).then(function (resp) {
                        hiddenImageField.val(resp);
                        profileForm.submit();
                    });
                }
            });
        });
    </script>
{% endblock %}