{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load tenhal_tag %}
{% block title %}
    {{ _("Car Sale 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 Sale Report' %} <span class="fas fa-chart-line 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="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-3">
                    <label for="make-select" class="form-label">{% trans 'Make' %}</label>
                    <select id="make-select" name="make" class="form-select">
                        <option value="">{% trans 'All Makes' %}</option>
                        {% for make in makes %}
                            <option value="{{ make }}" {% if make == selected_make %}selected{% endif %}>{{ make }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="model-select" class="form-label">{% trans 'Model' %}</label>
                    <select id="model-select" name="model" class="form-select">
                        <option value="">{% trans 'All Models' %}</option>
                        {% for model in models %}
                            <option value="{{ model }}" {% if model == selected_model %}selected{% endif %}>{{ model }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="serie-select" class="form-label">{% trans 'Serie' %}</label>
                    <select id="serie-select" name="serie" class="form-select">
                        <option value="">{% trans 'All Series' %}</option>
                        {% for serie in series %}
                            <option value="{{ serie }}" {% if serie == selected_serie %}selected{% endif %}>{{ serie }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="year-select" class="form-label">{% trans 'Year' %}</label>
                    <select id="year-select" name="year" class="form-select">
                        <option value="">{% trans 'All Years' %}</option>
                        {% for year in years %}
                            <option value="{{ year }}" {% if year|stringformat:"s" == selected_year %}selected{% endif %}>{{ year }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-primary w-100"><i class="fas fa-filter me-2"></i>{% trans 'Filter' %}</button>
                </div>
            </form>
        </section>

        <section id="summary" class="mb-5">
            <h2 class="section-heading mb-4 border-start border-5 border-primary p-2">{% trans 'Report Summary' %}</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Revenue' %}<span class="icon-saudi_riyal"></span></h5>
                            <p class="card-text">{{ total_revenue|floatformat:2 }} <span class="icon-saudi_riyal"></span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total VAT Amount' %}<i class="fas fa-percent ms-2"></i></h5>
                            <p class="card-text">{{ 10000|floatformat:2 }} <span class="icon-saudi_riyal"></span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Discount Amount' %}<i class="fas fa-tag ms-2"></i></h5>
                            <p class="card-text">{{ total_discount|floatformat:2 }} <span class="icon-saudi_riyal"></span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card summary-card">
                        <div class="card-body">
                            <h5 class="card-title">{% trans 'Total Cars Sold' %}<i class="fas fa-car ms-2"></i></h5>
                            <p class="card-text">{{ cars_sold|length }}</p>
                        </div>
                    </div>
                </div>



            </div>

        </section>

        <section id="sale-details" class="mb-3">
            <h2 class="section-heading border-start border-5 border-primary p-2">{% trans 'Detailed Sale List' %}</h2>
            <div class="d-flex justify-content-end mb-3 d-print-none">
                <a href="{% url 'car-sale-report-csv-export' 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 class="fs-9">{% trans 'VIN' %}</th>
                            <th class="fs-9">{% trans 'Make' %}</th>
                            <th class="fs-9">{% trans 'Model' %}</th>
                            <th class="fs-9">{% trans 'Year' %}</th>
                            <th class="fs-9">{% trans 'Serie' %}</th>
                            <th class="fs-9">{% trans 'Trim' %}</th>
                            <th class="fs-9">{% trans 'Mileage' %}</th>
                            <th class="fs-9">{% trans 'Stock Type' %}</th>
                            <th class="fs-9">{% trans 'Created Date' %}</th>
                            <th class="fs-9">{% trans 'Sold Date' %}</th>
                            <th class="fs-9">{% trans 'Cost Price' %}</th>
                            <th class="fs-9">{% trans 'Marked Price' %}</th>
                            <th class="fs-9">{% trans 'Discount Amount' %}</th>
                            <th class="fs-9">{% trans 'Selling Price' %}</th>
                            <th class="fs-9">{% trans 'Tax Amount' %}</th>
                            <th class="fs-9">{% trans 'Invoice Number' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for car in cars_sold %}

                        <tr>
                            <td class="ps-1 fs-9">{{ car.vin }}</td>
                            <td class="fs-9">{{ car.id_car_make.name }}</td>
                            <td class="fs-9">{{ car.id_car_model.name }}</td>
                            <td class="fs-9">{{ car.year }}</td>
                            <td class="fs-9">{{ car.id_car_serie.name }}</td>
                            <td class="fs-9">{{ car.id_car_trim.name }}</td>
                            <td class="fs-9">{{ car.mileage }}</td>
                            <td class="fs-9">{{ car.stock_type|capfirst }}</td>
                            <td class="fs-9">{{ car.created_at|date }}</td>
                            <td class="fs-9">{{ car.invoice.date_paid|date|default_if_none:"-" }}</td>
                            <td class="fs-9">{{ car.finances.cost_price }} <span class="icon-saudi_riyal"></span></td>
                            <td class="fs-9">{{ car.finances.marked_price }} <span class="icon-saudi_riyal"></span></td>
                            <td class="fs-9">{{ car.finances.total_discount }} <span class="icon-saudi_riyal"></span></td>
                            <td class="fs-9">{{ car.finances.selling_price }} <span class="icon-saudi_riyal"></span></td>
                            <td class="fs-9">{{ car.finances.vat_amount }} <span class="icon-saudi_riyal"></span></td>
                            <td class="fs-9">{{ car.invoice.invoice_number }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>
</div>

{% endblock %}