<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Package Tracking | Golden Musk Freight</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
        }
        
        .tracking-input {
            transition: all 0.3s;
        }
        
        .tracking-input:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .hero-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
        }
        
        .animate-bounce-custom {
            animation: bounce 1s infinite alternate;
        }
        
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-10px);
            }
        }
        
        .tracking-status-dot {
            height: 12px;
            width: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="min-h-screen hero-pattern">
    <!-- Header with Logo -->
    <header class="bg-white shadow-sm py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center">
                <span class="text-2xl font-bold text-blue-600">
                    <i class="fas fa-truck-fast mr-2"></i>Golden Musk Freight
                </span>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Services</a>
                <a href="#" class="text-blue-600 font-medium">Track</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Contact</a>
            </nav>
            <button class="hidden text-gray-500 focus:outline-none">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <main class="container mx-auto px-4 py-10">
        <!-- Tracking Hero Section -->
        <div class="max-w-5xl mx-auto">
            <section class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-6 md:p-10 mb-8 text-white relative overflow-hidden shadow-xl">
                <div class="absolute right-0 top-0 opacity-10">
                    <i class="fas fa-truck-fast text-9xl transform -rotate-12 translate-x-10 -translate-y-10"></i>
                </div>
                
                <h1 class="text-3xl md:text-4xl font-bold mb-2">Track Your Shipment</h1>
                <p class="mb-6 text-blue-100 max-w-xl">Get real-time updates on your package location, estimated delivery date, and current status.</p>
                
                <div x-data="{ isLoading: false, showDetails: false }">
                    <?php if(session('error')): ?>
                        <div class="mb-6 bg-red-500 bg-opacity-25 border border-red-200 text-white px-4 py-3 rounded-lg relative fade-in">
                            <i class="fas fa-exclamation-circle mr-2"></i><?php echo e(session('error')); ?>

                        </div>
                    <?php endif; ?>
                    
                    <form class="relative" action="<?php echo e(route('track.submit')); ?>" method="POST" @submit="isLoading = true; setTimeout(() => { isLoading = false; showDetails = true }, 1500)">
                        <?php echo csrf_field(); ?>
                        <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                            <div class="flex-grow relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <i class="fas fa-search text-gray-400"></i>
                                </div>
                                <input type="text" id="tracking-number" name="tracking_number" placeholder="Enter tracking number (e.g., EDF123456789)" 
                                    class="tracking-input w-full pl-12 pr-4 py-4 bg-white text-gray-700 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition-all"
                                    required>
                                <div class="absolute inset-y-0 right-0 pr-4 flex items-center" x-show="isLoading">
                                    <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                </div>
                            </div>
                            <button type="submit" class="bg-white text-blue-600 font-semibold py-4 px-8 rounded-lg shadow-md hover:bg-gray-50 transition-colors duration-300 flex items-center justify-center">
                                <span>Track Package</span>
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                        <p class="text-sm text-blue-100 mt-3">
                            <i class="fas fa-info-circle mr-1"></i>
                            You can enter up to 10 tracking numbers, separated by commas
                        </p>
                    </form>
                </div>
            </section>
            
            <!-- Services Grid -->
            <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
                <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mb-4">
                        <i class="fas fa-map-marker-alt text-xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Live Tracking</h2>
                    <p class="text-gray-600">Follow your package in real-time with our interactive map and detailed status updates.</p>
                </div>
                
                <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-4">
                        <i class="fas fa-bell text-xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Delivery Alerts</h2>
                    <p class="text-gray-600">Set up SMS or email notifications to stay updated with your package status.</p>
                </div>
                
                <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-4">
                        <i class="fas fa-calendar-alt text-xl"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">Delivery Options</h2>
                    <p class="text-gray-600">Customize delivery preferences or reschedule to meet your availability.</p>
                </div>
            </section>
            
            <!-- Support Section -->
            <section class="bg-white rounded-xl shadow-md p-8 mb-10">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4">Need Assistance?</h2>
                        <p class="text-gray-600 mb-6">Our customer support team is available 24/7 to help with your delivery questions and concerns.</p>
                        <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                            <a href="mailto:support@goldenmuskfreight.com" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                                <i class="fas fa-envelope mr-2"></i> Email Support
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center">
                        <div class="relative w-64 h-64">
                            <div class="absolute inset-0 bg-blue-100 rounded-full opacity-20 animate-pulse"></div>
                            <img src="https://cdn.pixabay.com/photo/2017/01/10/23/01/icon-1970474_960_720.png" alt="Customer Support" class="relative z-10 w-full h-full object-contain animate-bounce-custom">
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- FAQ Section -->
            <section class="bg-white rounded-xl shadow-md p-8" x-data="{ selected: null }">
                <h2 class="text-2xl font-bold text-gray-800 mb-6">Frequently Asked Questions</h2>
                
                <div class="space-y-4">
                    <div class="border border-gray-200 rounded-lg overflow-hidden" x-data="{ open: false }">
                        <button 
                            @click="open = !open" 
                            class="flex justify-between items-center w-full px-6 py-4 text-left font-semibold focus:outline-none"
                            :class="{'bg-blue-50': open}"
                        >
                            <span>How do I track my package?</span>
                            <i class="fas fa-chevron-down transform transition-transform" :class="{'rotate-180': open}"></i>
                        </button>
                        <div x-show="open" x-collapse>
                            <div class="px-6 py-4 text-gray-600 bg-gray-50">
                                <p>You can track your package by entering your tracking number in the search field above. Your tracking number is provided in your shipping confirmation email or receipt.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg overflow-hidden" x-data="{ open: false }">
                        <button 
                            @click="open = !open" 
                            class="flex justify-between items-center w-full px-6 py-4 text-left font-semibold focus:outline-none"
                            :class="{'bg-blue-50': open}"
                        >
                            <span>What if my package is delayed?</span>
                            <i class="fas fa-chevron-down transform transition-transform" :class="{'rotate-180': open}"></i>
                        </button>
                        <div x-show="open" x-collapse>
                            <div class="px-6 py-4 text-gray-600 bg-gray-50">
                                <p>If your package is experiencing delays, you'll see updated delivery estimates in your tracking information. For additional assistance, please contact our customer support team.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg overflow-hidden" x-data="{ open: false }">
                        <button 
                            @click="open = !open" 
                            class="flex justify-between items-center w-full px-6 py-4 text-left font-semibold focus:outline-none"
                            :class="{'bg-blue-50': open}"
                        >
                            <span>Can I change my delivery address?</span>
                            <i class="fas fa-chevron-down transform transition-transform" :class="{'rotate-180': open}"></i>
                        </button>
                        <div x-show="open" x-collapse>
                            <div class="px-6 py-4 text-gray-600 bg-gray-50">
                                <p>Yes, in most cases you can change your delivery address by contacting our customer support team with your tracking number and the new delivery details.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-10 mt-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Golden Musk Freight</h3>
                    <p class="text-gray-400 mb-4">Reliable shipping solutions for businesses and individuals worldwide.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-semibold mb-4">Services</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Express Shipping</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">International Delivery</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Freight Services</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Bulk Shipping</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-semibold mb-4">Help & Support</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Track Shipment</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Shipping Policy</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-semibold mb-4">Contact Info</h3>
                    <address class="not-italic text-gray-400 space-y-2">
                        <p><i class="fas fa-envelope mr-2 text-gray-300"></i> support@goldenmuskfreight.com</p>
                    </address>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400">&copy; 2023 Golden Musk Freight. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

<?php /**PATH /home/vaulteli/public_html/resources/views/tracking/form.blade.php ENDPATH**/ ?>