{% extends "base.html" %}
{% load static i18n %}
{% block content %}
    <div class="container">
        <div id="car_list" data-list="">
            <div class="search-box mb-3 mx-auto">
                <form class="position-relative">
                    <input class="form-control search-input search form-control-sm"
                           type="search"
                           placeholder="Search"
                           aria-label="Search" />
                    <span class="fas fa-search search-box-icon"></span>
                </form>
            </div>
            <div class="row justify-content-end g-0">
                <div class="col-auto px-3">
                    <select class="form-select form-select-sm mb-3"
                            data-list-filter="data-list-filter">
                        <option selected="" value="">{{ _("Status") }}</option>
                        <option value="available">{{ _("Available") }}</option>
                        <option value="reserved">{{ _("Reserved") }}</option>
                        <option value="sold">{{ _("Sold") }}</option>
                        <option value="transfer">{{ _("Transfer") }}</option>
                        <option value="damaged">{{ _("Damaged") }}</option>
                    </select>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-sm fs-9 mb-0">
                    <thead>
                        <tr class="bg-body-highlight">
                            <th class="sort border-top border-translucent ps-1" data-sort="vin">{{ _("VIN") }}</th>
                            <th class="sort border-top border-translucent" data-sort="make">{{ _("Make") }}</th>
                            <th class="sort border-top border-translucent" data-sort="model">{{ _("Model") }}</th>
                            <th class="sort border-top border-translucent" data-sort="status">{{ _("Status") }}</th>
                        </tr>
                    </thead>
                    <tbody class="list">
                        <tr></tr>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between mt-3">
                <span class="d-none d-sm-inline-block fs-9 fw-bold"
                      data-list-info="data-list-info"><span class="text-body-tertiary fs-9 fw-bold"></span></span>
                <div class="d-flex">
                    <button class="page-link disabled" data-list-pagination="prev" disabled="">
                        <span class="fas fa-chevron-left"></span>
                    </button>
                    <ul class="mb-0 pagination">
                        <li class="active">
                            <button class="page" type="button" data-i="1" data-page="10">1</button>
                        </li>
                        <li>
                            <button class="page" type="button" data-i="2" data-page="5">2</button>
                        </li>
                    </ul>
                    <button class="page-link pe-0" data-list-pagination="next">
                        <span class="fas fa-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let currentPage = 1;

            function loadPage(page) {
                fetch(`/api/cars/?page=${page}`)
                    .then(response => response.json())
                    .then(data => {
                        let tbody = document.querySelector("#car_list .list");
                        tbody.innerHTML = ""; // Clear table content

                        data.data.forEach(car => {
                            let row = document.createElement("tr");
                            row.innerHTML = `
                    <td class="align-middle ps-1 vin">${car.vin || "N/A"}</td>
                    <td class="align-middle make">${car.id_car_make__name}</td>
                    <td class="align-middle model">${car.id_car_model__name}</td>
                    <td class="align-middle status text-end py-3 pe-3">
                        <div class="badge badge-phoenix fs-10 badge-phoenix-${getBadgeClass(car.status)}">
                            <span class="fw-bold">${car.status}</span>
                        </div>
                    </td>
                `;
                            tbody.appendChild(row);
                        });

                        updatePagination(data.page, data.total_pages, data.total_items, data.per_page);
                    })
                    .catch(error => console.error("Error loading car data:", error));
            }

            function updatePagination(currentPage, totalPages, totalItems, per_page) {
                let pagination = document.querySelector(".pagination");
                let paginationInfo = document.querySelector("[data-list-info]");
                let prevButton = document.querySelector("[data-list-pagination='prev']");
                let nextButton = document.querySelector("[data-list-pagination='next']");

        // Update info text
                let startItem = (currentPage - 1) * per_page + 1;
                let endItem = Math.min(currentPage * per_page, totalItems);
                paginationInfo.innerHTML = `${startItem} to ${endItem} <span class="text-body-tertiary  fs-9 fw-bold"> Items of </span>${totalItems}`;

        // Clear previous pagination
                pagination.innerHTML = "";

        // Generate page buttons dynamically
                for (let i = 1; i <= totalPages; i++) {
                    let li = document.createElement("li");
                    li.className = currentPage === i ? "active" : "";
                    li.innerHTML = `<button class="page" type="button" data-i="${i}" data-page="${per_page}">${i}</button>`;
                    li.querySelector("button").addEventListener("click", () => {
                        currentPage = i;
                        loadPage(currentPage);
                    });
                    pagination.appendChild(li);
                }

        // Update previous & next buttons
                prevButton.disabled = currentPage === 1;
                nextButton.disabled = currentPage === totalPages;

                prevButton.onclick = () => {
                    if (currentPage > 1) {
                        currentPage--;
                        loadPage(currentPage);
                    }
                };
                nextButton.onclick = () => {
                    if (currentPage < totalPages) {
                        currentPage++;
                        loadPage(currentPage);
                    }
                };
            }

            function getBadgeClass(status) {
                switch (status.toLowerCase()) {
                    case "available":
                        return "success";
                    case "sold":
                        return "primary";
                    case "reserved":
                        return "danger";
                    case "transfer":
                        return "info";
                    case "damaged":
                        return "secondary";
                    default:
                        return "secondary";
                }
            }

    // Load the first page when the document is ready
            loadPage(currentPage);
        });
    </script>
{% endblock %}