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


{% block content%}

<div class="container-fluid report-container">
    <header class="report-header text-center">
        <h1 class="display-4">{% trans 'Car Purchase Report' %} <span class="fas fa-car mx-2 text-primary"></span><span class="fas fa-chart-bar mx-2 text-primary"></span></h1>
        <p class="lead text-muted"><strong>{{dealer}}</strong></p>
        <p class="text-muted">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 Purchase Amount' %}<span class="fas fa-money-bill ms-1"><span></h5>
                            <p class="card-text fs-4 fw-bold">{{total_po_amount}}</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 Cars Purchased' %}<span class="fas fa-shopping-bag mx-1"></span><span class="fas fa-car"></span></h5>
                            <p class="card-text fs-4 fw-bold">{{total_po_cars}}</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 'purchase-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 'Purchase ID' %}</th>
                            <th>{% trans 'Date Created' %}</th>
                            <th>{% trans 'Status' %}</th>
                            <th>{% trans 'PO Amount' %}</th>
                            <th>{% trans 'Date Fulfilled' %}</th>
                            <th>{% trans 'Created By' %}</th>
                            <th>{% trans 'Cars Purchased' %}</th>
                            <th>{% trans 'Vendor' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                        {% for po in data %}
                        <tr>
                            <td class="ps-1">{{po.po_number}}</td>
                            <td>{{po.po_created}}</td>
                            <td>{{po.po_status}}</td>
                            <td>{{po.po_amount}}</td>
                            <td>{{po.date_fulfilled}}</td>
                            <td>staff</td> 
                            <td>{{po.po_quantity}}</td>
                            <td>
                               {{po.vendors_str}}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6" class="text-end fw-bold">{% trans 'Total Purchase'%}:</td>
                            <td class="fw-bold text-primary">{{total_po_amount}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </section>
    </main>
</div>

{% endblock %}