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

{% block title %}Mon profil{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="d-flex justify-content-between flex-wrap">
                <div class="d-flex align-items-end flex-wrap">
                    <div class="d-flex">
                        <i class="mdi mdi-home text-muted hover-cursor"></i>
                        <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;Tableau de bord&nbsp;/&nbsp;</p>
                        <p class="text-primary mb-0 hover-cursor">profil</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if user %}
        <div class="row">
            {# common flash messages bloc #}
            {{ include('common/flash_messages_bloc.html.twig') }}
            <div class="col-md-3">
                <div class="text-center">
                    <img id="imageUploadPreview" src="{% if app.user.image %}{{ app.user.image }}{% else %}/images/default-no-image.jpg{% endif %}" style="width:219px" alt="">
                    <form id="imageUploadForm" action="" method="POST" enctype="multipart/form-data" style="width:100%">
                        <span class="btn btn-sm btn-primary my-2" id="imageUploadBtn">
                            <span>Modifier ma photo de profil</span>
                        </span>
                        <input type="file" name="image" id="imageUploadFile" style="width:0;height:0">
                    </form>
                    <input type="hidden" id="imageUploadUrl" value="{{ path('upload_user_image',{'id':app.user.id}) }}">
                </div>
            </div>
            <div class="col-md-9">
                <div class="bloc-radius bloc-padding bloc-background-color bloc-border bloc-box-shadow">
                    <div>
                        <h3 class="pb-4">
                            <span>Mes informations</span>
                            <a href="{{ path('student_add_or_edit', {id: user.id, id_customer: user.customer.id}) }}" class="btn btn-outline-warning btn-icon me-3 mt-2 mt-xl-0 p-2">
                                <i class="mdi mdi-pencil btn-icon-append"></i>                          
                            </a>
                        </h3>
                        <div class="row bloc-padding-left">
                            <div class="col-md-6">
                                <span class="text-muted">Nom:</span>
                            </div>
                            <div class="col-md-6">
                                <span>{{ user.lastname }}</span>
                            </div>
                        </div>
                        <div class="row bloc-padding-left pt-3">
                            <div class="col-md-6">
                                <span class="text-muted">Prénom:</span>
                            </div>
                            <div class="col-md-6">
                                <span>{{ user.firstname }}</span>
                            </div>
                        </div>
                        <div class="row bloc-padding-left pt-3">
                            <div class="col-md-6">
                                <span class="text-muted">Date de naissance:</span>
                            </div>
                            <div class="col-md-6">
                                <span>{{ user.birthdate|date('d/m/Y') }}</span>
                            </div>
                        </div>
                        <div class="row bloc-padding-left pt-3">
                            <div class="col-md-6">
                                <span class="text-muted">Email:</span>
                            </div>
                            <div class="col-md-6">
                                <span>{{ user.email }}</span>
                            </div>
                        </div>
                        <div class="row bloc-padding-left pt-3">
                            <div class="col-md-6">
                                <span class="text-muted">Téléphone:</span>
                            </div>
                            <div class="col-md-6">
                                <span>{{ user.phone ? user.phone : '' }}</span>
                            </div>
                        </div>
                        {% if user.address %}
                            <div class="row bloc-padding-left pt-3">
                                <div class="col-md-6">
                                    <span class="text-muted">Adresse:</span>
                                </div>
                                <div class="col-md-6">
                                    <span>{{ user.address.street ? user.address.street : '' }}</span>
                                    {% if user.address.extra %}
                                        <br><span>{{ user.address.extra ? user.address.extra : '' }}</span><br>
                                    {% endif %}
                                    <span>{{ user.address.city ? user.address.city : '' }}</span>
                                    <span>{{ user.address.postalCode ? user.address.postalCode : '' }}</span>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="mt-5">
                        <h3 class="pb-4">Mes formations</h3>
                        <div class="row bloc-padding-left">
                            <div class="col-md-6">
                                <span class="text-muted">Agence:</span>
                            </div>
                            <div class="col-md-6">
                                {% for establishment in user.getEstablishments %}
                                    <span>{{ establishment.name }}</span>
                                {% else %}
                                    <span>Vous n'avez pas d'agences</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <p>Oups!, Une erreur inatendue, ressayer</p>
    {% endif %}
{% endblock %}

{% block pageJavascript %}
    <script>
        jQuery(document).ready(function() {
            $('#imageUploadError').hide();
            $("#imageUploadBtn").click(function(){
                $('#imageUploadFile').trigger('click');
            });
            $('#imageUploadFile').on('change', function(){
                var formData = new FormData(document.getElementById("imageUploadForm"));
                formData.append('image',  document.getElementById('imageUploadFile').files[0]);

                $.ajax({
                    type: "POST",
                    data:  formData,
                    enctype: 'multipart/form-data',
                    processData: false,
                    contentType: false,
                    url: $("#imageUploadUrl").val(),
                    cache: false,
                    success: function(response){
                        if(response.success){
                            $("#imageUploadPreview").fadeOut(function(){
                                $(this).attr('src',response.image);
                                $(this).fadeIn();
                            });
                        }else{
                            $('#imageUploadError').show();
                        }
                    }
                });
            });
        });
    </script>
{% endblock %}