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

{% block title %}Rendiciones{% endblock %}

{% block body %}

{{ include('aprobaciones/panel/header.html.twig') }}
<div id="#v-pills-fpr">
<div class="shadow-lg p-3 mb-5 bg-white rounded"
>
    <h1>{{titulo|default('Rendiciones')}}</h1>
<div class="card-group text-white" align="center">
	<div class="col-md-3 col-sm-12">
        {% if color_fondo==2 %}
		        <div class="border-warning rounded-30 shadow p-4 mb-5 bg-secondary pendientes" style="margin:10px;border-left: 8px solid;cursor:pointer;">

        {% else %}
        <div class="border-warning rounded-30 shadow p-4 mb-5 bg-info pendientes" style="margin:10px;border-left: 8px solid;cursor:pointer;">
        {% endif %}
			<div class="row">
				<div class="col-5">
					<h1><i class="fas fa-clock"></i></h1>
				</div>
				<div class="col-7">
					<h1>{{pendientes.contador}}</h1>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3 col-sm-12">
        {% if color_fondo==1 %}
        <div class="border-warning rounded-30 shadow p-4 mb-5 bg-secondary aprobados" style="margin:10px;border-left: 8px solid">

        {% else %}
		<div class="border-warning rounded-30 shadow p-4 mb-5  bg-success aprobados" style="margin:10px;border-left: 8px solid;cursor:pointer;">

        {% endif %}
			<div class="row">
				<div class="col-5">
					<h1 ><i class="fas fa-thumbs-up"></i></h1>
				</div>
				<div class="col-7"  id="aprobados">
					<h1>{{aprobados.contador}}</h1>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3 col-sm-12">
         {% if color_fondo== 7%}
        <div class="border-warning rounded-30 shadow p-4 mb-5 bg-secondary rechazados" style="margin:10px;border-left: 8px solid">

        {% else %}
		<div class="border-warning rounded-30 shadow p-4 mb-5  bg-danger rechazados" style="margin:10px;border-left: 8px solid;cursor:pointer;">
        {% endif %}
			<div class="row">
				<div class="col-5">
					<h1 ><i class="fas fa-thumbs-down"></i></h1>
				</div>
				<div class="col-7">
				<h1>{{rechazados.contador}}</h1>
				</div>
			</div>
		</div>
	</div>
    <div class="col-md-3 col-sm-12">
         {% if color_fondo==8 %}
        <div class="border-warning rounded-30 shadow p-4 mb-5 bg-secondary finalizados" style="margin:10px;border-left: 8px solid">

        {% else %}
		<div class="border-warning rounded-30 shadow p-4 mb-5  bg-warning finalizados" style="margin:10px;border-left: 8px solid;cursor:pointer;">
        {% endif %}
			<div class="row">
				<div class="col-5">
					<h1 ><i class="fas fa-credit-card"></i></h1>
				</div>
				<div class="col-7">
				<h1>{{finalizados.contador}}</h1>
				</div>
			</div>
		</div>
	</div>
</div>


    <form action="{{path('aprobaciones_fpr')}}" id="form_busqueda" method="post">
    <input type="hidden" value="{{color_fondo}}" name="estado" id="estado">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <small class="text-mute">Fecha Inicial</small>
                <input type="text" name="txtFechaInicio" class="form-control date" autocomplete="off" value="{{fecha_inicial}}">
            </div>
            <div class="col-md-3 col-sm-6">
                <small class="text-mute">Fecha Final</small>
                <input type="text" name="txtFechaFin" class="form-control date"  autocomplete="off" value="{{fecha_final}}">
            </div>
            <div class="col-md-3 col-sm-6">
                <small class="text-mute">Trabajador</small>
                <select name="cboTrabajador" class="form-control">
                <option value=''></option>
                {% for usuario in trabajadores %}
                <option value='{{usuario.id}}' 
                    {% if usuario.id == trabajador %}
                    selected
                    {% endif %}
                >{{usuario.nombre}}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col-md-3 col-sm-6">
                <button class="btn btn-primary"><i class="fas fa-search"></i></button>
            </div>
        
        </div>
    </form>

    <form action="{{path('aprobaciones_fpr_excel')}}" id="form_excel_busqueda" method="post">
        <input type="hidden" value="{{color_fondo}}" name="estado" id="estado">
        <input type="hidden" name="txtFechaInicio" value="{{fecha_inicial}}">
        <input type="hidden" name="txtFechaFin"  value="{{fecha_final}}">
        <input type="hidden" name="cboTrabajador" value="{{trabajador}}">
        <button class="btn btn-success"><i class="fas fa-file-excel"></i></button>
    </form>


{# display navigation #}
        <div class="navigation">
            {{ knp_pagination_render(rendiciones,'@KnpPaginator/Pagination/twitter_bootstrap_v4_pagination_v2.html.twig',{},{
            'position': 'centered',
            'rounded': true,
            }) }}
        </div>

        <div  class="table-responsive-lg">
            <table class="table">
                <thead>
                    <tr>
                        <th>Número</th>
                        <th>Trabajador</th>
                        <th>Fecha registro</th>
                        <th>Fecha inicio</th>
                        <th>Fecha fin</th>
                        <th>Monto</th>
                        <th>Estado</th>
                        <th>Tipo</th>
                        <th>Ver</th>
     
                    </tr>
                </thead>
                <tbody>
                {% for rendicion in rendiciones %}
                    {% if rendicion.estado.id==3 %}
                    <tr class="bg-light text-dark">
                    {% else %}
                    <tr>
                    {% endif %}
                        <td>{{ rendicion.numero }}</td>
                        <td>{{ rendicion.usuario.nombre }}</td>
                        <td>{{ rendicion.fechaRegistro ? rendicion.fechaRegistro|date('Y-m-d H:i:s') : '' }}</td>
                        <td>{{ rendicion.fechaInicio ? rendicion.fechaInicio|date('Y-m-d') : '' }}</td>
                        <td>{{ rendicion.fechaFin ? rendicion.fechaFin|date('Y-m-d') : '' }}</td>
                    
                        <td>{{ rendicion.monto|number_format }}</td>
                        <td><p>{{ rendicion.estado }} 
                        {% if rendicion.reparos>0 %}
                            <i class="fas fa-info-circle text-danger" data-toggle="tooltip" data-placement="top" title="{{rendicion.reparos}} reparos"></i>
                        {% endif %}
                        </p>
                        </td>
                        <td>{{ rendicion.tipo }}</td>
                        <td>
                            <a href="{{ path('rendicion_show', {'id': rendicion.id}) }}" class="btn btn-primary"><i class="fas fa-eye"></i></a>
                        </td>
                       
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7">no records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    
</div>
<script>
$(".date").datepicker({
			format: "yyyy-mm-dd",
			todayBtn: true,
			language: "es",
			todayHighlight: true
		});
    $(".pendientes").click(function(){
      // window.location.href='{{path('aprobaciones_fpr',{'estado':2})}}';

        $("#form_busqueda #estado").val(2);
        $("#form_busqueda").submit();
    });
    $(".aprobados").click(function(){
       //window.location.href='{{path('aprobaciones_fpr',{'estado':1})}}';
        $("#form_busqueda #estado").val(1);
        $("#form_busqueda").submit();
    });
    $(".rechazados").click(function(){
      // window.location.href='{{path('aprobaciones_fpr',{'estado':7})}}';
        $("#form_busqueda #estado").val(7);
        $("#form_busqueda").submit();
    });

    $(".finalizados").click(function(){
      // window.location.href='{{path('aprobaciones_fpr',{'estado':8})}}';
        $("#form_busqueda #estado").val(8);
        $("#form_busqueda").submit();
    });

    function paginationForm(pag){
        $("#form_busqueda").attr('action',pag);
        $("#form_busqueda").submit();
    }

</script>
{{ include('aprobaciones/panel/footer.html.twig') }}
{% endblock %}