367 lines
13 KiB
HTML
367 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% load crispy_forms_filters %}
|
|
{% load i18n static %}
|
|
{% block title %}
|
|
{{ _("Create Quotation") }}
|
|
{% endblock title %}
|
|
|
|
{% block content %}
|
|
|
|
<style>
|
|
.disabled{
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
.color-box {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
} /* Custom select styles */
|
|
.custom-select {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.select-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.4rem 1rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.select-trigger:hover {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.select-trigger.active {
|
|
border-color: #4a90e2;
|
|
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
|
}
|
|
|
|
.selected-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.selected-value img {
|
|
width: 30px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dropdown-icon {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.custom-select.open .dropdown-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.options-container {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
background-color: white;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.custom-select.open .options-container {
|
|
display: block;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.1s ease;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.option:hover {
|
|
background-color: #f0f7ff;
|
|
}
|
|
|
|
.option.selected {
|
|
background-color: #e6f0ff;
|
|
}
|
|
|
|
.option img {
|
|
width: 30px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Hidden native select for form submission */
|
|
.native-select {
|
|
position: absolute;
|
|
opacity: 0;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
</style>
|
|
<div class="row justify-content-center mt-5 mb-3">
|
|
{% if not items %}
|
|
<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 at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
|
|
href="{% url 'car_add' request.dealer.slug %}">{{ _("Add Car") }}</a>
|
|
</p>
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% if not customer_count %}
|
|
<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 at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
|
|
href="{% url 'customer_create' request.dealer.slug %}">{{ _("Add Customer") }}</a>
|
|
</p>
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-lg-8 col-md-10">
|
|
<div class="card shadow-sm border-0 rounded-3">
|
|
<div class="card-header bg-gray-200 py-3 border-0 rounded-top-3">
|
|
<h3 class="mb-0 fs-4 text-center text-white">
|
|
{% trans "Create Quotation" %}<i class="fa-regular fa-file-lines me-2"></i>
|
|
</h3>
|
|
</div>
|
|
<div class="card-body bg-light-subtle">
|
|
|
|
|
|
<form id="mainForm" method="post" class="needs-validation {% if not items or not customer_count %}disabled{% endif %}">
|
|
|
|
{% csrf_token %}
|
|
<div class="row g-3 col-12">
|
|
{{ form|crispy }}
|
|
<div class="custom-select">
|
|
<!-- Hidden native select for form submission -->
|
|
<select class="native-select" name="item" required tabindex="-1">
|
|
<option value="">Select a car</option>
|
|
{% for item in items %}
|
|
<option value="{{ item.hash }}"></option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<!-- Custom select UI -->
|
|
<div class="select-trigger">
|
|
<div class="selected-value">
|
|
<span>Select a car</span>
|
|
</div>
|
|
<i class="fas fa-chevron-down dropdown-icon"></i>
|
|
</div>
|
|
|
|
<div class="options-container">
|
|
{% for item in items %}
|
|
<div class="option" data-value="{{ item.hash }}" data-image="{{item.logo}}">
|
|
<img src="{{item.logo}}" alt="{{item.model}}">
|
|
<span>{{item.make}} {{item.model}} {{item.serie}} {{item.trim}} {{item.color_name}}</span>
|
|
<div class="color-box" style="background-color: rgb({{ item.exterior_color }});"></div>
|
|
<div class="color-box" style="background-color: rgb({{ item.interior_color }});"></div>
|
|
<span style="color:gray;">({{item.hash_count}} in stock)</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<hr class="my-2">
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
|
|
<button class="btn btn-lg btn-phoenix-success md-me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
|
|
<a href="{% url 'estimate_list' request.dealer.slug%}" class="btn btn-lg btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const Toast = Swal.mixin({
|
|
toast: true,
|
|
position: "top-end",
|
|
showConfirmButton: false,
|
|
timer: 2000,
|
|
timerProgressBar: false,
|
|
didOpen: (toast) => {
|
|
toast.onmouseenter = Swal.stopTimer;
|
|
toast.onmouseleave = Swal.resumeTimer;
|
|
}
|
|
});
|
|
function notify(tag,msg){Toast.fire({icon: tag,titleText: msg});}
|
|
|
|
const customSelects = document.querySelectorAll('.custom-select');
|
|
|
|
customSelects.forEach(select => {
|
|
const trigger = select.querySelector('.select-trigger');
|
|
const optionsContainer = select.querySelector('.options-container');
|
|
const options = select.querySelectorAll('.option');
|
|
const nativeSelect = select.querySelector('.native-select');
|
|
const selectedValue = select.querySelector('.selected-value');
|
|
|
|
// Toggle dropdown
|
|
trigger.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
select.classList.toggle('open');
|
|
trigger.classList.toggle('active');
|
|
|
|
// Close other open selects
|
|
document.querySelectorAll('.custom-select').forEach(otherSelect => {
|
|
if (otherSelect !== select) {
|
|
otherSelect.classList.remove('open');
|
|
otherSelect.querySelector('.select-trigger').classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Handle option selection
|
|
options.forEach(option => {
|
|
option.addEventListener('click', () => {
|
|
const value = option.getAttribute('data-value');
|
|
const image = option.getAttribute('data-image');
|
|
const text = option.querySelector('span').textContent;
|
|
|
|
// Update selected display
|
|
selectedValue.innerHTML = `
|
|
<img src="${image}" alt="${text}">
|
|
<span>${text}</span>
|
|
`;
|
|
|
|
// Update native select value
|
|
nativeSelect.value = value;
|
|
|
|
// Mark as selected
|
|
options.forEach(opt => opt.classList.remove('selected'));
|
|
option.classList.add('selected');
|
|
|
|
// Close dropdown
|
|
select.classList.remove('open');
|
|
trigger.classList.remove('active');
|
|
|
|
// Trigger change event
|
|
const event = new Event('change');
|
|
nativeSelect.dispatchEvent(event);
|
|
});
|
|
});
|
|
|
|
// Close when clicking outside
|
|
document.addEventListener('click', () => {
|
|
select.classList.remove('open');
|
|
trigger.classList.remove('active');
|
|
});
|
|
|
|
// Initialize with native select value
|
|
if (nativeSelect.value) {
|
|
const selectedOption = select.querySelector(`.option[data-value="${nativeSelect.value}"]`);
|
|
if (selectedOption) {
|
|
selectedOption.click();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Form submission
|
|
/*const form = document.getElementById('demo-form');
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(form);
|
|
alert(`Selected value: ${formData.get('car')}`);
|
|
});*/
|
|
|
|
document.getElementById('mainForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const titleInput = document.querySelector('[name="title"]');
|
|
if (titleInput.value.length < 5) {
|
|
notify("error", "Customer Estimate Title must be at least 5 characters long.");
|
|
return; // Stop form submission
|
|
}
|
|
|
|
// Collect all form data
|
|
const formData = {
|
|
csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
title: document.querySelector('[name=title]').value,
|
|
customer: document.querySelector('[name=customer]').value,
|
|
item: [],
|
|
quantity: [1],
|
|
opportunity_id: "{{opportunity_id}}"
|
|
};
|
|
|
|
|
|
// Collect multi-value fields (e.g., item[], quantity[])
|
|
document.querySelectorAll('[name="item"]').forEach(input => {
|
|
formData.item.push(input.value);
|
|
});
|
|
|
|
console.log(formData);
|
|
|
|
try {
|
|
// Send data to the server using fetch
|
|
const response = await fetch("{% url 'estimate_create' request.dealer.slug %}", {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': formData.csrfmiddlewaretoken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
// Parse the JSON response
|
|
const data = await response.json();
|
|
|
|
// Handle the response
|
|
if (data.status === "error") {
|
|
notify("error", data.message); // Display an error message
|
|
} else if (data.status === "success") {
|
|
notify("success","Estimate created successfully");
|
|
setTimeout(() => {
|
|
window.location.assign(data.url); // Redirect to the provided URL
|
|
}, 1000);
|
|
} else {
|
|
notify("error","Unexpected response from the server");
|
|
}
|
|
} catch (error) {
|
|
|
|
notify("error", error);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|