{% extends 'base.html' %}

{% block content %}

<div class="container-xl">
			    
    <h1 class="app-page-title">Resumen</h1>
    
    <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
        <a class="flex-sm-fill text-sm-center nav-link active" id="orders-all-tab" data-bs-toggle="tab" href="#orders-all" role="tab" aria-controls="orders-all" aria-selected="true">Todos</a>
        {% for cadacoche in vehiculos %}

        <a class="flex-sm-fill text-sm-center nav-link"  id="orders-paid-tab" data-bs-toggle="tab" href="#{{ cadacoche.matricula }}" role="tab" aria-controls="orders-paid" aria-selected="false">{{ cadacoche.marca }}</a>
        
        {% endfor %}	


        <a class="flex-sm-fill text-sm-center nav-link" id="orders-pending-tab" data-bs-toggle="tab" href="#vehiculos" role="tab" aria-controls="orders-pending" aria-selected="false">Vehículos</a>
    </nav>
    
    
    <div class="tab-content" id="orders-table-tab-content">
        <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
            <div class="app-card app-card-orders-table shadow-sm mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table app-table-hover mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">Fecha</th>
                                    <th class="cell">Vehículo</th>
                                    <th class="cell">Kilómetros</th>
                                    <th class="cell">Litros</th>
                                    <th class="cell">Descuento</th>
                                    <th class="cell">Precio/litro</th>
                                    <th class="cell">Importe</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for repostaje in repostajes %}
                                <tr>
                                    <td class="cell">{{ repostaje.id }}</td>
                                    <td class="cell">{{ repostaje.fecha }}</td>
                                    <td class="cell">{{ repostaje.vehiculos.matricula }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.0f"|format(repostaje.kms) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.litros) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.descuento) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.precioxlitro) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.importe) }}</td>
                                </tr>
                                {% endfor %}	
                            </tbody>
                        </table>
                    </div><!--//table-responsive-->  
                </div><!--//app-card-body-->		
            </div><!--//app-card-->						
        </div><!--//tab-pane-->
              
        {% for micoche in vehiculos %}

        <div class="tab-pane fade" id="{{ micoche.matricula }}" role="tabpanel" aria-labelledby="orders-paid-tab">
            <div class="app-card app-card-orders-table mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">Fecha</th>
                                    <th class="cell">Vehículo</th>
                                    <th class="cell">Kilómetros</th>
                                    <th class="cell">Litros</th>
                                    <th class="cell">Descuento</th>
                                    <th class="cell">Precio/litro</th>
                                    <th class="cell">Importe</th>
                                    <!--
                                    <th class="cell">Recorridos</th>
                                    <th class="cell">Consumo/100kms</th>
                                    -->
                                </tr>
                            </thead>

                            <tbody> 
                                {% for repostaje in repostajes %}

                                {% if repostaje.vehiculo_id == micoche.id %}

                                <tr>
                                    <td class="cell">{{ repostaje.id }}</td>
                                    <td class="cell">{{ repostaje.fecha }}</td>
                                    <td class="cell">{{ repostaje.vehiculos.matricula }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.0f"|format(repostaje.kms) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.litros) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.descuento) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.precioxlitro) }}</td>
                                    <td style="text-align: right" class="cell">{{ "%.2f €"|format(repostaje.importe) }}</td>
                                </tr>
                                {% endif %}
                                {% endfor %}                 
                               
                            </tbody>

                        </table>
                    </div><!--//table-responsive-->
                </div><!--//app-card-body-->		
            </div><!--//app-card-->
        </div><!--//tab-pane-->
        {% endfor %}	

        
        <div class="tab-pane fade" id="vehiculos" role="tabpanel" aria-labelledby="orders-pending-tab">
            <div class="app-card app-card-orders-table mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">Marca</th>
                                    <th class="cell">Modelo</th>
                                    <th class="cell">Matricula</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in vehiculos %}
                                <tr>
                                <td class="cell">{{ row.id }}</td>
                                <td class="cell">{{ row.marca }}</td>
                                <td class="cell">{{ row.modelo }}</td>
                                <td class="cell">{{ row.matricula }}</td>
                                </tr>
                                {% endfor %}	

                            </tbody>
                        </table>
                    </div><!--//table-responsive-->
                </div><!--//app-card-body-->		
            </div><!--//app-card-->
        </div><!--//tab-pane-->
    </div><!--//tab-content-->
    


</div><!--//container-fluid-->

{% endblock %}