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

{% block title %} <strong>LISTADO DE CASOS ANULADOS </strong>{% endblock %}

{% block body %}                
    <div class="row justify-content-end mb-3">
        <div class="col-md-12 text-right">
            <button class="btn btn-primary dropdown-toggle mb-2" data-toggle="collapse" data-target="#filtersCasosAnulados">
                <i class="fa fa-filter"></i> Buscar / Filtros
            </button>
        </div>
        <div class="col-md-12">
            <div id="filtersCasosAnulados" class="collapse card card-body bg-light mb-3">
                {{ form_start(filterForm) }}
                <div class="form-group row">
                    <div class="col-md-2">{{ form_row(filterForm.numero) }}</div>
                    <div class="col-md-3">{{ form_row(filterForm.cliente) }}</div>
                    <div class="col-md-3">{{ form_row(filterForm.aseguradora) }}</div>
                    <div class="col-md-2">{{ form_row(filterForm.anuladoPor) }}</div>
                    <div class="col-md-2">{{ form_row(filterForm.anuladoMotivo) }}</div>
                </div>
                <div class="form-group row">
                    <div class="col-md-6">{{ form_row(filterForm.anuladoFecha) }}</div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-success" name="{{ (filterForm.vars.name) }}[filter]">
                            <i class="fa fa-search"></i> Filtrar
                        </button>
                        <button type="submit" class="btn btn-danger ml-2" name="{{ (filterForm.vars.name) }}[reset]">
                            <i class="fa fa-refresh"></i> Limpiar Filtros
                        </button>
                    </div>
                </div>
                {{ form_end(filterForm) }}
            </div>
        </div>
    </div>

    {% if filterForm is filtered %}
        <div class="alert alert-info">
            <i class="fa fa-filter"></i> <strong>Filtros aplicados:</strong>
            {{ renderAppliedFilters(filterForm) }}
        </div>
    {% endif %}
                 
    <table class="table table-border table-hover table-sm">
        <thead class="thead-dark">
            <tr>                
                <th>Caso N°</th>
                <th>Fecha Creado</th>                
                <th>Cargó Usuario</th>                                
                <th>Anuló</th>                                
                <th>Motivo Anulación</th>
                <th>Fecha Anulado</th>                                
                <th>Cliente</th>                
                <th>Etapa</th>                
                <th>Aseguradora</th>
            </tr>
        </thead>
        <tbody>                       
            {% for caso in anulados.currentPageResults %}                                                    
                        <tr class="movRow">                                                
                            <td>
                                <a href="{{ path('caso_show_anulado', {'id': caso.id}) }}" target="_blank" class="btn btn-info"> 
                                       Ver {{ caso.numero }} 
                                    </a>
                            </td>
                            <td>{{ caso.createdAt | date('d/m/Y H:i') }}</td>
                            <td>
                                <span class="badge badge-info" style="background-color: #{{stringToHexa(caso.createdBy.__toString)}}"> 
                                    {{ caso.createdBy | upper }}                                    
                                </span> 
                            </td>
                            <td>
                                <span class="badge badge-info" style="background-color: #{{stringToHexa(caso.anuladoPor.__toString)}}"> 
                                    {{ caso.anuladoPor | upper }}                                    
                                </span>                                 
                            </td>
                            <td>
                                    {{ caso.anuladoMotivo }}                                                                    
                            </td>
                            <td>
                                {{ caso.anuladoFecha | date('d/m/Y H:i') }}
                            </td>
                            <td>
                                {{ caso.getClientesNombres }}
                            </td>
                            <td>
                                {% set etapaData = caso.etapa(0, 1) %}
                                {% if etapaData is not empty %}
                                <h3> <span class="badge" style="background-color: {{ etapaData.color }}; color: {{ etapaData.fontColor }} "> 
                                        {{ caso.etapa(1) }}                            
                                    </span></h3>
                                {% else %}
                                        {{ caso.etapa(1) }}                            
                                {% endif %}
                               
                            </td>
                            <td>
                                {% if caso.aseguradora %}
                                <span class="badge badge-info" style="background-color: #{{stringToHexa(caso.aseguradora.__toString)}}"> 
                                    {{ caso.aseguradora | upper }}                                    
                                </span> 
                                {% endif %}
                              
                            </td>
                            
                        </tr>                                         
            {% endfor %}    
        </tbody>
    </table>        
   
    {% if anulados.haveToPaginate %}
        <div class="pagerfanta mt-3">
            {{ pagerfanta(anulados, 'twitter_bootstrap4', {'next_message' : 'Siguiente', 'prev_message' : 'Anterior'}) }}
        </div>
    {% endif %}
{% endblock %}