{% extends "base.html" %} {% load i18n static custom_filters %} {% block content %}
<style>
  #video {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
  }
  .modal-dialog {
    max-width: 95%;
  }
</style>
{% include 'partials/form_errors.html' %}

<!-- JavaScript Section -->
<script src="https://unpkg.com/@zxing/library@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>

<div class="container-lg">
  <form method="post" id="carForm" class="form needs-validation" novalidate>
    {% csrf_token %}
    <div class="d-flex flex-column min-vh-100">
      <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
        <main class="d-grid gap-4 p-1">
          <div class="row g-4">
            <!-- VIN -->
            <div class="col-lg-12 col-xl-12">
              <div class="card h-100 border-1 rounded shadow">
                <div class="card-body">
                  <label class="form-label" for="{{ form.vin.id_for_label }}">
                    {% trans 'VIN' %}:
                  </label>
                  <div class="input-group input-group-sm">
                    <button type="button"
                            class="btn btn-phoenix-warning fs-8 rounded-start"
                            id="scan-vin-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#scannerModal">
                      <span class="fas fa-camera"></span>
                    </button>
                    <input type="text"
                           class="form-control form-control-sm"
                           id="{{ form.vin.id_for_label }}" name="{{ form.vin.html_name }}" />
                    <button type="button" class="btn btn-sm btn-phoenix-primary rounded-end" id="decodeVinBtn">
                      {% trans 'Search' %}
                    </button>
                  </div>
                  {% if form.vin.errors %}
                  <div class="text-danger small">
                    {{ form.vin.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <!-- Year Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body" id="year-container">
                  <label class="form-label" for="{{ form.year.id_for_label }}">
                    {% trans 'Year' %}:
                  </label>
                  <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 }}" />
                  {% if form.year.errors %}
                  <div class="text-danger small">
                    {{ form.year.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <!-- Makes Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div id="make-container" class="card-body">
                  <div class="status"></div>
                  <label class="form-label" for="{{ form.id_car_make.id_for_label }}">
                    {% trans 'make'|capfirst %}:
                  </label>
                  <span class="text-success fw-bold" id="make-check"></span>
                  {{ form.id_car_make|add_class:"form-select form-select-sm" }} {% if form.id_car_make.errors %}
                  <div class="text-danger small">
                    {{ form.id_car_make.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>

            <!-- Models Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div id="model-container" class="card-body">
                  <label class="form-label" for="{{ form.id_car_model.id_for_label }}">
                    {% trans 'model'|capfirst %}:
                  </label>
                  <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>
                  {% if form.id_car_model.errors %}
                  <div class="text-danger small">
                    {{ form.id_car_model.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>

            <!-- Series Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body" id="serie-container">
                  <label class="form-label" for="{{ form.id_car_serie.id_for_label }}">
                    {% trans 'Series' %}:
                  </label>
                  <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>
                  {% if form.id_car_serie.errors %}
                  <div class="text-danger small">
                    {{ form.id_car_serie.errors|striptags }}
                  </div>
                  {% endif %}
                <div class="badge-phoenix-primary" id="generation-div"></div>
                </div>
              </div>
            </div>

            <!-- Trims Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body" id="trim-container">
                  <label class="form-label" for="{{ form.id_car_trim.id_for_label }}">
                    {% trans 'trim'|capfirst %}:
                  </label>
                  <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>
                  {% if form.id_car_trim.errors %}
                  <div class="text-danger small">
                    {{ form.id_car_trim.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          <div class="row g-4">
            <!-- Vendor Field -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <div class="form-group">
                    <label for="{{ form.vendor.id_for_label }}" class="form-label">
                      {% trans 'Vendor' %}:
                    </label>
                    {{ form.vendor|add_class:"form-select form-select-sm" }}
                  </div>
                  {% if form.vendor.errors %}
                  <div class="text-danger small">
                    {{ form.vendor.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <!-- Stock Type Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <label class="form-label" for="{{ form.stock_type.id_for_label }}">
                    {% trans 'Stock Type'|capfirst %}:
                  </label>
                  {{ form.stock_type|add_class:"form-select form-select-sm" }} {% if form.stock_type.errors %}
                  <div class="text-danger small">
                    {{ form.stock_type.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <!-- Mileage Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <label class="form-label" for="{{ form.mileage.id_for_label }}">
                    {% trans 'Mileage'|capfirst %}:
                  </label>
                  {{ form.mileage|add_class:"form-control form-control-sm" }} {% if form.mileage.errors %}
                  <div class="text-danger small">
                    {{ form.mileage.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <!-- Receiving Date Field -->
            <div class="col-lg-4 col-xl-3">
                            <div class="card h-100 border-1 rounded shadow">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="{{ form.receiving_date.id_for_label }}"
                                               class="form-label">
                                            {% trans 'Receiving Date' %}:
                                        </label>
                                        {{ form.receiving_date|add_class:"form-control form-control-sm" }}
                                        {% if form.receiving_date.errors %}
                                        <div class="text-danger small">
                                            {{ form.receiving_date.errors|striptags }}
                                        </div>
                                    {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
            <!-- Remarks Card -->
            <div class="col-lg-4 col-xl-3">
              <div class="card h-100">
                <div class="card-body">
                  <label class="label" for="{{ form.remarks.id_for_label }}">
                    {% trans 'Remarks'|capfirst %}:
                  </label>
                  {{ form.remarks|add_class:"form-control form-control-sm" }} {% if form.remarks.errors %}
                  <div class="text-danger small">
                    {{ form.remarks.errors|striptags }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>

          <!-- Specifications Buttons -->
          <div class="row g-1">
            <div class="btn-group">
              <button type="button"
                      class="btn btn-sm btn-danger me-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-danger me-1"
                      id="options-btn"
                      data-bs-toggle="modal"
                      data-bs-target="#equipmentOptionsModal"
                      disabled>{% trans 'options'|capfirst %}
              </button>
              <button type="submit" name="add_another" value="true" class="btn btn-sm btn-success me-1">
                {% trans "Save and Add Another" %}
              </button>
              <button type="submit" name="go_to_stats" value="true" class="btn btn-sm btn-primary">
                {% trans "Save and Go to Inventory" %}
              </button>
            </div>
          </div>
        </main>
      </div>
    </div>
  </form>
  <!-- Specification Modal -->
  <div class="modal fade" id="specificationsModal" tabindex="-1" aria-labelledby="specificationsModalLabel">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content rounded-top-2">
        <div class="modal-header">
          <h5 class="modal-title" id="specificationsModalLabel">
            {% trans 'specifications'|capfirst %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></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">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content rounded-top-2">
        <div class="modal-header">
          <h5 class="modal-title" id="equipmentOptionsModalLabel">
            {% trans 'specifications'|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>
  <!-- CAR FORM -->
</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("token");

    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();
      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)
    })

    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 %}