<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title ?? 'RoutexShipping - Global Logistics Solutions'; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #1e40af;
            --primary-dark: #1e3a8a;
            --secondary: #f97316;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .gradient-primary {
            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
        }
        
        .gradient-secondary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        }
        
        .btn-primary {
            @apply px-6 py-3 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg font-semibold hover:shadow-lg transition-all duration-300;
        }
        
        .btn-secondary {
            @apply px-6 py-3 bg-white text-blue-600 border-2 border-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-all duration-300;
        }
        
        .card-hover {
            @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
        }
        
        .status-badge {
            @apply inline-block px-4 py-2 rounded-full text-sm font-semibold;
        }
        
        .timeline-item {
            @apply relative pl-8 pb-8;
        }
        
        .timeline-item::before {
            content: '';
            @apply absolute left-0 top-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white;
        }
        
        .timeline-item:last-child {
            @apply pb-0;
        }
        
        .timeline-item:last-child::after {
            display: none;
        }
        
        .timeline-item::after {
            content: '';
            @apply absolute left-1.5 top-4 w-0.5 h-full bg-gray-300;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 767px) {
            .table-container {
                overflow-x: auto;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex items-center">
                  <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
    <a href="/routex/"><img src="/routex/images/routex-logo.png" alt="RoutexShipping Logo" class="h-8 w-auto"></a>

    </div>
                </div>

                <!-- Menu -->
                <!-- <div class="hidden md:flex items-center space-x-8">
                    <a href="/routex/" class="text-gray-700 hover:text-purple-600 transition">Home</a>
                    <a href="javascript:history.back()" class="md:hidden text-gray-700 hover:text-purple-600 transition">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                    <a href="/routex/track" class="text-gray-700 hover:text-purple-600 transition">Track</a>
                    <a href="/routex/services" class="text-gray-700 hover:text-purple-600 transition">Services</a>
                    <a href="/routex/about" class="text-gray-700 hover:text-purple-600 transition">About</a>
                    <a href="/routex/contact" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
                    <a href="/routex/admin/login" class="btn-primary text-sm">Admin</a>
                </div> -->

                <!-- Mobile menu button -->
                <div class="md:hidden flex items-center gap-4">
                    <a href="javascript:history.back()" class="text-gray-700 hover:text-purple-600 transition">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </a>
                    <button id="mobile-menu-btn" class="text-gray-700 hover:text-purple-600">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>

            <!-- Mobile menu -->
            <div id="mobile-menu" class="hidden md:hidden pb-4 border-t">
                <a href="/routex/" class="block py-2 text-gray-700 hover:text-purple-600">Home</a>
                <a href="/routex/track" class="block py-2 text-gray-700 hover:text-purple-600">Track</a>
                <a href="/routex/services" class="block py-2 text-gray-700 hover:text-purple-600">Services</a>
                <a href="/routex/about" class="block py-2 text-gray-700 hover:text-purple-600">About</a>
                <a href="/routex/contact" class="block py-2 text-gray-700 hover:text-purple-600">Contact</a>
                <a href="/routex/admin/login" class="block py-2 text-purple-600 font-semibold">Admin</a>
            </div>
        </div>
    </nav>

    <script>
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });
    </script>
