511 lines
19 KiB
HTML
511 lines
19 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
{% load custom_filters %}
|
|
{% block title %}{{ _("Car Details") }}{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
.color-circle{
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50px;
|
|
border-style: solid;
|
|
border-color: #000;
|
|
}
|
|
</style>
|
|
<div class="container mt-2 p-1">
|
|
|
|
<!-- Custom Card Modal -->
|
|
<div class="modal fade" id="customCardModal" tabindex="-1" aria-labelledby="customCardModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary">
|
|
<h5 class="modal-title text-light" id="customCardModalLabel">{% trans 'Custom Card' %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content will be loaded here via AJAX -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reservation Modal -->
|
|
<div class="modal fade" id="reserveModal" tabindex="-1" aria-labelledby="reserveModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary">
|
|
<h5 class="modal-title text-light" id="reserveModalLabel">{% trans 'Car Reservation' %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% trans 'Are you sure you want to reserve this car?' %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button"
|
|
class="btn btn-sm btn-danger"
|
|
data-bs-dismiss="modal">
|
|
{% trans 'No' %}
|
|
</button>
|
|
<form method="POST" action="{% url 'reserve_car' car.id %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-success btn-sm">{% trans "Yes" %}</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specification Modal -->
|
|
<div class="modal fade" id="specificationsModal" tabindex="-1" aria-labelledby="specificationsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div class="modal-content glossy-modal">
|
|
<div class="modal-header bg-primary text-light">
|
|
<h5 class="modal-title" id="specificationsModalLabel">
|
|
{% trans 'specifications'|upper %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="specificationsContent"></div>
|
|
<div class="d-grid gap-2">
|
|
<button type="button"
|
|
class="btn btn-sm btn-danger"
|
|
data-bs-dismiss="modal">
|
|
{% trans 'Close' %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="d-flex flex-column min-vh-100">
|
|
<div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
|
|
<main class="d-grid gap-4">
|
|
<div class="row g-4">
|
|
<div class="col-lg-6 col-xl-6">
|
|
|
|
<div class="card rounded shadow">
|
|
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Car Details' %}</p>
|
|
<div class="card-body">
|
|
<table class="table table-sm table-responsive align-middle">
|
|
<tr>
|
|
<th>{% trans "VIN" %}</th>
|
|
<td>{{ car.vin }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "year" %}</th>
|
|
<td>{{ car.year }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "make" %}</th>
|
|
<td>{{ car.id_car_make.get_local_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "model" %}</th>
|
|
<td>{{ car.id_car_model.get_local_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "series" %}</th>
|
|
<td>{{ car.id_car_serie.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "trim" %}</th>
|
|
<td>{{ car.id_car_trim.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Status" %}</th>
|
|
<td>{{ car.get_status_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Stock Type" %}</th>
|
|
<td>{{ car.get_stock_type_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Mileage" %}</th>
|
|
<td>{{ car.mileage }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Receiving Date" %}</th>
|
|
<td>{{ car.receiving_date|timesince }}</td>
|
|
</tr>
|
|
{% if car.branch %}
|
|
<tr>
|
|
<th>{% trans "Branch" %}</th>
|
|
<td>{{ car.branch.get_local_name }}</td>
|
|
</tr>
|
|
{% endif %} {% if car.vendor %}
|
|
<tr>
|
|
<th>{% trans "Vendor" %}</th>
|
|
<td>{{ car.vendor.get_local_name }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "Remarks" %}</th>
|
|
<td>{{ car.remarks }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans 'specifications' %}</th>
|
|
<td>
|
|
<button type="button"
|
|
class="btn btn-primary btn-sm"
|
|
id="specification-btn"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#specificationsModal">
|
|
{% trans 'view' %}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% if car.custom_cards %}
|
|
<tr>
|
|
<th>{% trans "Custom Number" %}</th>
|
|
<td>{{ car.custom_cards.custom_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Custom Date" %}</th>
|
|
<td>{{ car.custom_cards.custom_date|date }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<th>{% trans "Custom Card" %}</th>
|
|
<td>
|
|
<button type="button"
|
|
class="btn btn-sm btn-success"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#customCardModal">
|
|
{% trans 'Add' %}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans 'Showroom Location' %}</th>
|
|
<td>
|
|
{% if car.location %}
|
|
{% if car.location.is_owner_showroom %}
|
|
{% trans 'Our Showroom' %}
|
|
{% else %}
|
|
{{ car.location.showroom.get_local_name }}
|
|
{% endif %}
|
|
<a href="{% url 'transfer' car.location.pk %}"
|
|
class="btn btn-danger btn-sm">
|
|
{% trans "transfer" %}
|
|
</a>
|
|
{% else %} {% trans "No location available." %}
|
|
<a href="{% url 'add_car_location' car.pk %}"
|
|
class="btn btn-success btn-sm ms-2">
|
|
{% trans "Add" %}
|
|
</a>
|
|
</td>
|
|
{% endif %}
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<a href="{% url 'car_update' car.pk %}" class="btn btn-warning btn-sm">{% trans "Edit" %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-xl-6">
|
|
<div class="card rounded shadow">
|
|
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Financial Details' %}</p>
|
|
|
|
<div class="card-body">
|
|
|
|
{% if car.finances %}
|
|
|
|
<table class="table table-sm table-responsive align-middle">
|
|
{% if perms.inventory.view_carfinance %}
|
|
<tr>
|
|
<th>{% trans "Cost Price" %}</th>
|
|
<td>{{ car.finances.cost_price }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "Selling Price" %}</th>
|
|
<td>{{ car.finances.selling_price }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Discount Amount" %}</th>
|
|
<td>{{ car.finances.discount_amount }} -</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Additional Fee" %}</th>
|
|
<td></td>
|
|
</tr>
|
|
{% if car.finances.additional_services.first.pk %}
|
|
{% for service in car.finances.additional_services.all %}
|
|
<tr>
|
|
<td><small class="ms-5">{{service.name}}</small></td>
|
|
<td><small>{{ service.price }}</small></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "VAT Amount" %}</th>
|
|
<td>{{ car.finances.vat_amount }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Total" %}</th>
|
|
<td>{{ car.finances.total }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
{% if perms.inventory.change_carfinance %}
|
|
<a href="{% url 'car_finance_update' car.finances.pk %}"
|
|
class="btn btn-warning btn-sm mb-3">
|
|
{% trans "Edit Finance Details" %}
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<p>{% trans "No finance details available." %}</p>
|
|
<a href="{% url 'car_finance_create' car.pk %}"
|
|
class="btn btn-success btn-sm mb-3">
|
|
{% trans "Add Finance Details" %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card rounded shadow mt-3">
|
|
|
|
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Colors Details' %}</p>
|
|
|
|
<div class="card-body">
|
|
<table class="table table-sm table-responsive align-middle">
|
|
<tbody class="align-middle">
|
|
{% if car.colors.exists %}
|
|
{% for color in car.colors.all %}
|
|
<tr>
|
|
<th>{% trans 'Exterior' %}</th>
|
|
<td>
|
|
<span>{{ color.exterior.get_local_name }}</span>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="text-end color-circle"
|
|
style="background-color: rgb({{ color.exterior.rgb }});">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans 'Interior' %}</th>
|
|
<td>
|
|
<span>{{ color.interior.get_local_name }}</span>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="text-end color-circle"
|
|
style="background-color: rgb({{ color.interior.rgb }});">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="2">
|
|
{% trans "No colors available for this car." %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<a href="{% url 'add_color' car.pk %}" class="btn btn-success btn-sm">
|
|
{% trans "Get Colors" %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card rounded shadow mt-3">
|
|
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Reservations Details' %}</p>
|
|
<div class="card-body">
|
|
{% if car.is_reserved %}
|
|
<table class="table table-sm table-responsive align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Reserved By" %}</th>
|
|
<th>{% trans "Expires At" %}</th>
|
|
<th>{% trans 'Actions' %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for reservation in car.reservations.all %}
|
|
<tr>
|
|
<td>{{ reservation.reserved_by.username }}</td>
|
|
<td>{{ reservation.reserved_until }}</td>
|
|
<td>
|
|
{% if reservation.is_active %}
|
|
<form method="post" action="{% url 'reservations' reservation.id %}">
|
|
{% csrf_token %}
|
|
<button type="submit"
|
|
name="action"
|
|
value="renew"
|
|
class="btn btn-sm btn-success">
|
|
<small>{% trans "Renew" %}</small>
|
|
</button>
|
|
<button type="submit"
|
|
name="action"
|
|
value="cancel"
|
|
class="btn btn-sm btn-secondary">
|
|
<small>{% trans "Cancel" %}</small>
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<span class="badge bg-danger"
|
|
style="width: 120px;">
|
|
{% trans "Expired" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td>
|
|
<form method="POST" action="{% url 'reserve_car' car.id %}" class="d-inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-success btn-sm">{% trans "Reserve" %}</button>
|
|
</form>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="">
|
|
<!-- Actions -->
|
|
<a href="#" class="btn btn-danger btn-sm">{% trans "transfer" %}</a>
|
|
|
|
<a href="{% url 'car_update' car.pk %}" class="btn btn-warning btn-sm">{% trans "Edit" %}</a>
|
|
|
|
<a href="{% url 'inventory_stats' %}" class="btn btn-secondary btn-sm">{% trans "Back to List" %}</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
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;
|
|
}
|
|
|
|
const csrfToken = getCookie("csrftoken");
|
|
const ajaxUrl = "{% url 'ajax_handler' %}";
|
|
|
|
const modal = document.getElementById("customCardModal");
|
|
const modalBody = modal.querySelector(".modal-body");
|
|
|
|
// When the modal is triggered, load the form
|
|
modal.addEventListener("show.bs.modal", function () {
|
|
const url = "{% url 'add_custom_card' car.pk %}";
|
|
|
|
fetch(url)
|
|
.then((response) => response.text())
|
|
.then((html) => {
|
|
modalBody.innerHTML = html;
|
|
})
|
|
.catch((error) => {
|
|
modalBody.innerHTML = '<p class="text-danger">Error loading form. Please try again later.</p>';
|
|
console.error("Error loading form:", error);
|
|
});
|
|
});
|
|
|
|
modal.addEventListener("hidden.bs.modal", function () {
|
|
modalBody.innerHTML = "";
|
|
});
|
|
|
|
const showSpecificationButton = document.getElementById("specification-btn");
|
|
const specificationsContent = document.getElementById("specificationsContent");
|
|
|
|
showSpecificationButton.addEventListener("click", function () {
|
|
specificationsContent.innerHTML = "";
|
|
fetch(`${ajaxUrl}?action=get_specifications&trim_id={{ car.id_car_trim.id_car_trim }}`, {
|
|
headers: {
|
|
"X-Requested-With": "XMLHttpRequest",
|
|
"X-CSRFToken": csrfToken,
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.length > 0) {
|
|
data.forEach(function (parent) {
|
|
const parentSpec = document.createElement("div");
|
|
parentSpec.classList.add("mb-2");
|
|
parentSpec.innerHTML = `<strong>${parent.parent_name}</strong>`;
|
|
|
|
parent.specifications.forEach(function (specification) {
|
|
const specificationDiv = document.createElement("div");
|
|
specificationDiv.classList.add("ms-3");
|
|
specificationDiv.innerHTML = `· ${specification.s_name}: ${specification.s_value} ${specification.s_unit}`;
|
|
parentSpec.appendChild(specificationDiv);
|
|
});
|
|
|
|
specificationsContent.appendChild(parentSpec);
|
|
});
|
|
} else {
|
|
specificationsContent.innerHTML = '<p>{% trans "No specifications available." %}</p>';
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
specificationsContent.innerHTML = '<p>{% trans "Error loading specifications." %}</p>';
|
|
console.error("Error fetching specifications:", error);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".reserve-btn").forEach((button) => {
|
|
button.addEventListener("click", async function () {
|
|
try {
|
|
const response = await fetch(`{% url 'reserve_car' car.pk %}`, {
|
|
method: "POST",
|
|
headers: {
|
|
"X-CSRFToken": csrfToken,
|
|
"X-Requested-With": "XMLHttpRequest",
|
|
},
|
|
});
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.textContent = "Reserved";
|
|
this.classList.remove("btn-success");
|
|
this.classList.add("btn-danger");
|
|
this.disabled = true;
|
|
alert("Car reserved successfully.");
|
|
} else {
|
|
alert(data.message || "Failed to reserve the car.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
alert("An error occurred. Please try again.");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|