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

{% block title %}Contact{% endblock %}

{% block body %}

    <!--Page Title-->
    <section class="page-title" style="background-image:url({{ asset('images/background/10.jpg') }});">
        <div class="auto-container">
            <div class="inner-container clearfix">
                <div class="title-box">
                    <h1>PROJET {{ projet.name }}</h1>
                    <span class="title">Réalisons votre projet ensemble ...</span>
                </div>
                <ul class="bread-crumb clearfix">
                    <li><a href="{{ path('page.home') }}">Accueil</a></li>
                    <li>Projet {{ projet.name }}</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->


    <!-- Projects Section -->
    <section class="projects-section alternate">
        <div class="auto-container">
                <!--MixitUp Galery-->
            <div class="mixitup-gallery">
                <!--Filter-->
                <div class="filters text-center clearfix">
                    <ul class="filter-tabs filter-btns clearfix">
                        <li class="active filter" data-role="button" data-filter="all">TOUT</li>
                        {% for tag in tags %}
                            <li class="filter" data-role="button" data-filter=".{{ tag.class }}">{{ tag.name|upper }}</li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="filter-list row">

                    <!-- Block photos -->
                    {% for photo in photos %}

                        <div class="project-block all mix {{ photo.idTag.class }} col-lg-4 col-md-6 col-sm-12">
                            <div class="image-box">
                                <figure class="image"><img src="{{ asset('uploads/img/' ~ photo.link) }}" alt="Projet : {{ projet.name }} - Catégorie {{ projet.idCategory.name }} - {{ photo.idTag.name }}"></figure>
                                <div class="overlay-box">
                                    <div class="btn-box">
                                        <a href="{{ asset('uploads/img/' ~ photo.link) }}" class="lightbox-image" data-fancybox="gallery"><i class="fa fa-search"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    {% endfor %}

                    

                </div>

            </div>

            <div>
                <div>
                    <h1>Vos avis</h1>
                    {% if commentaires is defined and commentaires is not empty %}
                        {% for commentaire in commentaires %}
                            <div class="media mt-2">
                              <img class="mr-3" src="{{ asset('images/icons/usericon.png') }}" style="width:50px;height:50px"/>
                              <div class="media-body">
                                <h5 class="mt-0 mb-1"><b>{{ commentaire.auteur }}</b> <small>(le {{commentaire.date|date('d-m-Y')}}):
                                    {% if is_granted('ROLE_ADMIN') %}
                                        <a href="{{path('admin.avis.delete', {id: commentaire.id})}}" onclick="return confirm('Confirmer la suppression de cet avis ?')">(supprimer)</a>
                                    {% endif %}
                                    </small>
                                </h5>
                                {{ commentaire.texte }}
                              </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="mt-4">Pas d'avis pour l'instant.</p>                   
                    {% endif %}
                </div>


                <div class="mt-4">
                    <h4>Laisser un avis</h4>
                    <div id="form" class="mt-2">
                        <div class="success"></div>
                        {{ form(form) }}
                    </div>
                </div>
            </div>


            <div class="help-box-two">
                <div class="inner"><center>
                    <span class="title">Contact rapide</span>
                    <h2>VOUS AVEZ UN PROJET SIMILAIRE ?</h2>
                    <div class="text">Vous avez un projet similaire à réaliser ? N'hésitez pas à nous contacter !</div>
                    <a class="theme-btn btn-style-two" href="{{ path('page.contact') }}">Contact</a></center>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block extraScript %}

<script>
$("form[name='avis']").submit(function(e)
{
    e.preventDefault();
    var auteur = $('#avis_auteur');
    var texte = $('#avis_texte');
    auteur.removeClass('is-invalid');
    texte.removeClass('is-invalid');

    $.ajax(
    {
        url:"{{ path('ajouter.avis', {id:projet.id}) }}",
        method:'post',
        dataType:'JSON',
        data: {auteur: auteur.val(), texte: texte.val()},
        success: function (data)
        {
            if (data.success === 0)
            {
                data.champsInvalide.forEach(champs => 
                {
                    $('#avis_'+champs).addClass('is-invalid');
                    $('#avis_'+champs).attr('placeholder','Veuillez remplir ce champs.');
                });
            }
            else
            {
                $('.success').html("<p class='alert alert-success'>Commentaire envoyé avec succès ! Il sera visible une fois approuvé par un administrateur.</p>");
                $('#avis_Envoyer').prop('disabled',true);
            }
        }
    });
});
</script>

{% endblock %}