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

<!-- JavaScript Section -->

    <script src="{% static 'vendors/zxing/index.min.js' %}"></script>
    <script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script>

<div class=" container-fluid m-0">
  <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 %}