{% extends "base.html" %}

{% block content %}
<!-- Page Header -->
<div class="page-header">
    <div class="container">
        <h1>Track Your Shipment</h1>
        <p>Enter your tracking number to get real-time updates on your package</p>
    </div>
</div>

<!-- Tracking Section -->
<section style="padding: 60px 0; background: #F5F5F5;">
    <div class="container">
        <div class="tracking-box" style="max-width: 900px; margin: 0 auto;">
            <h2 style="text-align: center; margin-bottom: 30px;">Track Your Package</h2>
            <form id="trackingForm">
                <div class="tracking-form">
                    <input type="text" id="trackingNumber" class="tracking-input" placeholder="Enter your tracking number (e.g., NS-12345678-1234)" required>
                    <button type="submit" id="trackButton" class="tracking-button">Track Package</button>
                </div>
            </form>
            
            <div id="trackingResults" class="tracking-results"></div>
        </div>
    </div>
</section>

<!-- How to Track Section -->
<section style="padding: 60px 0; background: white;">
    <div class="container">
        <div class="section-title">
            <h2>How to Track Your Package</h2>
            <p>Follow these simple steps to track your shipment</p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">
                <div style="font-size: 48px; margin-bottom: 15px;">1️⃣</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">Enter Tracking Number</h3>
                <p style="color: #666;">Locate your tracking number on your receipt or email confirmation and enter it in the field above.</p>
            </div>
            
            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">
                <div style="font-size: 48px; margin-bottom: 15px;">2️⃣</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">Click Track</h3>
                <p style="color: #666;">Press the "Track Package" button to retrieve your shipment's current status and location.</p>
            </div>
            
            <div style="padding: 30px; background: #F5F5F5; border-radius: 10px;">
                <div style="font-size: 48px; margin-bottom: 15px;">3️⃣</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">View Updates</h3>
                <p style="color: #666;">See detailed tracking history including timestamps, locations, and delivery estimates.</p>
            </div>
        </div>
    </div>
</section>

<!-- Tracking Status Meanings -->
<section style="padding: 60px 0; background: #F5F5F5;">
    <div class="container">
        <div class="section-title">
            <h2>Tracking Status Meanings</h2>
            <p>Understanding what each status means for your shipment</p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto;">
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #E3F2FD; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">📦</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">Processing</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">Your shipment has been received and is being prepared for transit.</p>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">🚚</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">In Transit</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">Your package is on its way to the destination.</p>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #E8F5E9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">📬</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">Out for Delivery</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">Your package is on the delivery vehicle and will be delivered today.</p>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #C8E6C9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">✅</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">Delivered</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">Your package has been successfully delivered.</p>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #FFEBEE; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">⏸️</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">On Hold</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">Your shipment is temporarily on hold pending further action.</p>
                </div>
            </div>
            
            <div style="display: flex; align-items: center; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                <div style="width: 60px; height: 60px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px;">⚠️</div>
                <div>
                    <h4 style="margin-bottom: 5px; color: #4D148C;">Exception</h4>
                    <p style="font-size: 14px; color: #666; margin: 0;">There's an exception with your shipment. Contact support for details.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
<script src="https://sites.super.myninja.ai/_assets/ninja-daytona-script.js"></script>