355 lines
16 KiB
HTML
355 lines
16 KiB
HTML
{% load static i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>transfer</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
rel="stylesheet">
|
|
<!-- Google Fonts - Roboto -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
|
rel="stylesheet">
|
|
<!-- Custom CSS -->
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.transfer-row {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
padding: 3rem;
|
|
margin: 3rem auto;
|
|
max-width: 1000px;
|
|
}
|
|
.transfer-header {
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.transfer-header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.transfer-header p {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-weight: 400;
|
|
}
|
|
.transfer-details {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.transfer-details p {
|
|
margin: 0.75rem 0;
|
|
color: #555;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.transfer-table {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.transfer-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.transfer-table td {
|
|
color: #555;
|
|
font-weight: 400;
|
|
}
|
|
.additional-charges {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.additional-charges p {
|
|
margin: 0.5rem 0;
|
|
color: #555;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.transfer-total {
|
|
text-align: right;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-top: 1rem;
|
|
}
|
|
.footer-note {
|
|
text-align: center;
|
|
color: #777;
|
|
margin-top: 3rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.logo {
|
|
max-width: 150px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.highlight {
|
|
color: #007bff;
|
|
font-weight: 500;
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
border-color: #007bff;
|
|
font-weight: 500;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #0056b3;
|
|
border-color: #0056b3;
|
|
}
|
|
.button-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
{% 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 %}
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
{% if transfer.status != "approved" %}
|
|
<main class="main" id="top">
|
|
<div class="px-3">
|
|
<div class="row min-vh-100 flex-center p-5">
|
|
<div class="col-12 col-xl-10 col-xxl-8">
|
|
<div class="row justify-content-center align-items-center g-5">
|
|
<div class="col-12 col-lg-6 text-center order-lg-1">
|
|
<img class="img-fluid w-lg-100 d-dark-none"
|
|
src="{% static 'images/spot-illustrations/404-illustration.png' %}"
|
|
alt=""
|
|
width="400" />
|
|
<img class="img-fluid w-md-50 w-lg-100 d-light-none"
|
|
src="../../assets/img/spot-illustrations/dark_404-illustration.png"
|
|
alt=""
|
|
width="540" />
|
|
</div>
|
|
<div class="col-12 col-lg-6 text-center text-lg-start">
|
|
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
|
|
src="{% static 'images/spot-illustrations/404.png' %}"
|
|
alt="" />
|
|
<img class="img-fluid mb-6 w-50 w-lg-75 d-light-none"
|
|
src="../../assets/img/spot-illustrations/dark_404.png"
|
|
alt="" />
|
|
<h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
|
|
<p class="text-body mb-5">
|
|
But no worries! Our ostrich is looking everywhere
|
|
<br class="d-none d-sm-block" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
|
|
var navbarTop = document.querySelector('.navbar-top');
|
|
if (navbarTopStyle === 'darker') {
|
|
navbarTop.setAttribute('data-navbar-appearance', 'darker');
|
|
}
|
|
|
|
var navbarVerticalStyle = window.config.config.phoenixNavbarVerticalStyle;
|
|
var navbarVertical = document.querySelector('.navbar-vertical');
|
|
if (navbarVertical && navbarVerticalStyle === 'darker') {
|
|
navbarVertical.setAttribute('data-navbar-appearance', 'darker');
|
|
}
|
|
</script>
|
|
</main>
|
|
{% else %}
|
|
<div class="button-row">
|
|
<button id="download-pdf" class="btn btn-primary">
|
|
<i class="fas fa-download"></i> {% trans 'Download transfer' %}
|
|
</button>
|
|
<button id="accept"
|
|
class="btn btn-success"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#acceptModal">
|
|
<i class="fas fa-check-circle"></i> {% trans 'Accept transfer' %}
|
|
</button>
|
|
<button id="reject"
|
|
class="btn btn-danger"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#rejectModal">
|
|
<i class="fas fa-times-circle"></i> {% trans 'Reject transfer' %}
|
|
</button>
|
|
</div>
|
|
<!-- Accept Modal -->
|
|
<div class="modal fade"
|
|
id="acceptModal"
|
|
tabindex="-1"
|
|
aria-labelledby="acceptModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="acceptModalLabel">{% trans 'Accept transfer' %}</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 accept this transfer?' %}</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
|
|
<a class="btn btn-success"
|
|
href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=accepted">Confirm</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Reject Modal -->
|
|
<div class="modal fade"
|
|
id="rejectModal"
|
|
tabindex="-1"
|
|
aria-labelledby="rejectModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="rejectModalLabel">{% trans 'Reject transfer' %}</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 reject this transfer?' %}</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
|
|
<a class="btn btn-success"
|
|
href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=rejected">Confirm</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="transfer-row" id="transfer-content">
|
|
<!-- Header -->
|
|
<div class="transfer-header">
|
|
<svg width="101"
|
|
height="24"
|
|
viewBox="0 0 101 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<!-- SVG Paths -->
|
|
</svg>
|
|
<h1 style="margin-top: 10px;">
|
|
<b>{% trans "Transfer" %}</b>
|
|
</h1>
|
|
<p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
|
|
</div>
|
|
<!-- Details -->
|
|
<div class="transfer-details">
|
|
<p>
|
|
<strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
|
|
</p>
|
|
<p>
|
|
<strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
|
|
</p>
|
|
<p>
|
|
<strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
|
|
</p>
|
|
</div>
|
|
<!-- Items Table -->
|
|
<div class="transfer-table">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Item" %}</th>
|
|
<th class="text-center">{% trans "Quantity" %}</th>
|
|
<th class="text-center">{% trans "Unit Price" %}</th>
|
|
<th class="text-center">{% trans "Total" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ transfer.car }}</td>
|
|
<td class="text-center">{{ transfer.quantity }}</td>
|
|
<td class="text-center">{{ transfer.car.finances.selling_price }}</td>
|
|
<td class="text-center">{{ transfer.total_price }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Total -->
|
|
<div class="transfer-total">
|
|
<p>
|
|
<strong>{% trans "Total Amount" %}:</strong> <span class="highlight">${{ transfer.total_price }}</span>
|
|
</p>
|
|
</div>
|
|
<!-- Footer Note -->
|
|
<div class="footer-note">
|
|
<p>
|
|
{% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@tenhal.com</a>.
|
|
</p>
|
|
<p>{% trans "Thank you for your business" %}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- Bootstrap JS (Optional) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- jsPDF Library -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<script>
|
|
document.getElementById('download-pdf').addEventListener('click', function () {
|
|
const element = document.getElementById('transfer-content');
|
|
|
|
// Options for html2pdf.js
|
|
const options = {
|
|
margin: 0, // No margin
|
|
filename: 'transfer.pdf', // Name of the downloaded file
|
|
image: { type: 'jpeg', quality: 0.98 }, // Image quality
|
|
html2canvas: {
|
|
scale: 2, // Increase scale for better quality
|
|
scrollX: 0, // Ensure no horizontal scroll offset
|
|
scrollY: 0, // Ensure no vertical scroll offset
|
|
useCORS: true, // Enable CORS for external resources
|
|
},
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } // PDF settings
|
|
};
|
|
|
|
// Generate and download the PDF
|
|
html2pdf().from(element).set(options).save();
|
|
});
|
|
|
|
document.getElementById('confirmAccept').addEventListener('click', function () {
|
|
// Handle the accept action here
|
|
$('#acceptModal').modal('hide');
|
|
});
|
|
|
|
document.getElementById('confirmReject').addEventListener('click', function () {
|
|
// Handle the reject action here
|
|
$('#rejectModal').modal('hide');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|