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

{% block title %}Profil{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        #app_user_registration_civility{
           margin-top: -5px;
       }
    </style>
{% endblock %}

{% block body %}
<div class="content" id="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-3">
                                <div class="col-9">
                                    <div class="user user--bordered user--xlg margin-bottom-20">
                                        {% if app.user.path != null %}
                                            <img src="{{ asset('uploads/users/'~app.user.path) }}" style="width: 210px;height: 210px;">
                                        {% else %}
                                            <img src="{{ asset('assets/img/users/user_2.jpg') }}"  style="width: 210px;height: 210px;">
                                        {% endif %}
                                        {#<div class="user__name"><strong>{{ app.user.username }}</strong><br><span class="text-muted">{{ app.user.roles[0] }}</span>#}
                                            {#<div class="rating_readonly" data-score="4"></div>#}
                                            {#<script type="text/javascript">#}
                                            {#document.addEventListener("DOMContentLoaded", function () {#}
                                            {#$(".rating_readonly").raty({readOnly: true});#}
                                            {#});#}
                                            {#</script>#}
                                        {#</div>#}
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="card-body"><h5>Custom information</h5>
                                    <p><span class="caption">Email:</span><br>{{ app.user.email }}</p>
                                    <p class=""><span class="caption">Firstname:</span><br>{{ app.user.firstname }}</p>
                                    <p class=""><span class="caption">Lastname:</span><br>{{ app.user.lastname }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="col-9">
                                    <div class="card-body"><h5>Contact information</h5>
                                        <p><span class="caption">Email adress:</span><br>{{ app.user.email }}
                                        </p>
                                        <p><span class="caption">Phone number:</span><br>{{ app.user.phone }}</p>
                                        <p><span class="caption">Address:</span><br>{{ app.user.adress }}, {{ app.user.city }}<br>{{ app.user.postalCode }} {% if(app.user.country != null) %}, {{ app.user.country.name }} {% endif %}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-1">
                                <div class="col-12 text-right">
                                    <button class="btn btn-light btn-icon"><span class="fa fa-pencil"></span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="divider divider--dashed divider--sm"></div>
                        <div class="card-body">
                            <h3>Edit Profile</h3>
                            {{ form_start(form,{'action':path('update_profil') ,'attr': {'role':'form','id': 'updateProfil'}}) }}
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.civility) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.civility, { 'attr': {'class': '', 'placeholder': 'Enter user name', 'required':'true','name':'username'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-user"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.civility ) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Picture</label>
                                        <div class="form-control-element form-control-element--right">
                                            <fieldset class="form-group">
                                                <div class="custom-file">
                                                    {{ form_widget(form.file, { 'attr': {'class': 'custom-file-input', 'placeholder': '','required':'false','name':'file','id':'inputGroupFile01'} }) }}
                                                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <span class="error">{{ form_errors(form.file ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.username) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.username, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your username', 'required':'true','name':'username'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-user-o"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.username ) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.email) }}</label>
                                        <div class="form-control-element form-control-element--right">
                                            {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'placeholder': 'Enter email address','required':'true','name':'email','id':'email'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-envelope-o"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.email ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.firstname) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.firstname, { 'attr': {'class': '', 'placeholder': 'Enter your firstname', 'required':'true','name':'firstname'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-user"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.firstname ) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.lastname) }}</label>
                                        <div class="form-control-element form-control-element--right">
                                            {{ form_widget(form.lastname, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your lastname','required':'true','name':'lastname','id':'lastname'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-user"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.lastname ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.phone) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.phone, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your phone number', 'required':'true','name':'phone'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-phone"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.phone ) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.adress) }}</label>
                                        <div class="form-control-element form-control-element--right">
                                            {{ form_widget(form.adress, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your address','required':'true','name':'adress','id':'adress'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-home"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.adress ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.city) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.city, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your city', 'required':'true','name':'city'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-address-book"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.city ) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.country) }}</label>
                                        <div class="form-control-element form-control-element--right">
                                            {{ form_widget(form.country, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your country','required':'true','name':'country','id':'country'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-address-card"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.country ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>{{ form_label(form.postalCode) }}</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.postalCode, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your postal code', 'required':'true','name':'postalCode'} }) }}
                                            <div class="form-control-element__box">
                                                <span class="fa fa-user-o"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.postalCode ) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="divider divider--dashed divider--sm"></div>
                            <h3>Change Password</h3>
                            <div class="form-row">
                                <div class="col-6">
                                    <div class="form-group"><label>Password</label>
                                        <div class="form-control-element">
                                            {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control example3', 'placeholder': 'Enter password','name':'password','id':'password'} }) }}
                                            <div class="form-control-element__box form-control-element__box--pretify">
                                                <span class="fa fa-key"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.plainPassword.first) }}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Confirm Password</label>
                                        <div class="form-control-element form-control-element--right">
                                            {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control', 'placeholder': 'Enter password','name':'password_again','id':'password_again'} }) }}
                                            <div class="form-control-element__box form-control-element__box--pretify">
                                                <span class="fa fa-key"></span>
                                            </div>
                                        </div>
                                        <span class="error">{{ form_errors(form.plainPassword.second) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-6">
                                </div>
                                <div class="col-6">
                                    <div class="pull-right">
                                        <button class="btn btn-white" type="submit">Cancel</button>
                                        <button class="btn btn-primary" type="submit" value="Validate!" id="btn">Submit</button>
                                    </div>
                                </div>
                            </div>
                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <!-- THIS PAGE SCRIPTS ONLY -->
        <script type="text/javascript" src="{{ asset('js/vendors/moment/moment-with-locales.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/echarts/echarts.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/select2/select2.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/daterangepicker/daterangepicker.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/raty/jquery.raty.js') }}"></script>
        <!-- //END THIS PAGE SCRIPTS ONLY -->
        <script type="text/javascript" src="{{ asset('js/demo_dashboard.js') }}"></script>
        <script>
            //les champs des mots de passe option on update form user
            $('#app_user_registration_plainPassword_first').prop('required',false);
            $('#app_user_registration_plainPassword_second').prop('required',false);
            $('#app_user_registration_file').prop('required',false);
        </script>
    {% endblock %}