203 lines
9.4 KiB
HTML
203 lines
9.4 KiB
HTML
{% load i18n static%}
|
|
<!DOCTYPE html>
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<html lang="{{ LANGUAGE_CODE }}"
|
|
dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
|
|
data-bs-theme=""
|
|
data-navigation-type="default"
|
|
data-navbar-horizontal-shape="default">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
|
|
<title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
|
|
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
|
|
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
|
|
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
|
|
<script src="{% static 'js/config.js' %}"></script>
|
|
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
|
|
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
|
|
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
|
|
<link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
|
|
{% if LANGUAGE_CODE == 'en' %}
|
|
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
|
|
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
|
|
{% else %}
|
|
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
|
|
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
|
|
{% endif %}
|
|
</head>
|
|
<body>
|
|
|
|
<main class="main" id="top">
|
|
{% include 'messages.html' %}
|
|
{% include 'header.html' %}
|
|
<div class="content">
|
|
|
|
{% block content %}
|
|
<!-- Main content goes here -->
|
|
{% endblock %}
|
|
|
|
{% include 'footer.html' %}
|
|
</div>
|
|
</main>
|
|
|
|
{% block extra_js %}{% endblock extra_js %}
|
|
<script>
|
|
|
|
// Function to calculate Total Cost and Total Revenue
|
|
function calculateTotals(container) {
|
|
const quantity = parseFloat(container.querySelector('.quantity').value) || 0;
|
|
const unitCost = parseFloat(container.querySelector('.unitCost').value) || 0;
|
|
const unitSalesPrice = parseFloat(container.querySelector('.unitSalesPrice').value) || 0;
|
|
|
|
const totalCost = quantity * unitCost;
|
|
const totalRevenue = quantity * unitSalesPrice;
|
|
|
|
container.querySelector('.totalCost').value = totalCost.toFixed(2);
|
|
container.querySelector('.totalRevenue').value = totalRevenue.toFixed(2);
|
|
}
|
|
|
|
// Add event listeners to inputs for dynamic calculation
|
|
function addInputListeners(container) {
|
|
container.querySelectorAll('.quantity, .unitCost, .unitSalesPrice').forEach(input => {
|
|
input.addEventListener('input', () => calculateTotals(container));
|
|
});
|
|
}
|
|
|
|
// Add new form fields
|
|
document.getElementById('addMoreBtn').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const formContainer = document.getElementById('formContainer');
|
|
const newForm = document.createElement('div');
|
|
newForm.className = 'form-container row g-3 mb-3 mt-5';
|
|
newForm.innerHTML = `
|
|
<div class="mb-2 col-sm-2">
|
|
<select class="form-control item" name="item[]" required>
|
|
{% for item in items %}
|
|
<option value="{{ item.pk }}">{{ item.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mb-2 col-sm-2">
|
|
<input class="form-control quantity" type="number" placeholder="Quantity" name="quantity[]" required>
|
|
</div>
|
|
<div class="mb-2 col-sm-2">
|
|
<input class="form-control unitCost" type="number" placeholder="Unit Cost" name="unitCost[]" step="0.01" required>
|
|
</div>
|
|
<div class="mb-2 col-sm-2">
|
|
<input class="form-control unitSalesPrice" type="number" placeholder="Unit Sales Price" name="unitSalesPrice[]" step="0.01" required>
|
|
</div>
|
|
<div class="mb-2 col-sm-2">
|
|
<input class="form-control totalCost" type="number" placeholder="Total Cost" name="totalCost[]" readonly>
|
|
</div>
|
|
<div class="mb-2 col-sm-1">
|
|
<input class="form-control totalRevenue" type="number" placeholder="Total Revenue" name="totalRevenue[]" readonly>
|
|
</div>
|
|
<div class="mb-2 col-sm-1">
|
|
<button class="btn btn-danger removeBtn">Remove</button>
|
|
</div>
|
|
`;
|
|
formContainer.appendChild(newForm);
|
|
addInputListeners(newForm); // Add listeners to the new form
|
|
|
|
// Add remove button functionality
|
|
newForm.querySelector('.removeBtn').addEventListener('click', function() {
|
|
newForm.remove();
|
|
});
|
|
});
|
|
|
|
// Add listeners to the initial form
|
|
document.querySelectorAll('.form-container').forEach(container => {
|
|
addInputListeners(container);
|
|
|
|
// Add remove button functionality to the initial form
|
|
container.querySelector('.removeBtn').addEventListener('click', function() {
|
|
container.remove();
|
|
});
|
|
});
|
|
const url = "{% url 'estimate_create' %}"
|
|
document.getElementById('mainForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Collect all form data
|
|
const formData = new FormData(this);
|
|
const csrfToken = getCookie('csrftoken');
|
|
const data = {};
|
|
formData.forEach((value, key) => {
|
|
// Handle multi-value fields (e.g., item[], quantity[])
|
|
if (data[key]) {
|
|
if (!Array.isArray(data[key])) {
|
|
data[key] = [data[key]]; // Convert to array
|
|
}
|
|
data[key].push(value);
|
|
} else {
|
|
data[key] = value;
|
|
}
|
|
});
|
|
// Send data to the server using fetch
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
if(data.status == "error"){
|
|
notify("error",data.message);
|
|
}
|
|
else{
|
|
notify("success","Estimate created successfully");
|
|
setTimeout(() => {
|
|
window.location.href = data.url;
|
|
}, 1000);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
notify("error",error);
|
|
alert('An error occurred while submitting the form.');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- ===============================================-->
|
|
<!-- JavaScripts-->
|
|
<!-- ===============================================-->
|
|
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
|
|
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
|
|
<script src="{% static 'vendors/is/is.min.js' %}"></script>
|
|
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
|
|
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
|
|
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
|
|
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
|
|
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
|
|
<script src="{% static 'js/phoenix.js' %}"></script>
|
|
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
|
|
|
|
<script src="{% static 'js/main.js' %}"></script>
|
|
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
|
|
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
|
|
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
|
|
</body>
|
|
|
|
</html> |