725 lines
43 KiB
HTML
725 lines
43 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static custom_filters %}
|
|
{% block title %}{{ _("Car Details") }}{% endblock %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.disabled{
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
.car_status {
|
|
position: absolute;
|
|
top: 13%;
|
|
left: 90%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
{% endblock customCSS %}
|
|
{% block content %}
|
|
{% if not car.ready and not car.status == 'sold' %}
|
|
<div class="alert alert-outline-warning d-flex align-items-center"
|
|
role="alert">
|
|
<i class="fa-solid fa-circle-info fs-6"></i>
|
|
{% if not car.marked_price and not car.colors %}
|
|
<p class="mb-0 flex-1">
|
|
{{ _("This car information is not complete , please add colors and finances both before making it ready for sale .") }}
|
|
</p>
|
|
{% elif car.marked_price and not car.colors %}
|
|
<p class="mb-0 flex-1">
|
|
{{ _("This car information is not complete , please add colors before making it ready for sale .") }}
|
|
</p>
|
|
{% else %}
|
|
<p class="mb-0 flex-1">
|
|
{{ _("This car information is not complete , please add finances before making it ready for sale .") }}
|
|
</p>
|
|
{% endif %}
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% if car.get_transfer.status == "draft" %}
|
|
<div class="alert alert-outline-info d-flex align-items-center"
|
|
role="alert">
|
|
<i class="fa-solid fa-circle-info fs-6"></i>
|
|
<p class="mb-0 flex-1">{{ _("Action Required , Please Approved The Tranfer Request Of This Car .") }}</p>
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% if car.get_transfer and car.get_transfer.status == "approved" %}
|
|
<div class="alert alert-outline-info d-flex align-items-center"
|
|
role="alert">
|
|
<i class="fa-solid fa-circle-info fs-6"></i>
|
|
<p class="mb-0 flex-1">{{ _("Car Is In Transfer Process To Another Dealer, Please Wait For The Acceptance .") }}</p>
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% if car.is_reserved %}
|
|
<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">{{ _("This car is reserved until ") }}{{ car.get_reservation.reserved_until }}</p>
|
|
<button class="btn-close"
|
|
type="button"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
<!-- Main row -->
|
|
{% if perms.inventory.view_car %}
|
|
<div class="row-fluid {% if car.status == 'sold' %}disabled{% endif %}">
|
|
<div class="row g-3 justify-content-between">
|
|
<div class="col-lg-12 col-xl-6">
|
|
<div class="avatar avatar-5xl mb-3">
|
|
<img class="rounded h-100 w-100"
|
|
src="{% static 'images/cars/' %}{{ car.vin }}.png"
|
|
alt="{{ car.vin }}" />
|
|
</div>
|
|
<div class="card mb-3 rounded shadow d-flex align-content-center
|
|
{% if car.get_transfer %}disabled{% endif %}">
|
|
<p class="card-header rounded-top fw-bold">{% trans 'Car Details' %}</p>
|
|
<div class="card-body">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
<tr>
|
|
<th>{% trans "VIN" %}</th>
|
|
<td>{{ car.vin }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "year"|capfirst %}</th>
|
|
<td>{{ car.year }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "make"|capfirst %}</th>
|
|
<td>{{ car.id_car_make.get_local_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "model"|capfirst %}</th>
|
|
<td>{{ car.id_car_model.get_local_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "series"|capfirst %}</th>
|
|
<td>{{ car.id_car_serie.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "trim"|capfirst %}</th>
|
|
<td>{{ car.id_car_trim.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Status"|capfirst %}</th>
|
|
<td>{{ car.get_status_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Stock Type"|capfirst %}</th>
|
|
<td>{{ car.get_stock_type_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Mileage"|capfirst %}</th>
|
|
<td>{{ car.mileage }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Receiving Date"|capfirst %}</th>
|
|
<td>{{ car.receiving_date|timesince }}</td>
|
|
</tr>
|
|
{% if car.vendor %}
|
|
<tr>
|
|
<th>{% trans "Vendor"|capfirst %}</th>
|
|
<td>{{ car.vendor.name }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "Remarks"|capfirst %}</th>
|
|
<td>{{ car.remarks }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans 'specifications'|capfirst %}</th>
|
|
<td>
|
|
<button type="button"
|
|
class="btn btn-phoenix-primary btn-sm"
|
|
id="specification-btn"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#specificationsModal">
|
|
{% trans 'view'|capfirst %}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% if car.custom_cards %}
|
|
<tr>
|
|
<th>{% trans "Custom Number"|capfirst %}</th>
|
|
<td>{{ car.custom_cards.custom_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Custom Date"|capfirst %}</th>
|
|
<td>{{ car.custom_cards.custom_date|date }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<th>{% trans "Custom Card" %}</th>
|
|
<td>
|
|
{% if perms.inventory.add_customcard %}
|
|
<button type="button"
|
|
class="btn btn-sm btn-phoenix-success"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#mainModal"
|
|
hx-get="{% url 'add_custom_card' request.dealer.slug car.slug %}"
|
|
hx-target=".main-modal-body"
|
|
hx-swap="innerHTML">{% trans 'Add' %}</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if car.registrations %}
|
|
<tr>
|
|
<th>{% trans "Registration"|capfirst %}</th>
|
|
<td>
|
|
{{ car.registrations.plate_number }} | {{ car.registrations.text1 }} {{ car.registrations.text2 }} {{ car.registrations.text3 }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Registration Date"|capfirst %}</th>
|
|
<td>{{ car.registrations.registration_date|date }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<th>{% trans "Registration" %}</th>
|
|
<td>
|
|
{% if perms.inventory.add_carregistration %}
|
|
<button type="button"
|
|
class="btn btn-sm btn-phoenix-success"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#mainModal"
|
|
hx-get="{% url 'add_registration' request.dealer.slug car.slug %}"
|
|
hx-target=".main-modal-body"
|
|
hx-swap="innerHTML">{% trans 'Add' %}</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans 'Location'|capfirst %}</th>
|
|
<td>
|
|
{% if car.marked_price and not car.get_transfer %}
|
|
{% if car.location %}
|
|
{% if car.location.is_owner_showroom %}
|
|
{% trans 'Our Showroom' %}
|
|
{% else %}
|
|
{{ car.location.showroom.get_local_name }}
|
|
{% endif %}
|
|
{% if perms.inventory.add_cartransfer %}
|
|
<a href="{% url 'update_car_location' car.slug car.location.pk %}"
|
|
class="btn btn-phoenix-danger btn-sm">
|
|
{% trans "transfer"|capfirst %}
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
{% trans "No location available." %}
|
|
{% if perms.inventory.add_carlocation %}
|
|
<a href="{% url 'add_car_location' car.slug %}"
|
|
class="btn btn-phoenix-success btn-sm ms-2">{% trans "Add" %}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
{% if not car.get_transfer %}
|
|
{% if perms.inventory.change_car %}
|
|
<a href="{% url 'car_update' request.dealer.slug car.slug %}"
|
|
class="btn btn-phoenix-primary btn-sm mt-1">{% trans "Edit" %}
|
|
<span class="fas fa-solid fa-pencil ms-1"></span>
|
|
</a>
|
|
<a href="{% url 'transfer' car.slug %}"
|
|
class="btn btn-phoenix-danger btn-sm">
|
|
{% trans "Sell to another dealer"|capfirst %}
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-xl-6">
|
|
{% if perms.inventory.view_carfinance %}
|
|
<div class="card rounded shadow d-flex align-content-center
|
|
{% if car.get_transfer %}transfer{% endif %}">
|
|
<p class="card-header rounded-top fw-bold">{% trans 'Financial Details' %}</p>
|
|
<div class="card-body">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
{% if car.marked_price %}
|
|
<tr>
|
|
{% if perms.inventory.view_carfinance %}
|
|
<th>{% trans "Cost Price"|capfirst %}</th>
|
|
<td>{{ car.cost_price|floatformat:2 }}</td>
|
|
{% endif %}
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Marked Price"|capfirst %}</th>
|
|
<td>{{ car.marked_price|floatformat:2 }}</td>
|
|
</tr>
|
|
{% comment %} <tr>
|
|
<th>{% trans "Selling Price"|capfirst %}</th>
|
|
<td>{{ car.finances.selling_price|floatformat:2 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Discount Amount"|capfirst %}</th>
|
|
<td>{{ car.finances.discount_amount|floatformat:2 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Additional Fee"|capfirst %}</th>
|
|
<td></td>
|
|
</tr>
|
|
{% if car.finances.additional_services.first.pk %}
|
|
{% for service in car.finances.additional_services.all %}
|
|
<tr>
|
|
<td>{{ service.name }}</td>
|
|
<td>{{ service.price_|floatformat:2 }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "VAT Amount"|capfirst %}</th>
|
|
<td>{{ car.finances.vat_amount|floatformat:2 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Total"|capfirst %}</th>
|
|
<td>{{ car.finances.total_vat|floatformat:2 }}</td>
|
|
</tr> {% endcomment %}
|
|
{% if perms.inventory.change_carfinance %}
|
|
<tr>
|
|
<td colspan="2">
|
|
{% if not car.get_transfer %}
|
|
<a href="{% url 'car_finance_update' request.dealer.slug car.slug %}"
|
|
class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
|
|
{% else %}
|
|
<span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% else %}
|
|
<p>{% trans "No finance details available." %}</p>
|
|
{% if perms.inventory.add_carfinance %}
|
|
<a href="{% url 'car_finance_update' request.dealer.slug car.slug %}"
|
|
class="btn btn-phoenix-success btn-sm mb-3">{% trans "Add" %}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.inventory.view_carcolors %}
|
|
<div class="card rounded shadow d-flex align-content-center mt-3
|
|
{% if car.get_transfer %}transfer{% endif %}">
|
|
<p class="card-header rounded-top fw-bold">{% trans 'Colors Details' %}</p>
|
|
<div class="card-body">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
<!--test-->
|
|
{% if car.colors %}
|
|
<tr>
|
|
<th>{% trans 'Exterior' %}</th>
|
|
<td>
|
|
<span>{{ car.colors.exterior.get_local_name }}</span>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="text-end color-div"
|
|
style="background-color: rgb({{ car.colors.exterior.rgb }})">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans 'Interior' %}</th>
|
|
<td>
|
|
<span>{{ car.colors.interior.get_local_name }}</span>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="text-end color-div"
|
|
style="background-color: rgb({{ car.colors.interior.rgb }})">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% if perms.inventory.change_carcolors %}
|
|
<tr>
|
|
<td colspan="2">
|
|
{% if not car.get_transfer %}
|
|
<a href="{% url 'car_colors_update' request.dealer.slug car.slug %}"
|
|
class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
|
|
{% else %}
|
|
<span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="2">
|
|
<p>{% trans "No color details available." %}</p>
|
|
{% if perms.inventory.add_carcolors %}
|
|
<a class="btn btn-phoenix-success btn-sm mb-3"
|
|
href="{% url 'add_color' request.dealer.slug car.slug %}">{{ _("Add Color") }}</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<!--test-->
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if car.status != 'transfer' %}
|
|
{% if perms.inventory.view_carreservation %}
|
|
<div class="card rounded shadow d-flex align-content-center mt-3">
|
|
<p class="card-header rounded-top fw-bold">{% trans 'Reservations Details' %}</p>
|
|
<div class="card-body">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
{% if car.is_reserved %}
|
|
<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.dealer }}</td>
|
|
<td>{{ reservation.reserved_until }}</td>
|
|
{% if perms.inventory.change_carreservation %}
|
|
<td>
|
|
{% if reservation.is_active %}
|
|
<form method="post"
|
|
action="{% url 'reservations' request.dealer.slug reservation.id %}">
|
|
{% csrf_token %}
|
|
<div class="btn-group">
|
|
<button type="submit"
|
|
name="action"
|
|
value="renew"
|
|
class="btn btn-sm btn-phoenix-success px-3 py-1">
|
|
{% trans "Renew" %}
|
|
</button>
|
|
<button type="submit"
|
|
name="action"
|
|
value="cancel"
|
|
class="btn btn-sm btn-phoenix-secondary px-3 py-1">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<span class="badge badge-phoenix badge-phoenix-danger fs-10">{% trans "Expired" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endif %}
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
{% if perms.inventory.add_carreservation %}
|
|
<tr>
|
|
<td>
|
|
<button type="button"
|
|
class="btn btn-sm btn-phoenix-success"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#reserveModal">
|
|
{% trans 'Reserve' %}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
<!-- Transfer Table -->
|
|
{% if car.status == 'transfer' and car.get_transfer %}
|
|
<div class="card rounded shadow d-flex align-content-center mt-3">
|
|
<p class="card-header rounded-top fw-bold">{% trans 'Transfer Details' %}</p>
|
|
<div class="card-body">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Action" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "From Showroom" %}</th>
|
|
<th>{% trans "To Showroom" %}</th>
|
|
<th>{% trans 'Date' %}</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="badge badge-phoenix badge-phoenix-info">Transfer</span>
|
|
</td>
|
|
<td>
|
|
{% if car.get_transfer.status == "draft" %}
|
|
<span class="badge badge-phoenix badge-phoenix-warning">waiting for approval</span>
|
|
{% elif car.get_transfer.status == "approved" %}
|
|
<span class="badge badge-phoenix badge-phoenix-info">waiting for dealer acceptance</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ car.get_transfer.from_dealer|title }}</td>
|
|
<td>{{ car.get_transfer.to_dealer|title }}</td>
|
|
<td>{{ car.get_transfer.transfer_date|date:"Y-m-d" }}</td>
|
|
<td>
|
|
{% if car.get_transfer.status == "draft" %}
|
|
<a class="btn btn-sm btn-phoenix-success"
|
|
href="{% url 'transfer_detail' car.get_transfer.pk %}">Approve</a>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a class="btn btn-sm btn-phoenix-success"
|
|
href="{% url 'transfer_detail' car.get_transfer.pk %}?action=cancel">Cancel</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if car.status == 'sold' %}
|
|
<img class="car_status"
|
|
src="{% static 'images/sold.png' %}"
|
|
width="200"
|
|
height="100"
|
|
alt="">
|
|
{% endif %}
|
|
</div>
|
|
<!-- 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">
|
|
<h5 class="modal-title" 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>
|
|
<!-- Main Modal -->
|
|
<div class="modal fade"
|
|
id="mainModal"
|
|
tabindex="-1"
|
|
aria-labelledby="mainModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="mainModalLabel">{% trans 'Registration' %}</h5>
|
|
<button type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="main-modal-body" style="padding: 20px;">
|
|
<!-- 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">
|
|
<h5 class="modal-title" 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>
|
|
<form method="POST"
|
|
action="{% url 'reserve_car' request.dealer.slug car.slug %}"
|
|
class="form">
|
|
{% csrf_token %}
|
|
<div class="p-1">
|
|
<div class="d-flex gap-1">
|
|
<button type="button"
|
|
class="btn btn-sm btn-phoenix-danger w-50"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Cancel and close modal">
|
|
<i class="fas fa-times"></i> {% trans 'No' %}
|
|
</button>
|
|
<button type="submit"
|
|
class="btn btn-sm btn-phoenix-success w-50"
|
|
aria-label="Save changes">
|
|
<i class="fas fa-check"></i> {% trans 'Yes' %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|upper %}</h5>
|
|
<button class="btn btn-close p-1"
|
|
type="button"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="list-inline" id="specificationsContent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const csrftoken = getCookie("csrftoken");
|
|
const ajaxUrl = "{% url 'ajax_handler' request.dealer.slug %}";
|
|
|
|
const modalBody = customCardModal.querySelector(".modal-body");
|
|
|
|
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) {
|
|
// Create a section container
|
|
const section = document.createElement("div");
|
|
section.classList.add("mb-4", "p-3", "border", "rounded");
|
|
|
|
// Add section title
|
|
const sectionTitle = document.createElement("h4");
|
|
sectionTitle.classList.add("mb-3", "fw-bold");
|
|
sectionTitle.textContent = parent.parent_name;
|
|
section.appendChild(sectionTitle);
|
|
|
|
// Create a table for the specifications
|
|
const specsTable = document.createElement("div");
|
|
specsTable.classList.add("row");
|
|
|
|
parent.specifications.forEach(function (specification) {
|
|
// Create a row for each specification
|
|
const specRow = document.createElement("div");
|
|
specRow.classList.add("row", "mb-2");
|
|
|
|
// Left Column: Spec name
|
|
const specName = document.createElement("div");
|
|
specName.classList.add("col-6", "text-muted");
|
|
specName.textContent = specification.s_name;
|
|
|
|
// Right Column: Spec value + unit
|
|
const specValue = document.createElement("div");
|
|
specValue.classList.add("col-6", "text-end");
|
|
specValue.textContent = `${specification.s_value} ${specification.s_unit || ""}`;
|
|
|
|
specRow.appendChild(specName);
|
|
specRow.appendChild(specValue);
|
|
|
|
specsTable.appendChild(specRow);
|
|
});
|
|
|
|
section.appendChild(specsTable);
|
|
specificationsContent.appendChild(section);
|
|
});
|
|
} 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' request.dealer.slug car.slug %}`, {
|
|
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-phoenix-success");
|
|
this.classList.add("btn-phoenix-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.");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
if('{{car.status}}' == "sold"){
|
|
document.querySelector(".row-fluid").querySelectorAll("button").forEach((button) => {
|
|
button.classList.add("d-none");
|
|
});
|
|
document.querySelector(".row-fluid").querySelectorAll("a").forEach((button) => {
|
|
button.classList.add("d-none");
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|