{% extends 'base.html' %}
{% load i18n static  %}

{% block title %}
    {% trans 'inventory'|capfirst %}
{% endblock %}

{% block inventory %}
    <a class="nav-link active fw-bold">{% trans "inventory" %}<span class="visually-hidden">(current)</span></a>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row g-3 justify-content-between">
            <div class="col-sm-12">
                <div class="card border h-100 w-100 overflow-hidden">
                    <div class="bg-holder d-block bg-card" style="background-image:url({% static 'images/spot-illustrations/32.png' %});background-position: top right;">
                    </div>
                    <div class="d-dark-none me-5">
                      <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %}); background-position: bottom right; background-size: auto;">
                      </div>
                    </div>
                    <div class="d-light-none me-5">
                      <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/21.png' %}); background-position: bottom right; background-size: auto;">
                      </div>
                    </div>
                    <div class="card-body px-lg-5 position-relative">
                        <br>
                        <div class="row align-items-center g-3 g-sm-5 text-start text-sm-start">
                      <div class="col-12 col-sm-auto ">
                        <div class="avatar avatar-3xl avatar-bordered mb-3">
                            {% if cars.first.id_car_make.logo %}
                          <img class="rounded-circle" src="{{ cars.first.id_car_make.logo.url }}" alt="">
                            {% else %}
                          <img class="rounded-circle" src="{% static 'images/logos/car_make/sedan.svg' %}" alt="">
                            {% endif %}
                        </div>
                      </div>
                      <div class="col-12 col-sm-auto flex-1">
                        <h3 class="mb-2">{{ cars.first.id_car_make.get_local_name }}<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span></h3>
                        <p class="text-body-tertiary fw-semibold">{{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span></p>
                      </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-3 justify-content-between mt-4">
            <div class="col-sm-12">
                <div class="table-list" id="inventoryTable">
                    <div class="table-responsive scrollbar mb-3">
                        <table class="table table-sm fs-9 mb-0 overflow-hidden">
                        <thead class="text-body">
                            <tr>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="stock">{% trans 'Stock' %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-start" data-sort="vin" style="min-width: 4.5rem;">{% trans "VIN" %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="date">{% trans "Year"|upper %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="extColor" style="min-width: 8.5rem">{% trans 'Exterior Color'|upper %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="intColor" style="min-width: 8.5rem">{% trans 'Interior Color'|upper %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="location" style="min-width: 12.5rem;">{% trans "Showroom Location"|upper %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="status">{% trans 'Status'|upper %}</th>
                              <th class="pe-1 align-middle white-space-nowrap text-center" data-sort="age" style="min-width: 7rem">{% trans 'Age'|upper %}</th>
                              <th class="no-sort align-middle white-space-nowrap text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for car in cars %}
                            <tr>
                            <td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
                                    {% if car.stock_type == "new" %}
                                    <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("New")}}</span></span>
                                    {% elif car.status == "used" %}
                                    <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Used")}}</span></span>
                                    {% endif %}
                                </td>
                                <td class="align-middle white-space-nowrap text-start fw-bold">{{ car.vin }}</td>
                                <td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td>
                                {% if car.colors.exists %}
                                    <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                        <div class="d-flex flex-column align-items-center">
                                            <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.exterior.rgb }},1) 10%, rgba({{ car.colors.first.exterior.rgb }},0.10) 100%);" title="{{ car.colors.first.exterior.get_local_name }}"></span><span>{{ car.colors.first.exterior.get_local_name }}</span>
                                        </div>
                                    </td>
                                    <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                        <div class="d-flex flex-column align-items-center">
                                            <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.interior.rgb }},1) 10%, rgba({{ car.colors.first.interior.rgb }},0.10) 100%);" title="{{ car.colors.first.interior.get_local_name }}"></span><span>{{ car.colors.first.interior.get_local_name }}</span>
                                        </div>
                                    </td>
                                {% else %}
                                    <td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td>
                                    <td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td>
                                {% endif %}
                                <td class="align-middle white-space-nowrap text-body fs-9 text-center">
                                    {% if car.location.is_owner_showroom %}
                                    {% trans 'Our Showroom' %}
                                {% else %}
                                    {{ car.location.showroom.get_local_name }}
                                {% endif %}
                                </td>
                                <td class="status align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
                                    {% if car.status == "available" %}
                                    <span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{_("Available")}}</span><span class="ms-1" data-feather="check" style="height:13px;width:13px;"></span></span>
                                    {% elif car.status == "sold" %}
                                    <span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{_("Sold")}}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span>
                                    {% elif car.status == "hold" %}
                                    <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1" data-feather="alert-octagon" style="height:13px;width:13px;"></span></span>
                                    {% elif car.status == "reserved" %}
                                    <span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span>
                                    {% elif car.status == "damaged" %}
                                    <span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">{{ _("Damaged") }}</span><span class="ms-1" data-feather="x" style="height:13px;width:13px;"></span></span>
                                    {% endif %}
                                </td>
                                <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-start">
                                    <span class="fw-light">{{ car.receiving_date|timesince }}</span>
                                </td>
                                <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
                                    <div class="btn-reveal-trigger position-static">
                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                                    <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="{% url 'car_detail' car.pk %}">{% trans "view"|capfirst %}</a>
                                    <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                                    </div>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="7" class="d-flex flex-column align-items-center">
                                        <p class="text-muted">{% trans "No cars available." %}</p>
                                        <a href="{% url 'add_car' %}" class="btn btn-primary">{% trans "Add a Car" %}</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                        </table>
                    </div>
                </div>
                    <!-- Pagination -->
                    {% if is_paginated %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination pagination-sm justify-content-center">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1" aria-label="First">&laquo;&laquo;</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">&laquo;</a>
                                    </li>
                                {% endif %}
                                {% for num in page_obj.paginator.page_range %}
                                    {% if page_obj.number == num %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ num }}</span>
                                        </li>
                                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">&raquo;</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">&raquo;&raquo;</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
            </div>
        </div>
    </div>
{% endblock %}