456 lines
No EOL
15 KiB
PHP
456 lines
No EOL
15 KiB
PHP
@extends('web.layouts.layout')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<!-- Hero Section -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 font-weight-bold text-primary mb-3">
|
|
<i class="fas fa-search"></i>
|
|
Sendungsverfolgung
|
|
</h1>
|
|
<p class="lead text-muted">
|
|
Verfolgen Sie den Status Ihrer DHL-Sendung in Echtzeit
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tracking Form -->
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-lg-6">
|
|
<div class="card shadow-lg border-0">
|
|
<div class="card-body p-5">
|
|
<form id="tracking-form">
|
|
<div class="form-group">
|
|
<label for="tracking_number" class="font-weight-semibold text-primary">
|
|
<i class="fas fa-hashtag"></i>
|
|
Tracking-Nummer
|
|
</label>
|
|
<input type="text"
|
|
class="form-control form-control-lg"
|
|
id="tracking_number"
|
|
name="tracking_number"
|
|
placeholder="z.B. 1234567890"
|
|
value="{{ request('tracking_number') }}"
|
|
required>
|
|
<small class="form-text text-muted">
|
|
Geben Sie Ihre DHL Tracking-Nummer ein (10-20 Zeichen)
|
|
</small>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-lg btn-block" id="track-btn">
|
|
<i class="fas fa-search"></i>
|
|
Sendung verfolgen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tracking Results -->
|
|
<div id="tracking-results" style="display: none;">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow border-0">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-info-circle"></i>
|
|
Sendungsinformationen
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="tracking-content">
|
|
<!-- Dynamic content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div id="error-message" class="row justify-content-center" style="display: none;">
|
|
<div class="col-lg-6">
|
|
<div class="alert alert-danger" role="alert">
|
|
<h4 class="alert-heading">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Sendung nicht gefunden
|
|
</h4>
|
|
<p class="mb-0">
|
|
Die eingegebene Tracking-Nummer konnte nicht gefunden werden.
|
|
Bitte überprüfen Sie die Nummer und versuchen Sie es erneut.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Spinner -->
|
|
<div id="loading-spinner" class="row justify-content-center" style="display: none;">
|
|
<div class="col-lg-6">
|
|
<div class="card border-0">
|
|
<div class="card-body text-center py-5">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<p class="mt-3 text-muted">
|
|
Tracking-Informationen werden abgerufen...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How to find Tracking Number -->
|
|
<div class="row justify-content-center mt-5">
|
|
<div class="col-lg-10">
|
|
<div class="card bg-light border-0">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h5 class="font-weight-bold text-primary mb-3">
|
|
<i class="fas fa-question-circle"></i>
|
|
Wo finde ich meine Tracking-Nummer?
|
|
</h5>
|
|
<ul class="mb-0">
|
|
<li>In der Versandbestätigungs-E-Mail</li>
|
|
<li>Auf dem Versandlabel oder Paketschein</li>
|
|
<li>In Ihrem Kundenkonto unter "Bestellungen"</li>
|
|
<li>Als SMS-Benachrichtigung (falls aktiviert)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 text-center">
|
|
<i class="fas fa-box fa-4x text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Information -->
|
|
<div class="row justify-content-center mt-4 mb-5">
|
|
<div class="col-lg-10">
|
|
<div class="text-center">
|
|
<p class="text-muted">
|
|
<strong>Probleme bei der Sendungsverfolgung?</strong><br>
|
|
Kontaktieren Sie uns unter
|
|
<a href="mailto:support@mivita.care" class="text-primary">support@mivita.care</a>
|
|
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to Top Button -->
|
|
<button type="button" class="btn btn-primary btn-sm" id="back-to-top" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 99;">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</button>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Auto-track if tracking number is provided in URL
|
|
if ($('#tracking_number').val()) {
|
|
$('#tracking-form').submit();
|
|
}
|
|
|
|
// Form submission
|
|
$('#tracking-form').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
var trackingNumber = $('#tracking_number').val().trim();
|
|
|
|
if (!trackingNumber || trackingNumber.length < 10) {
|
|
showError('Bitte geben Sie eine gültige Tracking-Nummer ein (mindestens 10 Zeichen).');
|
|
return;
|
|
}
|
|
|
|
// Hide previous results and errors
|
|
hideAllResults();
|
|
|
|
// Show loading spinner
|
|
$('#loading-spinner').show();
|
|
|
|
// Disable form
|
|
$('#track-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Wird verfolgt...');
|
|
|
|
// Perform AJAX request
|
|
$.ajax({
|
|
url: '{{ route("public.tracking.check") }}',
|
|
method: 'POST',
|
|
data: {
|
|
tracking_number: trackingNumber,
|
|
_token: '{{ csrf_token() }}'
|
|
},
|
|
success: function(response) {
|
|
$('#loading-spinner').hide();
|
|
resetForm();
|
|
|
|
if (response.success && response.data) {
|
|
showTrackingResult(response.data);
|
|
} else {
|
|
showError(response.message || 'Sendung nicht gefunden.');
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
$('#loading-spinner').hide();
|
|
resetForm();
|
|
|
|
var errorMessage = 'Fehler beim Abrufen der Tracking-Informationen.';
|
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
|
errorMessage = xhr.responseJSON.message;
|
|
}
|
|
|
|
showError(errorMessage);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Show tracking results
|
|
function showTrackingResult(data) {
|
|
var statusBadge = getStatusBadge(data.status);
|
|
var trackingStatusInfo = data.tracking_status ?
|
|
`<p class="mb-2"><strong>DHL Status:</strong> <em>${data.tracking_status}</em></p>` : '';
|
|
var lastTrackedInfo = data.last_tracked_at ?
|
|
`<p class="mb-2"><strong>Zuletzt aktualisiert:</strong> ${data.last_tracked_at}</p>` : '';
|
|
|
|
var html = `
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5 class="text-primary mb-3">
|
|
<i class="fas fa-hashtag"></i>
|
|
${data.tracking_number}
|
|
</h5>
|
|
<p class="mb-2"><strong>Status:</strong> ${statusBadge}</p>
|
|
${trackingStatusInfo}
|
|
${lastTrackedInfo}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="text-center">
|
|
<div class="mb-3">
|
|
${getStatusIcon(data.status)}
|
|
</div>
|
|
<p class="text-muted small">
|
|
Die Informationen werden regelmäßig aktualisiert.
|
|
Für detaillierte Tracking-Informationen besuchen Sie die
|
|
<a href="https://www.dhl.de/de/privatkunden/pakete-empfangen/verfolgen.html?lang=de&idc=${data.tracking_number}"
|
|
target="_blank" class="text-primary">
|
|
DHL Website <i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#tracking-content').html(html);
|
|
$('#tracking-results').show();
|
|
|
|
// Smooth scroll to results
|
|
$('html, body').animate({
|
|
scrollTop: $('#tracking-results').offset().top - 20
|
|
}, 500);
|
|
|
|
// Update URL without page refresh
|
|
if (history.pushState) {
|
|
var newUrl = window.location.protocol + "//" + window.location.host +
|
|
window.location.pathname + '?tracking_number=' + encodeURIComponent(data.tracking_number);
|
|
window.history.pushState({path: newUrl}, '', newUrl);
|
|
}
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
$('#error-message .alert p').html(message);
|
|
$('#error-message').show();
|
|
|
|
// Smooth scroll to error
|
|
$('html, body').animate({
|
|
scrollTop: $('#error-message').offset().top - 20
|
|
}, 500);
|
|
}
|
|
|
|
// Hide all result sections
|
|
function hideAllResults() {
|
|
$('#tracking-results, #error-message, #loading-spinner').hide();
|
|
}
|
|
|
|
// Reset form
|
|
function resetForm() {
|
|
$('#track-btn').prop('disabled', false).html('<i class="fas fa-search"></i> Sendung verfolgen');
|
|
}
|
|
|
|
// Get status badge HTML
|
|
function getStatusBadge(status) {
|
|
var badgeClass = '';
|
|
var text = status;
|
|
|
|
switch(status) {
|
|
case 'pending':
|
|
badgeClass = 'badge-warning';
|
|
text = 'Wartend';
|
|
break;
|
|
case 'created':
|
|
badgeClass = 'badge-success';
|
|
text = 'Erstellt';
|
|
break;
|
|
case 'shipped':
|
|
badgeClass = 'badge-primary';
|
|
text = 'Unterwegs';
|
|
break;
|
|
case 'delivered':
|
|
badgeClass = 'badge-info';
|
|
text = 'Zugestellt';
|
|
break;
|
|
case 'canceled':
|
|
case 'cancelled':
|
|
badgeClass = 'badge-secondary';
|
|
text = 'Storniert';
|
|
break;
|
|
case 'failed':
|
|
badgeClass = 'badge-danger';
|
|
text = 'Fehler';
|
|
break;
|
|
default:
|
|
badgeClass = 'badge-light';
|
|
}
|
|
|
|
return `<span class="badge ${badgeClass}">${text}</span>`;
|
|
}
|
|
|
|
// Get status icon
|
|
function getStatusIcon(status) {
|
|
var iconClass = '';
|
|
var color = 'text-muted';
|
|
|
|
switch(status) {
|
|
case 'pending':
|
|
iconClass = 'fas fa-clock';
|
|
color = 'text-warning';
|
|
break;
|
|
case 'created':
|
|
iconClass = 'fas fa-check-circle';
|
|
color = 'text-success';
|
|
break;
|
|
case 'shipped':
|
|
iconClass = 'fas fa-truck';
|
|
color = 'text-primary';
|
|
break;
|
|
case 'delivered':
|
|
iconClass = 'fas fa-home';
|
|
color = 'text-info';
|
|
break;
|
|
case 'canceled':
|
|
case 'cancelled':
|
|
iconClass = 'fas fa-ban';
|
|
color = 'text-secondary';
|
|
break;
|
|
case 'failed':
|
|
iconClass = 'fas fa-exclamation-triangle';
|
|
color = 'text-danger';
|
|
break;
|
|
default:
|
|
iconClass = 'fas fa-question-circle';
|
|
}
|
|
|
|
return `<i class="${iconClass} fa-4x ${color}"></i>`;
|
|
}
|
|
|
|
// Input validation
|
|
$('#tracking_number').on('input', function() {
|
|
var value = $(this).val().trim();
|
|
var isValid = value.length >= 10;
|
|
|
|
if (!isValid && value.length > 0) {
|
|
$(this).addClass('is-invalid');
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
// Back to top button
|
|
$(window).scroll(function() {
|
|
if ($(this).scrollTop() > 100) {
|
|
$('#back-to-top').fadeIn();
|
|
} else {
|
|
$('#back-to-top').fadeOut();
|
|
}
|
|
});
|
|
|
|
$('#back-to-top').click(function() {
|
|
$('html, body').animate({scrollTop: 0}, 600);
|
|
return false;
|
|
});
|
|
|
|
// Clear form when clicking on input
|
|
$('#tracking_number').focus(function() {
|
|
hideAllResults();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Custom styles for tracking page */
|
|
.border-left-primary {
|
|
border-left: 0.25rem solid #007bff !important;
|
|
}
|
|
|
|
.card {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
|
|
}
|
|
|
|
.form-control-lg {
|
|
padding: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 0.8rem 2rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.spinner-border {
|
|
animation: spinner-border 1s linear infinite;
|
|
}
|
|
|
|
#back-to-top {
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#back-to-top:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.display-4 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.card-body.p-5 {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection |