388 lines
13 KiB
HTML
388 lines
13 KiB
HTML
{% 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 %} |