{% extends "layout.html.twig" %}
{% set adminMenu = true %}

{% block title %}Administration{% endblock %}

{% block content %}
<h2 class="text-center">{{ block('title') }}</h2>
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success">
    {{ flashMessage }}
</div>
{% endfor %}
<div class="well">
<div class="row">
    <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#episodes" data-toggle="tab">Episodes</a></li>
            <li><a href="#comments" data-toggle="tab">Commentaires</a></li>
            <li><a href="#users" data-toggle="tab">Utilisateurs</a></li>
        </ul>
    </div>
</div>
<div class="tab-content">
    <div class="tab-pane fade in active adminTable" id="episodes">
        {% if episodes %}
        <div class="table-responsive">
            <table class="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Titre</th>
                        <th>Contenu</th>
                        <th>Etat</th>
                        <th></th>  <!-- Actions column -->
                    </tr>
                </thead>
                {% for episode in episodes %}
                <tr>
                    <td><a class="episodeTitle" href="{{ path('episode', { 'id': episode.id }) }}">{{ episode.title }}</a></td>
                    <td>{{ episode.content | truncate(60) | raw }}</td>
                    <td>{% if episode.status == 'draft' %}
                            Brouillon
                        {% else %}
                            Publié
                        {% endif %}</td>
                    <td>
                        <!--admin_episode_edit -->
                        <a href="{{ path('admin_episode_edit', { 'id': episode.id }) }}" class="btn btn-info btn-xs" title="Edition"><span class="glyphicon glyphicon-edit"></span></a>
                        <button type="button" class="btn btn-danger btn-xs" title="Delete" data-toggle="modal" data-target="#episodeDialog{{ episode.id }}"><span class="glyphicon glyphicon-remove"></span>
                        </button>
                        <div class="modal fade" id="episodeDialog{{ episode.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabel">Confirmation nécessaire</h4>
                                    </div>
                                    <div class="modal-body">
                                        Voulez-vous supprimer définitivement cet episode ?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                        <!--admin_episode_delete -->
                                        <a href="{{ path('admin_episode_delete', { 'id': episode.id }) }}" class="btn btn-danger">Confirmer</a>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
        {% else %}
        <div class="alert alert-warning">Aucun épisode.</div>
        {% endif %}
        <!--admin_episode_add -->
        <a href="{{ path('admin_episode_add') }}"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Ajouter episode</button></a>
    </div>
    <div class="tab-pane fade adminTable" id="comments">
        {% if comments %}
        <div class="well">
            <form class="form-horizontal">
                <fieldset>
                    <!-- Form Name -->
                    <legend>Critères</legend>
                    <!-- Select Basic -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="Recherche">Statut</label>
                        <div class="col-md-4">
                            <select id="SearchCommentBy" onchange="searchStatut();" name="Recherche" class="form control">
                                <option value="null">Tous</option>
                                <option value="0">validé</option>
                                <option value="1">signalé</option>
                            </select>
                        </div>
                    </div> 
                    <!-- Button -->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="singlebutton"></label>
                      <div class="col-md-4">
                        <!--<a href="#comments" class="btn btn-primary">Search</a> -->
                        <!--<button id="btnSearchCommentStatus" onclickname="searchStatut" class="btn btn-primary">Search</button> -->
                      </div>
                    </div>  

                </fieldset>
            </form>
        </div>
        

        <div class="table-responsive">
            <table class="tab_comments table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Episode</th>
                        <th>Auteur</th>
                        <th>Commentaire</th>
                        <th class="col-satut">Etat</th>
                        <th></th>  <!-- Actions column -->
                    </tr>
                </thead>
                {% for comment in comments %}
                <tr data-name="status{{ comment.comAModerer}}">
                    <td><a class="episodeTitle" href="{{ path('episode', { 'id': comment.episode.id }) }}">{{ comment.episode.title }}</a></td>
                    <td>{{ comment.author }}</td>
                    <td>{{ comment.content | truncate(60) }}</td>
                    <td class="col-satut">
                        {% if comment.comAModerer == '0' %}
                            Validé
                        {% else %}
                            Signalé
                        {% endif %}
                    </td>
                    <td>
                        <!--<a href="{{ path('admin_comment_edit', { 'id': comment.id }) }}" class="btn btn-info btn-xs" title="Edition"><span class="glyphicon glyphicon-edit"></span></a>-->
                        
                        {% if comment.comAModerer =='0' %}
                            <button type="button" class="btn btn-success btn-xs btn-comment-out" title="valider" data-toggle="modal" data-target="#commentDialogOk{{ comment.id }}" disabled><span class="glyphicon glyphicon-ok"></span>
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-success btn-xs" title="valider" data-toggle="modal" data-target="#commentDialogOk{{ comment.id }}"><span class="glyphicon glyphicon-ok"></span>
                            </button>
                        {% endif %}
                        
                        <div class="modal fade" id="commentDialogOk{{ comment.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabelOk">Confirmation necessaire</h4>
                                    </div>
                                    <div class="modal-body">
                                        Voulez-vous valider ce commentaire ?</br>
                                        <div class="epi-comment-saisi">{{ comment.content }}</div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                        <a href="{{ path('admin_comment_valid', { 'id': comment.id }) }}" class="btn btn-danger">Confirmer</a>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    
                        <button type="button" class="btn btn-danger btn-xs" title="Supprimer" data-toggle="modal" data-target="#commentDialog{{ comment.id }}"><span class="glyphicon glyphicon-remove"></span>
                        </button>
                        <div class="modal fade" id="commentDialog{{ comment.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabel">Confirmation necessaire</h4>
                                    </div>
                                    <div class="modal-body">
                                        Voulez-vous supprimer définitivement ce commentaire ?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                        <a href="{{ path('admin_comment_delete', { 'id': comment.id }) }}" class="btn btn-danger">Confirmer</a>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
        {% else %}
        <div class="alert alert-warning">Aucun commentaire.</div>
        {% endif %}
    </div>
    <div class="tab-pane fade adminTable" id="users">
        {% if users %}
        <div class="table-responsive">
            <table class="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Role</th>
                        <th></th>  <!-- Actions column -->
                    </tr>
                </thead>
                {% for user in users %}
                <tr>
                    <td>{{ user.username }}</a></td>
                    <td>
                        {% if user.role == 'ROLE_ADMIN' %}
                            Admin
                        {% else %}
                            User
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ path('admin_user_edit', { 'id': user.id }) }}" class="btn btn-info btn-xs" title="Changer mot de passe"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
        {% else %}
        <div class="alert alert-warning">Aucun utilisateur.</div>
        {% endif %}
        <!--<a href="/"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add user</button></a> -->        
    </div>
</div>
</div>

{% endblock %}