{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load tenhal_tag %}
{% 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>
        <section id="filters" class="mb-5 p-4 rounded border border-primary">
            <h2 class="section-heading mb-4">
                {% trans 'Filters' %} <i class="fas fa-sliders-h ms-2"></i>
            </h2>
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">{% trans 'Start Date' %}</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" value="{{ start_date|default_if_none:'' }}">
                </div>
                <div class="col-md-4">
                    <label for="end_date" class="form-label">{% trans 'End Date' %}</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" value="{{ end_date|default_if_none:'' }}">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter me-2"></i>{% trans 'Filter' %}
                    </button>
                </div>
            </form>
        </section>
        <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|floatformat:'2g' }}<span class="icon-saudi_riyal"></span></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 %}?start_date={{ start_date|default_if_none:'' }}&end_date={{ end_date|default_if_none:'' }}"
                       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 '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 class="text-nowrap">{{ po.po_amount|floatformat:'g' }}<span class="icon-saudi_riyal"></span></td>
                                    <td>
                                        {% if po.po_fulfilled_date %}
                                            {{ po.po_fulfilled_date }}
                                        {% else %}
                                            {% trans 'Not fulfilled' %}
                                        {% endif %}
                                    </td>
                                    <td>{{ po.po_quantity }}</td>
                                    <td>{{ po.vendors_str }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </main>
    </div>
{% endblock %}