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

{% block body %}
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li><span>Support</span></li>
        </ul>
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-life-ring fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Tickets</span>
                <span class="caption-helper">Support et demandes</span>
            </div>
            <div class="actions hidden-print">
                {% if app.user.aDroit('ticket_creation') %}
                    <a href="{{ path('ticket_new') }}" class="btn green"><i class="fa fa-plus"></i> Nouveau ticket</a>
                {% endif %}
            </div>
        </div>
        <div class="portlet-body">
            <div class="ka-toolbar">
                <div class="toolbar-left" style="flex:1 1 420px; min-width:320px;">
                    <div class="input-icon input-group" style="width:100%;">
                        <i class="fa fa-search font-red"></i>
                        <input type="text" class="form-control" name="motcles" id="ka-search-tickets" placeholder="Rechercher par numero, sujet, utilisateur..." autocomplete="off">
                    </div>
                </div>
                <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                    <div class="input-icon" style="width:100%;">
                        <i class="fa fa-calendar font-red"></i>
                        <input type="text" class="form-control daterange-tickets" name="date_ticket" id="date_ticket" value="{{ 'now'|date_modify('-30 days')|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}" autocomplete="off">
                        <input type="hidden" id="date_start" value="{{ 'now'|date_modify('-30 days')|date('Y-m-d') }}">
                        <input type="hidden" id="date_end" value="{{ 'now'|date('Y-m-d') }}">
                    </div>
                </div>
            </div>

            <div class="ka-filter-quick" style="margin-top:10px;">
                <label style="margin-right:10px; font-weight:600;">Statut:</label>
                <select id="filter-statut" class="form-control input-sm" style="display:inline-block; width:auto;">
                    <option value="">Tous</option>
                    <option value="OUVERT">Ouvert</option>
                    <option value="ASSIGNE">Assigné</option>
                    <option value="REPONDU">Répondu</option>
                    <option value="CLOTURE">Résolu</option>
                </select>

                <label style="margin-left:15px; margin-right:10px; font-weight:600;">Priorité:</label>
                <select id="filter-priorite" class="form-control input-sm" style="display:inline-block; width:auto;">
                    <option value="">Toutes</option>
                    <option value="BASSE">Basse</option>
                    <option value="NORMALE">Normale</option>
                    <option value="HAUTE">Haute</option>
                    <option value="URGENTE">Urgente</option>
                </select>

                <label style="margin-left:15px; margin-right:10px; font-weight:600;">Catégorie:</label>
                <select id="filter-categorie" class="form-control input-sm" style="display:inline-block; width:auto;">
                    <option value="">Toutes</option>
                    <option value="TECHNIQUE">Technique</option>
                    <option value="FACTURATION">Facturation</option>
                    <option value="GENERAL">Général</option>
                    <option value="AUTRE">Autre</option>
                </select>

                <button id="btn-reset-filters" class="btn btn-default btn-sm" style="margin-left:15px;">
                    <i class="fa fa-refresh"></i> Réinitialiser
                </button>
            </div>

            <hr class="ka-section-sep" />

            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Numéro</th>
                            <th>Sujet</th>
                            <th>Catégorie</th>
                            <th>Priorité</th>
                            <th>Statut</th>
                            <th>Demandeur</th>
                            <th>Assigné à</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody id="ticket-results">
                        {% include 'ticket/_table.html.twig' with { tickets: [] } %}
                    </tbody>
                </table>
            </div>

            <div class="ka-empty-state" id="ticket-empty" style="display:none; text-align:center; padding:40px 20px;">
                <i class="fa fa-life-ring" style="font-size:70px; color:#ccc;"></i>
                <h3 style="color:#999; margin-top:20px;">Aucun ticket trouvé</h3>
                <p style="color:#bbb;">Essayez de modifier vos critères de recherche</p>
            </div>

            <div class="text-center" style="margin-top:15px;">
                <button class="btn btn-default" id="ticket-load-more" style="display:none;">Charger plus</button>
            </div>

            <input type="hidden" id="ka-page" value="1">
        </div>
    </div>

    <div id="loading-indicator" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Chargement...</span>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/global/scripts/tickets.js') }}"></script>
{% endblock %}