182 lines
7.6 KiB
Twig
182 lines
7.6 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ title }}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.navbar-brand {
|
|
font-weight: 600;
|
|
}
|
|
.success-icon {
|
|
font-size: 4rem;
|
|
color: #28a745;
|
|
}
|
|
.order-number {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="bi bi-shop me-2"></i>
|
|
Webshop
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Startseite</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/products">Produkte</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/cart">
|
|
<i class="bi bi-cart me-1"></i>
|
|
Warenkorb
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container my-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<!-- Success Message -->
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-check-circle-fill success-icon d-block mb-3"></i>
|
|
<h1 class="h2 mb-3">Vielen Dank für Ihre Bestellung!</h1>
|
|
<p class="lead text-muted">Ihre Bestellung wurde erfolgreich aufgegeben.</p>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-danger" role="alert">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Order Details -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Bestelldetails</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<strong>Bestellnummer:</strong>
|
|
<span class="order-number">#{{ order.id }}</span>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<strong>Bestelldatum:</strong>
|
|
<span>{{ order.created_at|date('d.m.Y H:i') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<strong>Status:</strong>
|
|
<span class="badge bg-warning">In Bearbeitung</span>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<strong>Gesamtbetrag:</strong>
|
|
<span class="h5 mb-0">{{ order.total|number_format(2, ',', '.') }}€</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h6>Kundenangaben:</h6>
|
|
<p class="mb-1">
|
|
<strong>{{ order.firstname }} {{ order.lastname }}</strong><br>
|
|
{{ order.email }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Items -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Bestellpositionen</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for item in order_items %}
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col-md-6">
|
|
<strong>{{ item.name }}</strong>
|
|
</div>
|
|
<div class="col-md-2 text-center">
|
|
<span class="badge bg-secondary">{{ item.quantity }}x</span>
|
|
</div>
|
|
<div class="col-md-2 text-end">
|
|
<span>{{ item.price|number_format(2, ',', '.') }}€</span>
|
|
</div>
|
|
<div class="col-md-2 text-end">
|
|
<strong>{{ (item.price * item.quantity)|number_format(2, ',', '.') }}€</strong>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<strong>Gesamtbetrag:</strong>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<strong class="h5">{{ order.total|number_format(2, ',', '.') }}€</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Nächste Schritte</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6><i class="bi bi-envelope me-2"></i>E-Mail-Bestätigung</h6>
|
|
<p class="text-muted small">Sie erhalten in Kürze eine Bestätigungs-E-Mail an {{ order.email }}.</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6><i class="bi bi-truck me-2"></i>Versand</h6>
|
|
<p class="text-muted small">Ihre Bestellung wird innerhalb von 1-3 Werktagen versendet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="text-center mt-4">
|
|
<a href="/" class="btn btn-primary me-2">
|
|
<i class="bi bi-house me-2"></i>
|
|
Zur Startseite
|
|
</a>
|
|
<a href="/products" class="btn btn-outline-primary">
|
|
<i class="bi bi-box me-2"></i>
|
|
Weitere Produkte
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |