{% extends 'base.html' %}
{% load i18n %}
{% load tenhal_tag %}
{% block title %}
  {% trans "Aging Inventory" %}
{% endblock title %}
{% block content %}
    <div class="main-content flex-grow-1 container-fluid mt-4 mb-3">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 pb-3 border-bottom">
            <h2 class="h3 fw-bold mb-3 mb-md-0">
                {% trans "Aging Inventory" %}
                <i class="fas fa-box-open text-danger ms-2"></i>
            </h2>
            <h4 class="text-muted mb-3 ">
                {% trans "Aging Inventory Total" %} :: <span class=" text-danger">{{ total_aging_inventory_value|floatformat:'2g'|default:0.00 }}<span class="icon-saudi_riyal"></span></span>
            </h4>
            <p class="text-muted mb-0">{% trans "Cars in inventory for more than 60 days." %}</p>
        </div>
        <form method="GET" class="d-flex flex-wrap align-items-center mb-4 g-3">
            <div class="col-sm-6 col-md-2 me-2">
                <label for="make-filter"
                       class="form-label mb-0 small text-uppercase fw-bold">{% trans "Make:" %}</label>
                <select class="form-select" name="make" id="make-filter">
                    <option value="">{% trans "All" %}</option>
                    {% for make in all_makes %}
                        <option value="{{ make }}" {% if make == selected_make %}selected{% endif %}>{{ make }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-sm-6 col-md-2 me-2">
                <label for="model-filter"
                       class="form-label mb-0 small text-uppercase fw-bold">{% trans "Model:" %}</label>
                <select class="form-select" name="model" id="model-filter">
                    <option value="">{% trans "All" %}</option>
                    {% for model in all_models %}
                        <option value="{{ model }}"
                                {% if model == selected_model %}selected{% endif %}>{{ model }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-sm-6 col-md-2 me-2">
                <label for="series-filter"
                       class="form-label mb-0 small text-uppercase fw-bold">{% trans "Series:" %}</label>
                <select class="form-select" name="series" id="series-filter">
                    <option value="">{% trans "All" %}</option>
                    {% for series in all_series %}
                        <option value="{{ series }}"
                                {% if series == selected_series %}selected{% endif %}>{{ series }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-sm-6 col-md-2 me-2">
                <label for="year-filter"
                       class="form-label mb-0 small text-uppercase fw-bold">{% trans "Year:" %}</label>
                <select class="form-select" name="year" id="year-filter">
                    <option value="">{% trans "All" %}</option>
                    {% for year in all_years %}
                        <option value="{{ year }}"
                                {% if year|stringformat:"s" == selected_year %}selected{% endif %}>{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-sm-6 col-md-2 me-2">
                <label for="stock-type-filter"
                       class="form-label mb-0 small text-uppercase fw-bold">{% trans "Stock Type:" %}</label>
                <select class="form-select" name="stock_type" id="stock-type-filter">
                    <option value="">{% trans "All" %}</option>
                    {% for stock_type in all_stock_types %}
                        <option value="{{ stock_type }}"
                                {% if stock_type == selected_stock_type %}selected{% endif %}>
                            {{ stock_type|title }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary mt-4">{% trans "Filter" %}</button>
            </div>
        </form>
        {% if is_paginated %}
            <div class="d-flex justify-content-between mb-4">
                <span class="text-muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}</span>
                <span class="text-muted">{% trans "Total Aging Cars:" %} {{ count_of_aging_cars }}</span>
            </div>
        {% endif %}
        {% if cars %}
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for car in cars %}
                    <div class="col">
                        <div class="card h-100 shadow-sm border-0">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title text-danger fw-bold">
                                    <img src="{{ car.logo }}" width="40" height="40" class="">
                                    &nbsp;&nbsp;{{ car.id_car_make.name }}&nbsp;&nbsp;{{ car.id_car_model.name }}&nbsp;&nbsp;{{ car.id_car_serie.name }}&nbsp;&nbsp;{{ car.year }}
                                </h5>
                                <p class="card-text text-muted mb-2">
                                    <strong>{% trans "VIN:" %}</strong> <a href="{% url 'car_detail' request.dealer.slug car.slug %}">{{ car.vin }}</a>
                                </p>
                                <p class="card-text mb-2">
                                    <strong>{% trans "Age:" %}</strong>
                                    <span class="badge bg-danger">{{ car.age_in_days }} {% trans "days" %}</span>
                                </p>
                                <p class="card-text mb-2">
                                    <strong>{% trans "Acquisition Date:" %}</strong> {{ car.receiving_date|date:"F j, Y" }}
                                </p>
                                <div class="mt-auto pt-3 border-top">
                                    <a href="{% url 'car_detail' request.dealer.slug car.slug %}"
                                       class="btn btn-outline-primary btn-sm w-100">{% trans "View Details" %}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                <div>{% trans "Excellent! There are no cars in the aging inventory at the moment." %}</div>
            </div>
        {% endif %}
        
                {% if is_paginated %}
                    {% include 'partials/pagination.html' %}
                {% endif %}
            
        
    </div>
{% endblock content %}