{% extends "base.html" %}
{% load i18n static custom_filters %}
{% block title %}
    {% trans 'Add New Car' %}
{% endblock %}
{% block content %}
    <style>
        #video {
            width: 100%;
            max-width: 480px;
            height: auto;
            margin: 0 auto;
        }
        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
    <!-- JavaScript Section -->
    <script src="{% static 'vendors/zxing/index.min.js' %}"></script>
    <script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script>
    {% if not vendor_exists %}
        {% url "vendor_create" request.dealer.slug as create_vendor_url %}
        {% include "empty-illustration-page.html" with value="Vendor" url=create_vendor_url %}
    {% endif %}
    <!---->
    <div class="row justify-content-center mt-5 mb-3 {% if not vendor_exists %}d-none{% endif %}"
         >
        <div class="col-lg-8 col-md-10">
            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                    <h3 class="mb-0 fs-4 text-center text-white">
                        <h3 class="mb-3">
                            {% trans 'Add Car' %}
                            <li class="fas fa-car-on text-primary ms-2"></li>
                        </h3>
                    </h3>
                </div>
                <div class="card-body bg-light-subtle">
                    <form method="post" id="carForm" class="form needs-validation" novalidate>
                        {% csrf_token %}
                        {% include 'partials/form_errors.html' %}
                        <div class="d-flex flex-column">
                            <div class="d-flex flex-column flex-sm-grow-1 p-0">
                                <div class="row g-4">
                                    <!-- VIN Section -->
                                    <div class="col-lg-12 ">
                                        <div class="card bg-body mb-3 shadow-sm">
                                            <div class="card-body">
                                                <!-- Improved VIN input with integrated buttons -->
                                                <div class="mb-3">
                                                    <label for="{{ form.vin.id_for_label }}" class="form-label fw-bold">{% trans 'VIN' %}</label>
                                                    <div class="input-group">
                                                        <input type="text"
                                                               class="form-control text-center"
                                                               id="{{ form.vin.id_for_label }}"
                                                               name="{{ form.vin.html_name }}"
                                                               placeholder="{% trans 'VIN' %}"
                                                               required />
                                                        <button type="button"
                                                                class="btn btn-phoenix-warning"
                                                                id="scan-vin-btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#scannerModal"
                                                                title="{% trans 'Scan VIN' %}">
                                                            <span class="fas fa-camera fs-9"></span>
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-phoenix-success"
                                                                id="decodeVinBtn"
                                                                title="{% trans 'Decode VIN' %}">
                                                            <span class="fas fa-search fs-9"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6">
                                                        <div class="form-floating">
                                                            <input type="number"
                                                                   class="form-control form-control-sm text-center"
                                                                   id="{{ form.year.id_for_label }}"
                                                                   name="{{ form.year.html_name }}" />
                                                            <label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label>
                                                            <span class="text-success fw-bold mt-1 d-block" id="year-check"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6" id="make-row">
                                                        <div class="form-floating">
                                                            {{ form.id_car_make|add_class:"form-select form-select-sm text-center" }}
                                                            <label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
                                                            <span class="text-success fw-bold mt-1 d-block" id="make-check"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6" id="model-row">
                                                        <div class="form-floating">
                                                            <select class="form-select form-select-sm text-center"
                                                                    id="{{ form.id_car_model.id_for_label }}"
                                                                    name="{{ form.id_car_model.html_name }}">
                                                                <option value="">{% trans 'Select' %}</option>
                                                            </select>
                                                            <label for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}</label>
                                                            <span class="text-success fw-bold mt-1 d-block" id="model-check"></span>
                                                        </div>
                                                        <div class="badge badge-phoenix fs-11 badge-phoenix-success m-1"
                                                             id="generation-div"></div>
                                                    </div>
                                                    <div id="serie-row" class="col-md-6">
                                                        <div class="form-floating">
                                                            <select class="form-select form-select-sm text-center"
                                                                    id="{{ form.id_car_serie.id_for_label }}"
                                                                    name="{{ form.id_car_serie.html_name }}">
                                                                <option value="">{% trans 'Select' %}</option>
                                                            </select>
                                                            <label for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6" id="trim-row">
                                                        <div class="form-floating">
                                                            <select class="form-select form-select-sm text-center"
                                                                    id="{{ form.id_car_trim.id_for_label }}"
                                                                    name="{{ form.id_car_trim.html_name }}">
                                                                <option value="">{% trans 'Select' %}</option>
                                                            </select>
                                                            <label for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6 d-flex align-items-center justify-content-center gap-2 mt-2">
                                                        <button type="button"
                                                                class="btn btn-phoenix-success"
                                                                id="specification-btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#specificationsModal"
                                                                disabled>{% trans 'specifications'|capfirst %}</button>
                                                        <button type="button"
                                                                class="btn btn-phoenix-warning"
                                                                id="options-btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#equipmentOptionsModal"
                                                                disabled>{% trans 'options'|capfirst %}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <!--Vendor Field-->
                                            <div class="col-lg-4 col-xl-4">
                                                <div class="card bg-body my-1 shadow-sm">
                                                    <div class="card-body">
                                                        <div class="form-floating">
                                                            {{ form.vendor|add_class:"form-select text-center" }}
                                                            <label for="{{ form.vendor.id_for_label }}" class="form-label">{% trans 'Vendor' %}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Stock Type Card -->
                                            <div class="col-lg-4 col-xl-4">
                                                <div class="card bg-body my-1 shadow-sm">
                                                    <div class="card-body">
                                                        <div class="form-floating">
                                                            {{ form.stock_type|add_class:"form-select text-center" }}
                                                            <label for="{{ form.stock_type.id_for_label }}">{% trans 'Stock Type'|capfirst %}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Mileage Card -->
                                            <div class="col-lg-4 col-xl-4">
                                                <div class="card bg-body my-1 shadow-sm">
                                                    <div class="card-body">
                                                        <div class="form-floating">
                                                            {{ form.mileage|add_class:"form-control text-center" }}
                                                            <label for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Receiving Date Field -->
                                            <div class="col-lg-4 col-xl-4">
                                                <div class="card bg-body my-3 shadow-sm">
                                                    <div class="card-body">
                                                        <div class="form-floating">
                                                            {{ form.receiving_date|add_class:"form-control text-center" }}
                                                            <label for="{{ form.receiving_date.id_for_label }}" class="form-label">{% trans 'Receiving Date' %}:</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Remarks Card -->
                                            <div class="col-lg-4 col-xl-8">
                                                <div class="card bg-body my-3 shadow-sm">
                                                    <div class="card-body">
                                                        <div class="form-floating">
                                                            {{ form.remarks|add_class:"form-control text-center" }}
                                                            <label for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <hr class="my-2">
                                        <!--Save Buttons-->
                                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
                                            <button type="submit"
                                                    hx-on-before-request="this.setAttribute('disabled','true')"
                                                    hx-on-after-request="this.removeAttribute('disabled')"
                                                    name="add_another"
                                                    value="true"
                                                    class="btn btn-lg btn-phoenix-success md-me-2">
                                                {% trans "Save and Add Another" %}
                                            </button>
                                            <button type="submit"
                                                    hx-on-before-request="this.setAttribute('disabled','true')"
                                                    hx-on-after-request="this.removeAttribute('disabled')"
                                                    name="go_to_stats"
                                                    value="true"
                                                    class="btn btn-lg btn-phoenix-primary">
                                                {% trans "Save and Go to Inventory" %}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Modal sections remain largely unchanged -->
            <!--Specification Modal-->
            <div class="modal fade"
                 id="specificationsModal"
                 tabindex="-1"
                 aria-labelledby="specificationsModalLabel"
                 aria-modal="true"
                 role="dialog">
                <div class="modal-dialog modal-md">
                    <div class="modal-content overflow-hidden">
                        <div class="modal-header position-relative">
                            <h5 class="modal-title" id="specificationsModalLabel">
                                <span class="ms-3 my-5">{% trans 'specifications'|capfirst %}</span>
                            </h5>
                            <button class="btn btn-circle project-modal-btn position-absolute end-0 top-0 mt-3 me-3 bg-body-emphasis"
                                    data-bs-dismiss="modal">
                                <span class="fa-solid fa-xmark text-body dark__text-gray-100"></span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <span class="m-1 fw-light">{{ _("Details") }}</span>
                            <div id="specificationsContent"></div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-phoenix-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--equipments and options Modal-->
            <div class="modal fade"
                 id="equipmentOptionsModal"
                 tabindex="-1"
                 aria-labelledby="equipmentOptionsModalLabel"
                 aria-modal="true"
                 role="dialog">
                <div class="modal-dialog modal-md">
                    <div class="modal-content overflow-hidden">
                        <div class="modal-header position-relative">
                            <h5 class="modal-title" id="equipmentOptionsModalLabel">{% trans 'Options'|capfirst %}</h5>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="{% trans 'Close' %}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="col-lg-4 col-xl-3">
                                <div class="card h-100">
                                    <div class="card-body" id="equipment-container">
                                        <label class="form-label" for="equipment_id">{% trans 'equipment'|capfirst %}:</label>
                                        <select class="form-select text-center"
                                                id="equipment_id"
                                                name="equipment_name_id">
                                            <option value="">{% trans 'Select' %}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div id="optionsContent"></div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-phoenix-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Scanner Modal-->
            <div class="modal fade"
                 id="scannerModal"
                 tabindex="-1"
                 aria-labelledby="scannerModalLabel">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content rounded-top-3">
                        <div class="modal-header rounded-top-3 shadow">
                            <h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="{{ _("Close") }}"></button>
                        </div>
                        <div class="modal-body text-center">
                            <video id="video"
                                   autoplay
                                   playsinline
                                   class="img-fluid border rounded shadow-sm">
                            </video>
                            <p id="result" class="mt-2 fw-bold">{{ _("VIN will appear here.") }}</p>
                            <button id="ocr-fallback-btn" class="btn btn-phoenix-primary mt-3">{{ _("Use OCR Fallback") }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---->
{% endblock content %}
{% block customJS %}
    <script>
/*
    // Global variables
let codeReader;
let currentStream = null;
const csrfToken = getCookie("csrftoken");
const ajaxUrl = "{% url 'ajax_handler' request.dealer.slug %}";

// Initialize when page loads and after HTMX swaps
document.addEventListener('DOMContentLoaded', initPage);
document.addEventListener('htmx:afterRequest', initPage);

function initPage() {
    // Get DOM elements
    const elements = {
        vinInput: document.getElementById("{{ form.vin.id_for_label }}"),
        decodeVinBtn: document.getElementById("decodeVinBtn"),
        makeSelect: document.getElementById("{{ form.id_car_make.id_for_label }}"),
        modelSelect: document.getElementById("{{ form.id_car_model.id_for_label }}"),
        yearSelect: document.getElementById("{{ form.year.id_for_label }}"),
        serieSelect: document.getElementById("{{ form.id_car_serie.id_for_label }}"),
        trimSelect: document.getElementById("{{ form.id_car_trim.id_for_label }}"),
        equipmentSelect: document.getElementById("equipment_id"),
        showSpecificationButton: document.getElementById("specification-btn"),
        showEquipmentButton: document.getElementById("options-btn"),
        specificationsContent: document.getElementById("specificationsContent"),
        optionsContent: document.getElementById("optionsContent"),
        generationContainer: document.getElementById("generation-div"),
        closeButton: document.querySelector(".btn-close"),
        scanVinBtn: document.getElementById("scan-vin-btn"),
        videoElement: document.getElementById("video"),
        resultDisplay: document.getElementById("result"),
        fallbackButton: document.getElementById("ocr-fallback-btn")
    };

    // Initialize scanner if available
    if (typeof ZXing !== 'undefined' && !codeReader) {
        codeReader = new ZXing.BrowserMultiFormatReader();
    }

    // Add event listeners
    setupEventListeners(elements);
}

function setupEventListeners(elements) {
    // Remove existing listeners first to prevent duplicates
    removeEventListeners(elements);

    // Add new listeners
    if (elements.decodeVinBtn) {
        elements.decodeVinBtn.addEventListener("click", decodeVin);
    }

    if (elements.scanVinBtn) {
        elements.scanVinBtn.addEventListener("click", () => {
            elements.resultDisplay.textContent = "";
            startScanner(elements.videoElement);
        });
    }

    if (elements.fallbackButton) {
        elements.fallbackButton.addEventListener("click", () => {
            captureAndOCR(elements.videoElement, elements.vinInput);
        });
    }

    if (elements.serieSelect) {
        elements.serieSelect.addEventListener("change", () => {
            const serie_id = elements.serieSelect.value;
            const model_id = elements.modelSelect.value;
            if (serie_id && model_id) loadTrims(serie_id, model_id, elements);
        });
    }

    if (elements.trimSelect) {
        elements.trimSelect.addEventListener("change", () => {
            const trimId = elements.trimSelect.value;
            elements.showSpecificationButton.disabled = !trimId;
            elements.showEquipmentButton.disabled = !trimId;
            if (trimId) loadSpecifications(trimId, elements);
            loadEquipment(trimId, elements);
        });
    }

    if (elements.equipmentSelect) {
        elements.equipmentSelect.addEventListener("change", () => {
            const equipmentId = elements.equipmentSelect.value;
            if (equipmentId) loadOptions(equipmentId, elements);
        });
    }

    if (elements.closeButton) {
        elements.closeButton.addEventListener("click", () => closeModal(elements.scanVinBtn));
    }

    if (elements.makeSelect) {
        elements.makeSelect.addEventListener("change", (e) => {
            loadModels(e.target.value, elements.modelSelect.value, elements);
        });
    }

    if (elements.modelSelect) {
        elements.modelSelect.addEventListener("change", (e) => {
            loadSeries(e.target.value, elements.yearSelect.value, elements);
        });
    }
}

function removeEventListeners(elements) {
    // Remove all event listeners to prevent duplicates
    const events = [
        { element: elements.decodeVinBtn, event: "click", func: decodeVin },
        { element: elements.scanVinBtn, event: "click" },
        { element: elements.fallbackButton, event: "click" },
        { element: elements.serieSelect, event: "change" },
        { element: elements.trimSelect, event: "change" },
        { element: elements.equipmentSelect, event: "change" },
        { element: elements.closeButton, event: "click" },
        { element: elements.makeSelect, event: "change" },
        { element: elements.modelSelect, event: "change" }
    ];

    events.forEach(item => {
        if (item.element) {
            item.element.removeEventListener(item.event, item.func || null);
        }
    });
}

// Cookie helper function
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let cookie of cookies) {
            cookie = cookie.trim();
            if (cookie.substring(0, name.length + 1) === name + "=") {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// VIN Decoding functions
async function decodeVin() {
    const vinInput = document.getElementById("{{ form.vin.id_for_label }}");
    const vinNumber = vinInput.value.trim();

    if (vinNumber.length !== 17) {
        Swal.fire("error", "{% trans 'Please enter a valid VIN.' %}");
        return;
    }

    showLoading();
    try {
        const response = await fetch(`${ajaxUrl}?action=decode_vin&vin_no=${vinNumber}`, {
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                "X-CSRFToken": csrfToken,
            },
        });
        const data = await response.json();

        if (data.success) {
            hideLoading();
            await updateFields(data.data);
        } else {
            hideLoading();
            Swal.fire("{% trans 'error' %}", data.error);
        }
    } catch (error) {
        console.error("Error decoding VIN:", error);
        hideLoading();
        Swal.fire("error", "{% trans 'An error occurred while decoding the VIN.' %}");
    }
}

async function updateFields(vinData) {
    const elements = {
        makeSelect: document.getElementById("{{ form.id_car_make.id_for_label }}"),
        modelSelect: document.getElementById("{{ form.id_car_model.id_for_label }}"),
        yearSelect: document.getElementById("{{ form.year.id_for_label }}"),
        generationContainer: document.getElementById("generation-div")
    };

    console.log(vinData);
    if (vinData.make_id && elements.makeSelect) {
        elements.makeSelect.value = vinData.make_id;
        document.getElementById("make-check").innerHTML = "&#10003;";
        await loadModels(vinData.make_id);
    }
    if (vinData.model_id && elements.modelSelect) {
        elements.modelSelect.value = vinData.model_id;
        document.getElementById("model-check").innerHTML = "&#10003;";
        await loadSeries(vinData.model_id, vinData.year);
    }
    if (vinData.year && elements.yearSelect) {
        elements.yearSelect.value = vinData.year;
        document.getElementById("year-check").innerHTML = "&#10003;";
    }
}

// Scanner functions
async function startScanner(videoElement) {
    if (!codeReader) return;

    codeReader
        .decodeFromVideoDevice(null, videoElement, async (result, err) => {
            if (result) {
                document.getElementById("{{ form.vin.id_for_label }}").value = result.text;
                closeModal();
                await decodeVin();
            }
        })
        .catch(console.error);
}

function captureAndOCR(videoElement, vinInput) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

    if (typeof Tesseract !== 'undefined') {
        Tesseract.recognize(canvas.toDataURL("image/png"), "eng")
            .then(({ data: { text } }) => {
                const vin = text.match(/[A-HJ-NPR-Z0-9]{17}/);
                if (vin) vinInput.value = vin[0];
                closeModal();
                decodeVin();
            })
            .catch((err) => console.error("OCR Error:", err));
    }
}

function closeModal(scanVinBtn) {
    stopScanner();
    try {
        const scannerModal = document.getElementById("scannerModal");
        if (scannerModal) {
            document.activeElement.blur();
            scannerModal.setAttribute("inert", "true");
            const modalInstance = bootstrap.Modal.getInstance(scannerModal);
            if (modalInstance) modalInstance.hide();
            if (scanVinBtn) scanVinBtn.focus();
        }
    } catch (err) {
        console.error("Error closing scanner modal:", err);
    }
}

function stopScanner() {
    if (currentStream) {
        currentStream.getTracks().forEach((track) => track.stop());
        currentStream = null;
    }
    if (codeReader) codeReader.reset();
}

// Data loading functions
function resetDropdown(dropdown, placeholder) {
    if (dropdown) dropdown.innerHTML = `<option value="">${placeholder}</option>`;
}

async function loadModels(makeId, modelSelect, elements) {
    if (!modelSelect) return;

    resetDropdown(modelSelect, '{% trans "Select" %}');
    const response = await fetch(`${ajaxUrl}?action=get_models&make_id=${makeId}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrfToken,
        },
    });
    const data = await response.json();
    data.forEach((model) => {
        const option = document.createElement("option");
        option.value = model.id_car_model;
        option.textContent = document.documentElement.lang === "en" ? model.name : model.arabic_name;
        modelSelect.appendChild(option);
    });
}

async function loadSeries(modelId, year, elements) {
    if (!elements?.serieSelect) return;

    resetDropdown(elements.serieSelect, '{% trans "Select" %}');
    resetDropdown(elements.trimSelect, '{% trans "Select" %}');
    if (elements.specificationsContent) elements.specificationsContent.innerHTML = "";

    const response = await fetch(`${ajaxUrl}?action=get_series&model_id=${modelId}&year=${year}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrfToken,
        },
    });
    const data = await response.json();
    console.log(data);

    data.forEach((serie) => {
        const option = document.createElement("option");
        option.value = serie.id_car_serie;
        option.textContent = document.documentElement.lang === "en" ? serie.name : serie.name;
        if (elements.generationContainer) elements.generationContainer.innerHTML = serie.generation_name;
        elements.serieSelect.appendChild(option);
    });
}

async function loadTrims(serie_id, model_id, elements) {
    if (!elements?.trimSelect) return;

    resetDropdown(elements.trimSelect, '{% trans "Select" %}');
    if (elements.specificationsContent) elements.specificationsContent.innerHTML = "";

    const response = await fetch(`${ajaxUrl}?action=get_trims&serie_id=${serie_id}&model_id=${model_id}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrfToken,
        }
    });
    const data = await response.json();

    data.forEach((trim) => {
        const option = document.createElement("option");
        option.value = trim.id_car_trim;
        option.textContent = document.documentElement.lang === "en" ? trim.name : trim.name;
        elements.trimSelect.appendChild(option);
    });

    if (elements.showSpecificationButton) {
        elements.showSpecificationButton.disabled = !elements.trimSelect.value;
    }
}

async function loadEquipment(trimId, elements) {
    if (!elements?.equipmentSelect) return;

    resetDropdown(elements.equipmentSelect, '{% trans "Select" %}');
    if (elements.optionsContent) elements.optionsContent.innerHTML = "";

    const response = await fetch(`${ajaxUrl}?action=get_equipments&trim_id=${trimId}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': csrfToken
        }
    });
    const data = await response.json();

    data.forEach((equipment) => {
        const option = document.createElement('option');
        option.value = equipment.id_car_equipment;
        option.textContent = equipment.name;
        elements.equipmentSelect.appendChild(option);
    });
}

async function loadSpecifications(trimId, elements) {
    if (!elements?.specificationsContent) return;

    elements.specificationsContent.innerHTML = "";
    const response = await fetch(`${ajaxUrl}?action=get_specifications&trim_id=${trimId}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrfToken,
        },
    });
    const data = await response.json();

    data.forEach((spec) => {
        const parentDiv = document.createElement("div");
        parentDiv.innerHTML = `<strong>${spec.parent_name}</strong>`;
        spec.specifications.forEach((s) => {
            const specDiv = document.createElement("div");
            specDiv.innerHTML = `• ${s.s_name}: ${s.s_value} ${s.s_unit}`;
            parentDiv.appendChild(specDiv);
        });
        elements.specificationsContent.appendChild(parentDiv);
    });
}

async function loadOptions(equipmentId, elements) {
    if (!elements?.optionsContent) return;

    elements.optionsContent.innerHTML = "";
    const response = await fetch(`${ajaxUrl}?action=get_options&equipment_id=${equipmentId}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrfToken,
        },
    });
    const data = await response.json();

    data.forEach((parent) => {
        const parentDiv = document.createElement("div");
        parentDiv.innerHTML = `<strong>${parent.parent_name}</strong>`;
        parent.options.forEach((option) => {
            const optDiv = document.createElement("div");
            optDiv.innerHTML = `• ${option.option_name}`;
            parentDiv.appendChild(optDiv);
        });
        elements.optionsContent.appendChild(parentDiv);
    });
}

// UI Helper functions
function showLoading() {
    Swal.fire({
        title: "{% trans 'Please Wait' %}",
        text: "{% trans 'Loading' %}...",
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        },
    });
}

function hideLoading() {
    Swal.close();
}

function notify(tag, msg) {
    Swal.fire({
        icon: tag,
        titleText: msg,
    });
}/
*/

    // Helper function to get CSRF token from cookies
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== "") {
                const cookies = document.cookie.split(";");
                for (let cookie of cookies) {
                    cookie = cookie.trim();
                    if (cookie.substring(0, name.length + 1) === name + "=") {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

    // SweetAlert loading and notification functions
        function showLoading() {
            Swal.fire({
                title: "{% trans 'Please Wait' %}",
                text: "{% trans 'Loading' %}...",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                },
            });
        }

        function hideLoading() {
            Swal.close();
        }

        function notify(tag, msg) {
            Swal.fire({
                icon: tag,
                titleText: msg,
            });
        }

    // Flag to control programmatic changes vs. user-initiated changes
        let isProgrammaticChange = false;

    // Main initialization function for VIN Decoder logic
        function initVinDecoder() {
        // Get CSRF token
            const csrfToken = getCookie("csrftoken");

        // Get DOM elements
            const vinInput = document.getElementById("{{ form.vin.id_for_label }}");
            const decodeVinBtn = document.getElementById("decodeVinBtn");
            const makeSelect = document.getElementById("{{ form.id_car_make.id_for_label }}");
            const modelSelect = document.getElementById("{{ form.id_car_model.id_for_label }}");
            const yearSelect = document.getElementById("{{ form.year.id_for_label }}");
            const serieSelect = document.getElementById("{{ form.id_car_serie.id_for_label }}");
            const trimSelect = document.getElementById("{{ form.id_car_trim.id_for_label }}");
            const equipmentSelect = document.getElementById("equipment_id");
            const showSpecificationButton = document.getElementById("specification-btn");
            const showEquipmentButton = document.getElementById("options-btn");
            const specificationsContent = document.getElementById("specificationsContent");
            const optionsContent = document.getElementById("optionsContent");
            const generationContainer = document.getElementById("generation-div");
            const closeButton = document.querySelector(".btn-close");
            const scanVinBtn = document.getElementById("scan-vin-btn");
            const videoElement = document.getElementById("video");
            const resultDisplay = document.getElementById("result");
            const fallbackButton = document.getElementById("ocr-fallback-btn");

        // Define AJAX URL
            const ajaxUrl = "{% url 'ajax_handler' request.dealer.slug %}";

        // ZXing and OCR setup
            let codeReader = new ZXing.BrowserMultiFormatReader();
            let currentStream = null;

        // --- Helper Functions for VIN Decoder Logic ---

            function closeModal() {
                stopScanner();
                try {
                    const scannerModal = document.getElementById("scannerModal");
                    if (scannerModal) {
                        document.activeElement.blur();
                        scannerModal.setAttribute("inert", "true");
                        const modalInstance = bootstrap.Modal.getInstance(scannerModal);
                        if (modalInstance) modalInstance.hide();
                        if (scanVinBtn) scanVinBtn.focus();
                    }
                } catch (err) {
                    console.error("Error closing scanner modal:", err);
                }
            }

            async function decodeVin() {
                const vinNumber = vinInput.value.trim();
                if (vinNumber.length !== 17) {
                    Swal.fire("error", "{% trans 'Please enter a valid VIN.' %}");
                    return;
                }
                showLoading();
                try {
                    const response = await fetch(`${ajaxUrl}?action=decode_vin&vin_no=${vinNumber}`, {
                        headers: {
                            "X-Requested-With": "XMLHttpRequest",
                            "X-CSRFToken": csrfToken,
                        },
                    });
                    const data = await response.json();
                    if (data.success) {
                        hideLoading();
                        await updateFields(data.data);
                    } else {
                        hideLoading();
                        Swal.fire("{% trans 'error' %}", data.error);
                    }
                } catch (error) {
                    console.error("Error decoding VIN:", error);
                    hideLoading();
                    Swal.fire("error", "{% trans 'An error occurred while decoding the VIN.' %}");
                }
            }

        /**
         * Orchestrates the updates of fields and subsequent dropdowns based on VIN data.
         * Sets `isProgrammaticChange` to prevent recursive event firing.
         */
            async function updateFields(vinData) {
                console.log(vinData);
                isProgrammaticChange = true; // Set flag to prevent immediate cascade

                try {
                    if (vinData.make_id) {
                        makeSelect.value = vinData.make_id;
                        document.getElementById("make-check").innerHTML = "&#10003;";
                    // Loading models will trigger its change listener, but `isProgrammaticChange`
                    // will prevent immediate cascade to series.
                        await loadModels(vinData.make_id);
                    }

                    if (vinData.model_id) {
                        modelSelect.value = vinData.model_id;
                        document.getElementById("model-check").innerHTML = "&#10003;";
                    // Manually trigger the next step: load series
                        await loadSeries(vinData.model_id, vinData.year, vinData.serie_id); // Pass expected serie_id for selection
                    }

                    if (vinData.year) {
                        yearSelect.value = vinData.year;
                        document.getElementById("year-check").innerHTML = "&#10003;";
                    }
                } finally {
                    isProgrammaticChange = false; // Reset flag after programmatic updates are done
                }
            }


            async function startScanner() {
                codeReader
                    .decodeFromVideoDevice(null, videoElement, async (result, err) => {
                        let res = await result;
                        if (result) {
                            vinInput.value = result.text;
                            closeModal();
                            await decodeVin();
                        }
                    })
                    .catch(console.error);
            }

            function captureAndOCR() {
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                canvas.width = videoElement.videoWidth;
                canvas.height = videoElement.videoHeight;
                context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
                Tesseract.recognize(canvas.toDataURL("image/png"), "eng")
                    .then(({ data: { text } }) => {
                        const vin = text.match(/[A-HJ-NPR-Z0-9]{17}/);
                        if (vin) vinInput.value = vin[0];
                        closeModal();
                        decodeVin();
                    })
                    .catch((err) => console.error("OCR Error:", err));
            }

            function stopScanner() {
                if (currentStream) {
                    currentStream.getTracks().forEach((track) => track.stop());
                    currentStream = null;
                }
                codeReader.reset();
            }

            function resetDropdown(dropdown, placeholder) {
                dropdown.innerHTML = `<option value="">${placeholder}</option>`;
            }

            async function loadModels(makeId) {
                resetDropdown(modelSelect, '{% trans "Select" %}');
                const response = await fetch(`${ajaxUrl}?action=get_models&make_id=${makeId}`, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRFToken": csrfToken,
                    },
                });
                const data = await response.json();
                data.forEach((model) => {
                    const option = document.createElement("option");
                    option.value = model.id_car_model;
                    option.textContent = document.documentElement.lang === "en" ? model.name : model.arabic_name;
                    modelSelect.appendChild(option);
                });
            }

        /**
         * Loads series and optionally selects a specific serie_id, then triggers trim loading.
         * @param {string} modelId
         * @param {string} year
         * @param {string} [selectSerieId] - Optional ID of the serie to select after loading.
         */
            async function loadSeries(modelId, year, selectSerieId = null) {
                resetDropdown(serieSelect, '{% trans "Select" %}');
                resetDropdown(trimSelect, '{% trans "Select" %}');
                specificationsContent.innerHTML = "";
                optionsContent.innerHTML = ""; // Clear options content too
                showSpecificationButton.disabled = true;
                showEquipmentButton.disabled = true;

                const response = await fetch(`${ajaxUrl}?action=get_series&model_id=${modelId}&year=${year}`, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRFToken": csrfToken,
                    },
                });
                const data = await response.json();
                console.log(data);
                data.forEach((serie) => {
                    const option = document.createElement("option");
                    option.value = serie.id_car_serie;
                    option.textContent = document.documentElement.lang === "en" ? serie.name : serie.name;
                    serieSelect.appendChild(option);
                });

                if (selectSerieId && serieSelect.querySelector(`option[value="${selectSerieId}"]`)) {
                    serieSelect.value = selectSerieId;
                    const selectedSerie = data.find(s => s.id_car_serie === selectSerieId);
                    if (selectedSerie) {
                        generationContainer.innerHTML = selectedSerie.generation_name;
                    }
                // If a specific series was selected, now manually load its trims
                    await loadTrims(selectSerieId, modelId, null); // Pass null for selectTrimId, as we only have serie_id from VIN
                } else if (data.length > 0) {
                // If no specific serie to select, but there are series, select the first one
                    serieSelect.value = data[0].id_car_serie;
                    generationContainer.innerHTML = data[0].generation_name || '';
                    await loadTrims(data[0].id_car_serie, modelId, null);
                } else {
                    generationContainer.innerHTML = '';
                }
            }

        /**
         * Loads trims and optionally selects a specific trim_id, then triggers specs/equipment loading.
         * @param {string} serie_id
         * @param {string} model_id
         * @param {string} [selectTrimId] - Optional ID of the trim to select after loading.
         */
            async function loadTrims(serie_id, model_id, selectTrimId = null) {
                resetDropdown(trimSelect, '{% trans "Select" %}');
                specificationsContent.innerHTML = "";
                optionsContent.innerHTML = "";
                showSpecificationButton.disabled = true;
                showEquipmentButton.disabled = true;

                const response = await fetch(`${ajaxUrl}?action=get_trims&serie_id=${serie_id}&model_id=${model_id}`, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRFToken": csrfToken,
                    }
                });
                const data = await response.json();
                data.forEach((trim) => {
                    const option = document.createElement("option");
                    option.value = trim.id_car_trim;
                    option.textContent = document.documentElement.lang === "en" ? trim.name : trim.name;
                    trimSelect.appendChild(option);
                });

                if (selectTrimId && trimSelect.querySelector(`option[value="${selectTrimId}"]`)) {
                    trimSelect.value = selectTrimId;
                // If a specific trim was selected, now manually load its specs and equipment
                    await loadSpecifications(selectTrimId);
                    await loadEquipment(selectTrimId);
                } else if (data.length > 0) {
                // If no specific trim to select, but there are trims, select the first one
                    trimSelect.value = data[0].id_car_trim;
                    await loadSpecifications(data[0].id_car_trim);
                    await loadEquipment(data[0].id_car_trim);
                }
            }

            async function loadEquipment(trimId){
                resetDropdown(equipmentSelect, '{% trans "Select" %}');
                optionsContent.innerHTML = ""; // Clear options content
                showEquipmentButton.disabled = !trimId; // Enable/disable based on trimId presence

                if (!trimId) return; // No trim ID, no equipment to load

                const response = await fetch(`${ajaxUrl}?action=get_equipments&trim_id=${trimId}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': csrfToken
                    }
                });
                const data = await response.json();
                data.forEach((equipment) => {
                    const option = document.createElement('option');
                    option.value = equipment.id_car_equipment;
                    option.textContent = equipment.name;
                    equipmentSelect.appendChild(option);
                });
            }

            async function loadSpecifications(trimId) {
                specificationsContent.innerHTML = "";
                showSpecificationButton.disabled = !trimId; // Enable/disable based on trimId presence

                if (!trimId) return; // No trim ID, no specifications to load

                const response = await fetch(`${ajaxUrl}?action=get_specifications&trim_id=${trimId}`, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRFToken": csrfToken,
                    },
                });
                const data = await response.json();
                data.forEach((spec) => {
                    const parentDiv = document.createElement("div");
                    parentDiv.innerHTML = `<strong>${spec.parent_name}</strong>`;
                    spec.specifications.forEach((s) => {
                        const specDiv = document.createElement("div");
                        specDiv.innerHTML = `• ${s.s_name}: ${s.s_value} ${s.s_unit}`;
                        parentDiv.appendChild(specDiv);
                    });
                    specificationsContent.appendChild(parentDiv);
                });
            }

            async function loadOptions(equipmentId) {
                optionsContent.innerHTML = "";
                if (!equipmentId) return; // No equipment ID, no options to load

                const response = await fetch(`${ajaxUrl}?action=get_options&equipment_id=${equipmentId}`, {
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRFToken": csrfToken,
                    },
                });
                const data = await response.json();
                data.forEach((parent) => {
                    const parentDiv = document.createElement("div");
                    parentDiv.innerHTML = `<strong>${parent.parent_name}</strong>`;
                    parent.options.forEach((option) => {
                        const optDiv = document.createElement("div");
                        optDiv.innerHTML = `• ${option.option_name}`;
                        parentDiv.appendChild(optDiv);
                    });
                    optionsContent.appendChild(parentDiv);
                });
            }

        // --- Event Listeners ---

            if (decodeVinBtn) {
                decodeVinBtn.addEventListener("click", decodeVin);
            }
            if (scanVinBtn) {
                scanVinBtn.addEventListener("click", () => {
                    resultDisplay.textContent = "";
                    startScanner();
                });
            }
            if (fallbackButton) {
                fallbackButton.addEventListener("click", () => {
                    captureAndOCR();
                });
            }

        // Modified modelSelect listener: ONLY triggers loadSeries.
        // The chain will be managed by explicit calls in loadSeries/loadTrims.
            if (modelSelect) {
                modelSelect.addEventListener("change", async (e) => {
                    if (isProgrammaticChange) return; // Prevent user-initiated event during programmatic updates

                    const selectedModelId = e.target.value;
                    const selectedYear = yearSelect.value;
                    if (selectedModelId) {
                        await loadSeries(selectedModelId, selectedYear);
                    } else {
                    // Reset all dependent dropdowns if model is cleared
                        resetDropdown(serieSelect, '{% trans "Select" %}');
                        resetDropdown(trimSelect, '{% trans "Select" %}');
                        resetDropdown(equipmentSelect, '{% trans "Select" %}');
                        specificationsContent.innerHTML = "";
                        optionsContent.innerHTML = "";
                        generationContainer.innerHTML = '';
                        showSpecificationButton.disabled = true;
                        showEquipmentButton.disabled = true;
                    }
                });
            }

        // Modified serieSelect listener: ONLY triggers loadTrims.
        // The chain will be managed by explicit calls in loadTrims.
            if (serieSelect) {
                serieSelect.addEventListener("change", async () => {
                    if (isProgrammaticChange) return; // Prevent user-initiated event during programmatic updates

                    const serie_id = serieSelect.value;
                    const model_id = modelSelect.value; // Get model_id from modelSelect
                    if (serie_id && model_id) {
                        await loadTrims(serie_id, model_id); // Only load trims
                    } else {
                    // Reset dependent dropdowns and content
                        resetDropdown(trimSelect, '{% trans "Select" %}');
                        resetDropdown(equipmentSelect, '{% trans "Select" %}');
                        specificationsContent.innerHTML = "";
                        optionsContent.innerHTML = "";
                        showSpecificationButton.disabled = true;
                        showEquipmentButton.disabled = true;
                    }
                // Update generation text immediately on user change
                    const currentSerie = serieSelect.options[serieSelect.selectedIndex];
                    generationContainer.innerHTML = currentSerie ? currentSerie.dataset.generationName || '' : ''; // Assuming you add data-generation-name to options later
                });
            }

        // trimSelect listener: Triggers loadSpecifications and loadEquipment
            if (trimSelect) {
                trimSelect.addEventListener("change", async () => {
                    if (isProgrammaticChange) return; // Prevent user-initiated event during programmatic updates

                    const trimId = trimSelect.value;
                    if (trimId) {
                        await loadSpecifications(trimId);
                        await loadEquipment(trimId);
                    } else {
                    // Reset dependent content and equipment dropdown
                        specificationsContent.innerHTML = "";
                        optionsContent.innerHTML = "";
                        resetDropdown(equipmentSelect, '{% trans "Select" %}');
                        showSpecificationButton.disabled = true;
                        showEquipmentButton.disabled = true;
                    }
                });
            }

        // equipmentSelect listener: Triggers loadOptions
            if (equipmentSelect) {
                equipmentSelect.addEventListener("change", async () => {
                    if (isProgrammaticChange) return; // Prevent user-initiated event during programmatic updates

                    const equipmentId = equipmentSelect.value;
                    if (equipmentId) {
                        await loadOptions(equipmentId);
                    } else {
                        optionsContent.innerHTML = "";
                    }
                });
            }

            if (closeButton) {
                closeButton.addEventListener("click", closeModal);
            }
            if (makeSelect) {
                makeSelect.addEventListener("change", (e) => {
                // When make changes, only load models. No need to reset programmatically
                // because modelSelect's own listener will handle the cascade if a model is selected.
                    loadModels(e.target.value);

                // However, clear everything downstream immediately for user clarity.
                    resetDropdown(modelSelect, '{% trans "Select" %}');
                    resetDropdown(serieSelect, '{% trans "Select" %}');
                    resetDropdown(trimSelect, '{% trans "Select" %}');
                    resetDropdown(equipmentSelect, '{% trans "Select" %}');
                    specificationsContent.innerHTML = "";
                    optionsContent.innerHTML = "";
                    generationContainer.innerHTML = '';
                    showSpecificationButton.disabled = true;
                    showEquipmentButton.disabled = true;
                });
            }
        }

    // Initialize the VIN decoder when the DOM is fully loaded
        document.addEventListener('DOMContentLoaded', initVinDecoder);

    // Reinitialize after HTMX swaps
        document.addEventListener('htmx:afterSwap', initVinDecoder);
    </script>
{% endblock customJS %}