{% extends "base.html" %}
{% load i18n static %}

{% block content %}
<div class="row g-3">
  <div class="col-sm-12 col-md-8">
    <h2>
      {% if form.instance.pk %}
        {{ _("Edit Lead") }}
      {% else %}
        {{ _("Add New Lead") }}
      {% endif %}
    </h2>
  </div>

  <div class="col-sm-12 col-md-8">
    <!-- The 'novalidate' attribute is removed to allow HTML5 validation.
         If you prefer manual validation, you can add 'novalidate'. -->
    <form class="row g-3 form needs-validation" method="post" action="{% url 'lead_create' %}">
      {% csrf_token %}

      <!-- Title -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-control"
            id="{{ form.title.id_for_label }}"
            name="{{ form.title.name }}"
            aria-label="{{ _('Title') }}"
            required
          >
            <option value="">{{ _('Select Title') }}</option>
            {% for value, label in form.title.field.choices %}
              <option value="{{ value }}" {% if form.title.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.title.id_for_label }}">{{ _("Title") }}</label>
        </div>
      <span class="invalid-feedback">{{ form.title.errors }}</span>
      </div>

      <!-- First Name -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="text"
            class="form-control"
            id="{{ form.first_name.id_for_label }}"
            name="{{ form.first_name.name }}"
            value="{{ form.first_name.value|default:'' }}"
            placeholder="{{ _('Enter first name') }}"
            aria-label="{{ _('First Name') }}"
            required
          >
          <label for="{{ form.first_name.id_for_label }}">{{ _("First Name") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.first_name.errors }}</span>
      </div>

      <!-- Last Name -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="text"
            class="form-control"
            id="{{ form.last_name.id_for_label }}"
            name="{{ form.last_name.name }}"
            value="{{ form.last_name.value|default:'' }}"
            placeholder="{{ _('Enter last name') }}"
            aria-label="{{ _('Last Name') }}"
            required
          >
          <label for="{{ form.last_name.id_for_label }}">{{ _("Last Name") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.last_name.errors }}</span>
      </div>

      <!-- Email -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="email"
            class="form-control"
            id="{{ form.email.id_for_label }}"
            name="{{ form.email.name }}"
            value="{{ form.email.value|default:'' }}"
            placeholder="{{ _('Enter email') }}"
            aria-label="{{ _('Email') }}"
            required
          >
          <label for="{{ form.email.id_for_label }}">{{ _("Email") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.email.errors }}</span>
      </div>

      <!-- Phone Number -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="text"
            class="form-control"
            id="{{ form.phone_number.id_for_label }}"
            name="{{ form.phone_number.name }}"
            value="{{ form.phone_number.value|default:'' }}"
            placeholder="{{ _('Enter phone number') }}"
            aria-label="{{ _('Phone Number') }}"
            pattern="^[+]?[\d\s-]{5,}$"
            required>
          <label for="{{ form.phone_number.id_for_label }}">{{ _("Phone Number") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.phone_number.errors }}</span>
      </div>

      <!-- Salary -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="number"
            class="form-control"
            id="{{ form.salary.id_for_label }}"
            name="{{ form.salary.name }}"
            value="{{ form.salary.value|default:'' }}"
            placeholder="{{ _('Enter salary') }}"
            aria-label="{{ _('Salary') }}"
            required
          >
          <label for="{{ form.salary.id_for_label }}">{{ _("Salary") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.salary.errors }}</span>
      </div>

      <!-- Obligations -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="number"
            class="form-control"
            id="{{ form.obligations.id_for_label }}"
            name="{{ form.obligations.name }}"
            value="{{ form.obligations.value|default:'' }}"
            placeholder="{{ _('Enter obligations') }}"
            aria-label="{{ _('Obligations') }}"
            required
          >
          <label for="{{ form.obligations.id_for_label }}">{{ _("Obligations") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.obligations.errors }}</span>
      </div>

      <!-- Car Make -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-select"
            id="{{ form.id_car_make.id_for_label }}"
            name="{{ form.id_car_make.name }}"
            aria-label="{{ _('Car Make') }}">
            <option value="">{{ _('Select Make') }}</option>
            {% for value, label in form.id_car_make.field.choices %}
              <option value="{{ value }}" {% if form.id_car_make.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.id_car_make.id_for_label }}">{{ _("Car Make") }}</label>
        </div>

      </div>

      <!-- Car Model -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-select"
            id="{{ form.id_car_model.id_for_label }}"
            name="{{ form.id_car_model.name }}"
            aria-label="{{ _('Car Model') }}">
            <option value="">{{ _('Select Model') }}</option>
            {% for value, label in form.id_car_model.field.choices %}
              <option value="{{ value }}" {% if form.id_car_model.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.id_car_model.id_for_label }}">{{ _("Car Model") }}</label>
        </div>
      </div>

      <!-- Year -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <input
            type="number"
            class="form-control"
            id="{{ form.year.id_for_label }}"
            name="{{ form.year.name }}"
            value="{{ form.year.value|default:'' }}"
            placeholder="{{ _('Enter year') }}"
            aria-label="{{ _('Year') }}"
            required
          >
          <label for="{{ form.year.id_for_label }}">{{ _("Year") }}</label>
        </div>
          <span class="invalid-feedback">{{ form.year.errors }}</span>
      </div>

      <!-- Source -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-control"
            id="{{ form.source.id_for_label }}"
            name="{{ form.source.name }}"
            aria-label="{{ _('Source') }}"
            required
          >
            <option value="">{{ _('Select Source') }}</option>
            {% for value, label in form.source.field.choices %}
              <option value="{{ value }}" {% if form.source.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.source.id_for_label }}">{{ _("Source") }}</label>
        </div>
      <span class="invalid-feedback">{{ form.source.errors }}</span>
      </div>

      <!-- Channel -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-control"
            id="{{ form.channel.id_for_label }}"
            name="{{ form.channel.name }}"
            aria-label="{{ _('Channel') }}"
            required
          >
            <option value="">{{ _('Select Channel') }}</option>
            {% for value, label in form.channel.field.choices %}
              <option value="{{ value }}" {% if form.channel.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.channel.id_for_label }}">{{ _("Channel") }}</label>
        </div>
      <span class="invalid-feedback">{{ form.channel.errors }}</span>
      </div>

      <!-- Assigned -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-control"
            id="{{ form.assigned.id_for_label }}"
            name="{{ form.assigned.name }}"
            aria-label="{{ _('Assigned To') }}"
            required
          >
            <option value="">{{ _('Select Assignee') }}</option>
            {% for value, label in form.assigned.field.choices %}
              <option value="{{ value }}" {% if form.assigned.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.assigned.id_for_label }}">{{ _("Assigned To") }}</label>
        </div>
      <span class="invalid-feedback">{{ form.assigned.errors }}</span>
      </div>

      <!-- Priority -->
      <div class="col-sm-6 col-md-4">
        <div class="form-floating">
          <select
            class="form-control"
            id="{{ form.priority.id_for_label }}"
            name="{{ form.priority.name }}"
            aria-label="{{ _('Priority') }}"
            required
          >
            <option value="">{{ _('Select Priority') }}</option>
            {% for value, label in form.priority.field.choices %}
              <option value="{{ value }}" {% if form.priority.value == value %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
          <label for="{{ form.priority.id_for_label }}">{{ _("Priority") }}</label>
        </div>
      <span class="invalid-feedback">{{ form.priority.errors }}</span>
      </div>

      <!-- Form Actions -->
      <div class="col-sm-12">
        <button
          type="submit"
          name="add_lead"
          id="lead-save"
          class="btn btn-phoenix-primary"
        >
          {{ _("Save") }}
        </button>
        <a href="{% url 'lead_list' %}" class="btn btn-phoenix-secondary">
          {{ _("Cancel") }}
        </a>
      </div>
    </form>
  </div>
</div>

<script>
  // Reusable function to get the CSRF cookie
  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 ajaxUrl = "{% url 'ajax_handler' %}";
    const makeSelect = document.getElementById("{{ form.id_car_make.id_for_label }}");
    const modelSelect = document.getElementById("{{ form.id_car_model.id_for_label }}");
    const csrfToken = getCookie("csrftoken");

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

    // Load car models based on make
    async function loadModels(makeId) {
      // Show a temporary loading message
      resetDropdown(modelSelect, "{{ _('Loading...') }}");
      try {
        const response = await fetch(`${ajaxUrl}?action=get_models&make_id=${makeId}`, {
          headers: {
            "X-CSRFToken": csrfToken,
            "X-Requested-With": "XMLHttpRequest",
          },
        });
        const data = await response.json();

        // Reset dropdown before populating
        resetDropdown(modelSelect, "{{ _('Select Model') }}");
        data.forEach((model) => {
          const option = document.createElement("option");
          option.value = model.id_car_model;
          // Display name based on language
          option.textContent = document.documentElement.lang === "en" ? model.name : model.arabic_name;
          modelSelect.appendChild(option);
        });
      } catch (error) {
        console.error("Error loading models:", error);
      }
    }

    // When car make changes, load corresponding models
    makeSelect.addEventListener("change", () => {
      const make_id = makeSelect.value;
      if (make_id) {
        loadModels(make_id);
      } else {
        resetDropdown(modelSelect, "{{ _('Select Model') }}");
      }
    });

    // Debug normal form submission
    document.querySelector("form").addEventListener("submit", (event) => {
      // If you'd like to handle the form manually, uncomment the next line:
      // event.preventDefault();
      console.log("Form submitted normally");
    });
  });
</script>
{% endblock %}