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

{% block title %} {% trans %}COSAP - Profil Utilisateur{% endtrans %} {% endblock %}

{% block body %}

<style>
    .form_pwd ul li{
        color:red;
        margin-left:-39px;
        list-style-type: none
    }

    #update_photo:hover {
        opacity: 0.8 !important;
    }

</style>

    <section class="row">
        <div class="col-md-7 col-sm-12">
            <div class="card">
                <div class="card-header border-bottom-cyan">
                    <h6 style="font-weight:500;">{% trans %}Profil utilisateur{% endtrans %}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="text-center">
                                <a id="update_photo" class="btn btn-social-icon btn-sm btn-outline-info float-right" data-toggle="modal" data-target="#modal_photo_profil" style="border-color:transparent;border-radius:50%;position:absolute;width:120px;aspect-ratio:auto 120/120;height:120px;text-align:center;vertical-align:middle;opacity:0;font-size: 25px;" title="{% trans %}Changer photo de profil{% endtrans %}">
                                    <span class="fa fa-camera" style="top: 30%; font-size: 25px !important;"></span>
                                </a>

                                <img src="{{ asset('uploads/avatars/'~app.user.path)}}" id="img_profile" class="rounded-circle" width="120px;" height="120px;">
                                
                                <h5 class="list-group-item-heading text-center mb-2 mt-2">{{ app.user.fullName }}</h5>
                                <h6 class="list-group-item-heading text-center card-subtitle text-muted blue darken-2">{{ app.user.fonction.name }}</h6>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="list-group">
                                <a class="list-group-item" style="cursor: default;" title="{% trans %}Nom Utilisateur{% endtrans %}"><i class="ft-user" style="color:#2dcee3; font-size:18px; padding-right:5px;"></i> <span class="text-muted">{{app.user.username}}</span></a>
                                <a class="list-group-item" style="cursor: default;" title="{% trans %}Adresse email{% endtrans %}" > <i class="ft-mail" style="color:#2dcee3; font-size:18px; padding-right:10px;"></i><span class="text-muted">{{app.user.email}}</span></a>
                                <a class="list-group-item" style="cursor: default;" title="{% trans %}Numéro téléphone{% endtrans %}"><i class="ft-phone-call" style="color:#2dcee3; font-size:18px; padding-right:10px;"></i><span class="text-muted">+216 {{app.user.phone}} </span></a>
                                <a class="list-group-item" style="cursor: default;" title="{% trans %}Groupe{% endtrans %}"> <i class="ft-users" style="color:#2dcee3; font-size:18px; padding-right:10px;"></i> <span class="text-muted">{{app.user.groupe.name}}</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- end div vard-body-->
            </div><!-- end div card -->
        </div><!-- end div col-6 -->

        <div class="col-md-5 col-sm-12">
            <div class="card">
                <div class="card-header border-bottom-cyan">
                    <h6 style="font-weight:500;">{% trans %}Changer mot de passe{% endtrans %} </h6>
                </div>
                <div class="card-body">
                    {{ form_start(form, {'attr' :{'class' : 'form-disable form_pwd', 'novalidate': 'novalidate', 'role': 'form'}}) }}

                    {{ form_end(form) }}
                </div><!-- end div vard-body-->
            </div><!-- end div card -->
        </div><!-- end div col-6 -->

    </div> <!-- end div row -->


    <!-- start modal to upload photo de profil -->
    <div id="modal_photo_profil" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;" data-keyboard="false"
         data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="myLargeModalLabel" >{% trans %}Changement de photo de profil{% endtrans %}</h5>
                    <a class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true" title="{% trans %}Fermer{% endtrans %}"><i class="fa fa-close text-white"></i></a>
                </div>

                <form method="post"  class="form_upload" id="form_edit_photo" enctype="multipart/form-data" novalidate >
                    <div class="modal-body">
                        <div class="col-lg-12 col-md-12">
                            <div class="card">
                                <input type="file" id="input-file-now"  name="input-file-upload" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-success waves-effect" data-token-photo="{{ csrf_token('photo-item') }}" style="color:white;" id="importer_fichier">{% trans %}Importer{% endtrans %}</a>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- end modal to upload photo de profil -->


{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}


    </script>

    {% include('profil/ajax/photo.html.twig') %}

    {% include('profil/ajax/change_password.html.twig') %}

{% endblock %}