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


{% block content%}

<style>
   
    .summary-card {
        border: 1px solid var(--card-border);
        border-radius: .5rem;
        box-shadow: var(--card-shadow);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .summary-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .summary-card .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .summary-card .card-title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--secondary-color) !important;
    }
    .summary-card .card-text {
        font-size: 2.25rem;
        font-weight: 700;
        
    }
    
</style>

<div class="container-fluid report-container">
    <header class="report-header text-center">
        <h1 class="display-4">{% trans 'Car Purchase Report' %}<i class="fas fa-chart-pie ms-2 text-primary"></i></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-5">
            <h2 class="section-heading mb-4 border-start border-3 border-primary p-2">{% trans 'Report Summary' %}</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Purchase Amount' %}<span class="fas fa-money-bill ms-2"></span></h5>
                            <p class="card-text">{{total_po_amount}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Cars Purchased' %}<span class="fas fa-car ms-2"></span></h5>
                            <p class="card-text">{{total_po_cars}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Purchase Orders' %}<span class="fas fa-file-invoice ms-2"></span></h5>
                            <p class="card-text">{{data|length}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="purchase-details" class="mb-3">
            <h2 class="section-heading border-start border-3 border-primary p-2">{% 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">
                    <thead class="bg-body-highlight">
                        <tr>
                            <th scope="col">{% trans 'Purchase ID' %}</th>
                            <th scope="col">{% trans 'Date Created' %}</th>
                            <th scope="col">{% trans 'Status' %}</th>
                            <th scope="col">{% trans 'PO Amount' %}</th>
                            <th scope="col">{% trans 'Date Fulfilled' %}</th>
                            <th scope="col">{% trans 'Created By' %}</th>
                            <th scope="col">{% trans 'Cars Purchased' %}</th>
                            <th scope="col">{% trans 'Vendor' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for po in data %}
                        <tr>
                            <td>{{po.po_number}}</td>
                            <td>{{po.po_created|date}}</td>
                            <td>{{po.po_status}}</td>
                            <td>{{po.po_amount}}</td>
                            <td>
                                {% if po.po_fulfilled_date%}
                                    {{po.po_fulfilled_date}}
                                {%else%}
                                    {% trans 'Not fulfilled'%}
                                {% endif %}
                            </td>
                            <td>{% firstof po.created_by.get_full_name 'staff' %}</td>
                            <td>{{po.po_quantity}}</td>
                            <td>
                               {{po.vendors_str}}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</div>

{% endblock %}