{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block title %}
    {{ _("Car Sale Report") |capfirst }}
{% endblock title %}

{% block content%}

<div class="container-fluid report-container">
    <header class="report-header text-center">
        <h1 class="display-4">{% trans 'Car Sale Report' %} <span class="fas fa-car mx-2 text-primary"></span><span class="fas fa-money-bill mx-2 text-primary"></span></h1>
        <p class="lead text-muted"><strong>{{dealer}}</strong></p>
        <p class="text-muted">{% trans 'Report Date' %}: {{current_time}}</p>
    </header>

    <main>
        <section id="summary" class="mb-1">
            <h2 class="section-heading mb-2">{% trans 'Report Summary' %}</h2>
            <div class="row ">
                <div class="col-md-6 col-lg-4 mb-2">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title text-primary">{% trans 'Total Revenue Amount' %}<span class="fas fa-solid fa-dollar-sign mx-1"></span><span class="fas fa-car"></span></h5>
                            <p class="card-text fs-4 fw-bold">120000000</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-2">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title text-primary">{% trans 'Total Vat Amount' %}<span class="fas fa-solid fa-percent mx-1"></span><span class="fas fa-car"></span></h5>
                            <p class="card-text fs-4 fw-bold">12000</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-2">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title text-primary">{% trans 'Total Discount Amount' %} <span class="fas fa-solid fa-tag mx-1"></span><span class="fas fa-car"></span></h5>
                            <p class="card-text fs-4 fw-bold">12000</p>
                        </div>
                    </div>
                </div>
                
            

            </div>
                
        </section>

        <section id="purchase-details" class="mb-3">
            <h2 class="section-heading">{% trans 'Detailed Purchase List' %}</h2>

            <div class="d-flex justify-content-end mb-3 d-print-none">
               <a href="{% url 'car-sale-report-csv-export' request.dealer.slug %}" class="btn btn-phoenix-primary">
                   <i class="bi bi-download me-2"></i>{% trans 'Download as CSV' %}
              </a>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered table-sm">
                    <thead >
                        <tr>
                            <th>{% trans 'VIN' %}</th>
                            <th>{% trans 'Make' %}</th>
                            <th>{% trans 'Model' %}</th>
                            <th>{% trans 'Year' %}</th>
                            <th>{% trans 'Serie' %}</th>
                            <th>{% trans 'Trim' %}</th>
                            <th>{% trans 'Mileage' %}</th>
                            <th>{% trans 'Stock Type' %}</th>
                            <th>{% trans 'Created Date' %}</th>
                            <th>{% trans 'Sold Date' %}</th>
                            <th>{% trans 'Cost Price' %}</th>
                            <th>{% trans 'Marked Price' %}</th>
                            <th>{% trans 'Discount Amount' %}</th>
                            <th>{% trans 'Selling Price' %}</th>
                            <th>{% trans 'Tax Amount' %}</th>
                            <th>{% trans 'Invoice Number' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                        {% for car in cars_sold%}
                        <tr>
                            <td class="ps-1">{{car.vin}}</td>                                      
                            <td>{{car.id_car_make.name}}</td>
                            <td>{{car.id_car_model.name}}</td>
                            <td>{{car.year}}</td>
                            <td>{{car.id_car_serie.name}}</td>                                    
                            <td>{{car.id_car_trim.name}}</td>
                            <td>{{car.mileage}}</td>
                            <td>{{car.stock_type}}</td>
                            <td>{{car.created_at}}</td>
                            <td>{{car.sold_date}}</td>
                            <td>{{car.finances.cost_price}}</td>
                            <td>{{car.finances.marked_price}}</td>
                            <td>{{car.finances.discount_amount}}</td> 
                            <td>{{car.finances.selling_price}}</td>
                            <td>{{car.finances.vat_amount}}</td>
                            <td>{{car.item_model.invoicemodel_set.first.invoice_number}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</div>

{% endblock %}