{% 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 %}
        <div class="alert alert-outline-warning d-flex align-items-center"
             role="alert">
            <i class="fa-solid fa-circle-info fs-6"></i>
            <p class="mb-0 flex-1">{{ _("Please Add A Vendor, Before Adding A Car .") }} <a href="{% url 'vendor_create' %}" class="ms-3 text-body-primary fs-9" >{{ _("Add Vendor") }}</a> </p>
            <button class="btn-close"
                    type="button"
                    data-bs-dismiss="alert"
                    aria-label="Close"></button>
        </div>
    {% endif %}
    <div class=" container-fluid m-0 {% if not vendor_exists %}disabled{% endif %}">
        <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">
                        <h3 class="mb-3">{% trans 'Add Car' %}</h3>
                        <!-- VIN -->
                        <div class="col-lg-12 col-xl-6">
                            <div class="card bg-body mb-3">
                                <div class="card-body">
                                    <div class="form-floating">
                                        <input type="text"
                                               class="form-control form-control-sm"
                                               id="{{ form.vin.id_for_label }}"
                                               name="{{ form.vin.html_name }}"
                                               required />
                                        <label for="{{ form.vin.id_for_label }}">{% trans 'VIN' %}</label>
                                    </div>
                                    <div class="input-group input-group-sm my-2">
                                        <button type="button"
                                                class="btn btn-phoenix-warning rounded-start"
                                                id="scan-vin-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#scannerModal">
                                            <span class="fas fa-camera fs-9"></span>
                                        </button>
                                        <button type="button"
                                                class="btn btn-sm btn-phoenix-primary rounded-end ms-1"
                                                id="decodeVinBtn">
                                            <span class="fas fa-search fs-9 fw-bolder"></span>
                                        </button>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <span class="text-success fw-bold" id="year-check"></span>
                                                <input type="number"
                                                       class="form-control form-control-sm"
                                                       id="{{ form.year.id_for_label }}"
                                                       name="{{ form.year.html_name }}" />
                                                <label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label>
                                            </div>
                                        </div>
                                        <div id="serie-row" class="col-md-6">
                                            <div class="form-floating">
                                                <select class="form-select form-select-sm"
                                                        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>
                                    <div class="row mt-2">
                                        <div class="col-md-6" id="make-row">
                                            <div class="form-floating">
                                                <span class="text-success fw-bold" id="make-check"></span>
                                                {{ form.id_car_make|default:'Select' }}
                                                <label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6" id="trim-row">
                                            <div class="form-floating">
                                                <select class="form-select form-select-sm"
                                                        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-2">
                                        <div class="col-md-6" id="model-row">
                                            <div class="form-floating">
                                                <span class="text-success fw-bold" id="model-check"></span>
                                                <select class="form-select form-select-sm"
                                                        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>
                                            </div>
                                            <div class="badge badge-phoenix fs-11 badge-phoenix-success m-1"
                                                 id="generation-div"></div>
                                        </div>
                                        <div class="col-4 align-items-center">
                                            <button type="button"
                                                    class="btn btn-sm btn-phoenix-success p-1"
                                                    id="specification-btn"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#specificationsModal"
                                                    disabled>{% trans 'specifications'|capfirst %}</button>
                                            <button type="button"
                                                    class="btn btn-sm btn-phoenix-warning p-1"
                                                    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-xl-6">
                            <div class="row">
                                <!--Vendor Field-->
                                <div class="col-lg-4 col-xl-4">
                                    <div class="card bg-body my-1">
                                        <div class="card-body">
                                            <div class="form-floating">
                                                {{ form.vendor|add_class:"form-select form-select-sm" }}
                                                <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">
                                        <div class="card-body">
                                            <div class="form-floating">
                                                {{ form.stock_type|add_class:"form-select form-select-sm" }}
                                                <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">
                                        <div class="card-body">
                                            <div class="form-floating">
                                                {{ form.mileage|add_class:"form-control form-control-sm" }}
                                                <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">
                                        <div class="card-body">
                                            <div class="form-floating">
                                                {{ form.receiving_date|add_class:"form-control form-control-sm" }}
                                                <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">
                                        <div class="card-body">
                                            <div class="form-floating">
                                                {{ form.remarks|add_class:"form-control form-control-sm" }}
                                                <label for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Save Buttons-->
                            <div class="btn-group">
                                <button type="submit"
                                        name="add_another"
                                        value="true"
                                        class="btn btn-sm btn-phoenix-success me-1">
                                    {% trans "Save and Add Another" %}
                                </button>
                                <button type="submit"
                                        name="go_to_stats"
                                        value="true"
                                        class="btn btn-sm btn-phoenix-primary">
                                    {% trans "Save and Go to Inventory" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!--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><span class="ms-1 fw-light">{{ _("Details") }}</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">
                        <div id="specificationsContent"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-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 form-select-sm"
                                            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-outline-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>
                        </video>
                        <p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
                        <button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    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;
    }

    document.addEventListener("DOMContentLoaded", function () {
      const csrfToken = getCookie("csrftoken");

      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 ajaxUrl = "{% url 'ajax_handler' %}";

      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");
      let codeReader;
      codeReader = new ZXing.BrowserMultiFormatReader();
      let currentStream = null;

      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.' %}");
        /*alert("{% 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) {
        console.log(vinData);
        if (vinData.make_id) {
          makeSelect.value = vinData.make_id;
          document.getElementById("make-check").innerHTML = "&#10003;";
          await loadModels(vinData.make_id);
        }
        if (vinData.model_id) {
          modelSelect.value = vinData.model_id;
          document.getElementById("model-check").innerHTML = "&#10003;";

          await loadSeries(vinData.model_id, vinData.year);
        }
        if (vinData.year) {
          yearSelect.value = vinData.year;
          document.getElementById("year-check").innerHTML = "&#10003;";
        }
      }

    // Start the scanner
      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);
        });
      }

      async function loadSeries(modelId, year) {
        resetDropdown(serieSelect, '{% trans "Select" %}');
        resetDropdown(trimSelect, '{% trans "Select" %}');
        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;
          generationContainer.innerHTML = serie.generation_name
          serieSelect.appendChild(option);
        });
      }

      async function loadTrims(serie_id, model_id) {
        resetDropdown(trimSelect, '{% trans "Select" %}');
        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;
          trimSelect.appendChild(option);
        });
        showSpecificationButton.disabled = !this.value;
      }

      async function loadEquipment(trimId){
        resetDropdown(equipmentSelect, '{% trans "Select" %}');
        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;
          equipmentSelect.appendChild(option);
        });
      }

      async function loadSpecifications(trimId) {
        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);
          });
          specificationsContent.appendChild(parentDiv);
        });
      }

      async function loadOptions(equipmentId) {
        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);
          });
          optionsContent.appendChild(parentDiv);
        });
      }


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

      fallbackButton.addEventListener("click", () => {
        captureAndOCR();
      })

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

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

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

      closeButton.addEventListener("click", closeModal);
      makeSelect.addEventListener("change", (e) => {
        loadModels(e.target.value, modelSelect.value);
      })
      modelSelect.addEventListener("change", (e) => {
        loadSeries(e.target.value, yearSelect.value);
      })
      decodeVinBtn.addEventListener("click", decodeVin);
    })


    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,
      });
    }
    </script>
{% endblock %}