{% extends "base.html" %}
{% load i18n static %}
{% block title %}
    {% trans "Inventory Stats"|capfirst %}
{% endblock %}
{% block content %}
    {% block customCSS %}
        <style>
            .road {
                width: 70%;
                height: 10vh;
                position: relative;
                overflow: hidden; /* This is essential for the animation to work correctly */

            }

            .moving-tenhal {
                position: absolute;
                font-size: 3rem;
                font-weight: bold;
                color: #2e5466;
                bottom: 20%;
                white-space: nowrap; /* Prevents the text from wrapping to a new line */
                left: 100%; /* Start the text outside the right edge */
                animation: moveText 5s linear infinite alternate;
            }

            @keyframes moveText {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-100%);
                }
            }
        </style>
    {% endblock %}
    {% if inventory.total_cars > 0 %}
        <div class="row justify-content-between">
            <div class="col-sm-12 ">
                <div class="card border h-100 w-100 p-lg-10" style="">
                    <div class="road">
                        <p class="moving-tenhal ">&nbsp;&nbsp;&nbsp;&nbsp;{% trans "Powered By Tenhal" %}&nbsp;&nbsp;&nbsp;&nbsp;</p>
                    </div>
                    <div class="bg-holder bg-card"
                         style="background-image:url({% static 'images/spot-illustrations/32.png' %});
                                background-position: top right"></div>
                    <div class="d-dark-none">
                        <div class="bg-holder bg-card me-5"
                             style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
                                    background-position: bottom right;
                                    transform: revert"></div>
                    </div>
                    <div class="d-light-none">
                        <div class="bg-holder bg-card me-5"
                             style="background-image:url({% static 'images/spot-illustrations/21.png' %});
                                    background-position: bottom right;
                                    transform: revert"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Cars -->
        <div class="row justify-content-center">
            <div class="col-sm-12">
                <!-- Inventory by Makes -->
                <div class="accordion" id="makesAccordion">
                    {% for make in inventory.makes %}
                        <div class="accordion-item">
                            <p class="accordion-header" id="heading{{ make.make_id }}">
                                <button class="accordion-button collapsed"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapse{{ make.make_id }}"
                                        aria-expanded="true"
                                        aria-controls="collapse{{ make.make_id }}">
                                    {{ make.make_name }}:&nbsp;
                                    <strong>{{ make.total_cars }}</strong>
                                </button>
                            </p>
                            <div id="collapse{{ make.make_id }}"
                                 class="accordion-collapse collapse"
                                 aria-labelledby="heading{{ make.make_id }}"
                                 data-bs-parent="#makesAccordion">
                                <div class="accordion-body">
                                    <p>{% trans "models"|capfirst %}</p>
                                    <ul class="list-group">
                                        {% for model in make.models %}
                                            <li class="list-group-item">
                                                {{ model.model_name }}:&nbsp;
                                                <strong>{{ model.total_cars }}</strong>
                                                <button class="btn btn-sm btn-link text-decoration-none"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#detailsModel{{ model.model_id }}"
                                                        aria-expanded="false"
                                                        aria-controls="detailsModel{{ model.model_id }}">
                                                    {% trans "Details" %}
                                                </button>
                                                <div class="collapse mt-2" id="detailsModel{{ model.model_id }}">
                                                    <p class="mt-2">{% trans "Trims" %}</p>
                                                    <ul>
                                                        {% for trim in model.trims %}
                                                            <li>
                                                                <a href="{% url 'car_inventory' dealer_slug=request.dealer.slug make_id=make.slug model_id=model.slug trim_id=trim.slug %}">{{ trim.trim_name }}</a>&nbsp;-&nbsp;{% trans "Total" %}:
                                                                <strong>{{ trim.total_cars }}</strong>
                                                            </li>
                                                        {% empty %}
                                                            <li>{% trans "No trims available" %}</li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </li>
                                        {% empty %}
                                            <li class="list-group-item">{% trans "No models available." %}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                {% if is_paginated %}
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        {% url "car_add" request.dealer.slug as create_car_url %}

        {% include "empty-illustration-page.html" with value=empty_state_value url=create_car_url %}
    {% endif %}
{% endblock %}
{% block customJS %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const car = document.getElementById('car');
            let positionX = 10;
            const speed = 5;

            document.addEventListener('keydown', (event) => {
                if (event.key === 'ArrowRight') {
                    positionX += speed;
                    car.style.left = positionX + '%';
                } else if (event.key === 'ArrowLeft') {
                    positionX -= speed;
                    if (positionX < 0) {
                        positionX = 0;
                    }
                    car.style.left = positionX + '%';
                }
            });
        });
    </script>
{% endblock %}