339 lines
17 KiB
HTML
339 lines
17 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>
|
||
<div class="support-chat-row">
|
||
<div class="row-fluid support-chat">
|
||
<div class="card bg-body-emphasis">
|
||
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
|
||
<h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
|
||
<div class="btn-reveal-trigger">
|
||
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
|
||
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body chat p-0">
|
||
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
|
||
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
|
||
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
|
||
</a>
|
||
</div>
|
||
<div class="text-center mt-auto">
|
||
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../assets/img/team/30.webp" alt="" /></div>
|
||
<h5 class="mt-2 mb-3">Eric</h5>
|
||
<p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
|
||
<div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
|
||
<input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
|
||
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
|
||
<input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
|
||
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
|
||
<input class="d-none" type="file" id="supportChatAttachment" />
|
||
</div>
|
||
<button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
|
||
</div>
|
||
</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> |