@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);
            }
        });
    });
    
    // Escape HTML special characters so DHL-/DB-derived strings can never
    // execute JavaScript even if jQuery's .html() is used.
    function escapeTrackingHtml(value) {
        if (value === null || value === undefined) {
            return '';
        }
        return String(value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    // 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>${escapeTrackingHtml(data.tracking_status)}</em></p>` : '';
        var lastTrackedInfo = data.last_tracked_at ?
            `<p class="mb-2"><strong>Zuletzt aktualisiert:</strong> ${escapeTrackingHtml(data.last_tracked_at)}</p>` : '';

        var trackingNumberEscaped = escapeTrackingHtml(data.tracking_number);
        var trackingNumberUrlEncoded = encodeURIComponent(data.tracking_number ?? '');

        var html = `
            <div class="row">
                <div class="col-md-6">
                    <h5 class="text-primary mb-3">
                        <i class="fas fa-hashtag"></i>
                        ${trackingNumberEscaped}
                    </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=${trackingNumberUrlEncoded}"
                               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) {
        // Use .text() instead of .html() so error strings from the server
        // can never inject HTML.
        $('#error-message .alert p').text(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';
        }

        // Both the fallback `text` (raw status) and the class are escaped so
        // unmapped DHL status codes can never inject HTML or break out of the
        // class attribute.
        return `<span class="badge ${escapeTrackingHtml(badgeClass)}">${escapeTrackingHtml(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