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

{% block title %}Liste des tickets{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-end flex-wrap">
                <div class="d-flex">
                    <i class="mdi mdi-home text-muted hover-cursor"></i>
                    <p class="text-muted mb-0 hover-cursor">
                        &nbsp;/&nbsp;
                        <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                        &nbsp;/&nbsp;
                    </p>
                    <p class="text-primary mb-0 hover-cursor">Supports</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
  {# common flash messages bloc #}
  {{ include('common/flash_messages_bloc.html.twig') }}
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body bloc-radius bloc-border bloc-box-shadow">
        <p class="card-title">
          Liste des tickets
        </p>
        {# action buttons#}
        <div class="row border-bottom" id="tickets-bloc">
            <div class="col-md-12 grid-margin ">
                <div class="d-flex justify-content-end flex-wrap">
                    <div class="d-flex align-items-end flex-wrap">
                        <div class="me-md-3 me-xl-5">
                            <a href="{{ path('support_add_or_edit')}}" type="button" class="btn btn-outline-dark btn-icon me-3 mt-2 mt-xl-0 p-2" title="ajouter">
                                <i class="mdi mdi-plus text-muted"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# show data #}
        <div class="row">
            {% if (
                    is_granted('ROLE_SUPER_ADMIN') == true or 
                    (
                        (is_granted('ROLE_MANAGER') == true or is_granted('ROLE_ADMIN') == true or is_granted('ROLE_ADMINISTRATIVE') == true)
                    ) 
                    and filterInput is defined 
                )
            %}
                <div class="col-md-12 px-4 pt-4" style="text-align:right">
                    <div id="filter_wraper">
                        <label for="tickets_filter_by_type">Filtrer par:</label>
                        <select name="tickets_filter_by_type" id="tickets_filter_by_type">
                                {% for item in filterInput %}
                                    <option {% if item.label == ticketsType %} selected="selected" {% endif %} value="{{item.value}}">{{item.label}}</option>
                                {% endfor %}
                        </select>
                    </div>
                </div>
            {% endif %}
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table-responsive data-table w-100">
                                <thead>
                                    <tr>
                                        <th style="display:none"></th>
                                        <th>Sujet</th>
                                        <th>Créé par</th>
                                        <th>Créé le</th>
                                        <th>Détail</th>
                                        <th>Réponse</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for support in supports %}
                                        {% set isNotSeen = false %}
                                        {% if support["ticket"] is defined %} 
                                            {% set ticket = support["ticket"] %}
                                            {% set establishment = support["establishment"] %}
                                        {% else %}
                                            {% set ticket = support %}
                                        {% endif %}
                                        {% if (is_granted('ROLE_SUPER_ADMIN') and ticket.isSuperAdminSeen == false and ticket.statut == "En attente") %} 
                                            {% set isNotSeen = true %}
                                        {% elseif (not is_granted('ROLE_SUPER_ADMIN') and (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) and ticket.isAdminManagerSeen == false and ticket.createdBy != app.user and (ticket.statut == "En attente" or ticket.statut == "En cours de traitement") ) %} 
                                            {% set isNotSeen = true %}
                                        {% elseif (not is_granted('ROLE_SUPER_ADMIN') and (is_granted('ROLE_STUDENT') )and ticket.isCreatorSeen == false and ticket.createdBy == app.user and ticket.statut == "Résolu") %} 
                                            {% set isNotSeen = true %}
                                        {% endif %}
                                        
                                        <tr 
                                            class="bloc-line row-click-ticket {% if isNotSeen %} bg-light {% endif %}"
                                                data-url="{{ path('support_add_or_edit', { 'id': ticket.id }) }}" 
                                        >
                                            <td style="display:none">
                                                {{ ticket.id }}
                                            </td>
                                            <td>
                                                {{ ticket|capitalize }}
                                                {% if isNotSeen %} 
                                                    <span class="badge badge-pill bg-danger new-bull"><span></span></span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if (ticket.createdBy != app.user)%} 
                                                    <b>{{ ticket.createdBy|capitalize }}</b>
                                                    {% if not (('ROLE_ADMIN' in ticket.createdBy.getroles(TRUE)) or ('ROLE_MANAGER' in ticket.createdBy.getroles(TRUE)) or ('ROLE_SUPER_ADMIN' in ticket.createdBy.getroles(TRUE))) %}
                                                      à l'attention de <b>{{ticket.createdBy.customer}}</b><br>
                                                    {% endif %}
                                                    
                                                    {% if support["establishment"] is defined %}
                                                        Établissement : <b>{{support["establishment"]}}</b>
                                                    {% endif %}
                                                    
                                                {% else %} 
                                                    <span class="badge rounded-pill bg-success">Moi</span> 
                                                {% endif %} 
                                            </td>
                                            <td>
                                                {% if ticket.statut == 'Résolu' %}
                                                <span class="badge rounded-pill bg-success"> 
                                                {% elseif ticket.statut == 'En cours de traitement' %}
                                                <span class="badge rounded-pill bg-info"> 
                                                {% else %}
                                                <span class="badge rounded-pill bg-warning"> 
                                                {% endif %}
                                                {{ ticket.createdAt|date("d/m/Y - H:i") }} <br> {{ ticket.statut }}</span>
                                            </td>
                                            <td><span class="data-table-ellipsis">{{ ticket.description|raw }}</span></td>
                                            <td><span class="data-table-ellipsis">{{ ticket.response|raw }}</span></td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block pageJavascript %}
    <script>
        //export devis
        $('#btn-export').click(function(e){
            const element = $(this);
            element.html('<i class="fas fa-spinner fa-spin"></i>');
            let route = $("#route_export").val();
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: route,
                success: function(data){
                let filename = 'liste_des_gerants.csv';
                let csvFile = new Blob([data], {type: "text/csv"});
                let downloadLink = document.createElement("a");
                downloadLink.download = filename;
                downloadLink.href = window.URL.createObjectURL(csvFile);
                document.body.appendChild(downloadLink);
                downloadLink.click();
                element.html('<i class="mdi mdi-download text-muted"></i>');
                },
                error: function() {
                    element.html('<i class="mdi mdi-download text-muted"></i>');
                }
            })
            $('#start_date').datepicker("option", "dateFormat", 'dd/mm/yy');
            $('#end_date').datepicker("option", "dateFormat", 'dd/mm/yy');
        });
        //click ticket bloc
        $(document).on('click', '.row-click-ticket', function (e) {
            e.stopPropagation()
    		var url = $(this).attr('data-url');
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
        //filter type change
        $('#tickets_filter_by_type').on('change', function() {
            const element = $(this);
            if(element.val() !== null){
                $('#filter_wraper').html('<i class="fas fa-spinner fa-spin"></i>');
                const searchParams = new URLSearchParams(window.location.search);
                searchParams.set('tickets_type',element.val());
                setTimeout(() => {
                    window.location.search = searchParams.toString();
                }, 100);
            }
        });
    </script>
{% endblock %}