Order Tracker

import SwiftUI

struct OrderTrackingTemplate: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 32) {
                    // Order Header
                    VStack(spacing: 16) {
                        Image(systemName: "shippingbox.fill")
                            .font(.system(size: 48))
                            .foregroundStyle(.blue)
                        Text("Order #1002")
                            .font(.title2)
                            .fontWeight(.bold)
                        Text("Estimated delivery: May 30, 2024")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .padding(.top, 32)

                    // Tracking Progress Bar
                    VStack(alignment: .leading, spacing: 20) {
                        Text("Tracking Progress")
                            .font(.headline)
                            .padding(.horizontal)
                        
                        VStack(spacing: 16) {
                            // Progress Bar with Dots
                            HStack(spacing: 0) {
                                ForEach(trackingSteps.indices, id: \.self) { index in
                                    let step = trackingSteps[index]
                                    HStack(spacing: 0) {
                                        ZStack {
                                            Circle()
                                                .fill(step.isCompleted ? Color.blue : Color(.systemGray5))
                                                .frame(width: 16, height: 16)
                                            if step.isCompleted {
                                                Image(systemName: "checkmark")
                                                    .font(.system(size: 10, weight: .bold))
                                                    .foregroundColor(.white)
                                            }
                                        }
                                        if index < trackingSteps.count - 1 {
                                            Rectangle()
                                                .fill(step.isCompleted ? Color.blue : Color(.systemGray5))
                                                .frame(height: 2)
                                                .frame(maxWidth: .infinity)
                                        }
                                    }
                                }
                            }
                            
                            // Current Status
                            HStack(spacing: 12) {
                                Image(systemName: "truck.box.fill")
                                    .font(.title2)
                                    .foregroundColor(.blue)
                                VStack(alignment: .leading, spacing: 2) {
                                    Text("Out for Delivery")
                                        .font(.headline)
                                    Text("Your package will arrive today")
                                        .font(.subheadline)
                                        .foregroundColor(.secondary)
                                }
                                Spacer()
                            }
                        }
                        .padding()
                        .background(
                            RoundedRectangle(cornerRadius: 16, style: .continuous)
                                .fill(Color(.systemBackground))
                        )
                        .padding(.horizontal)
                    }

                    // Delivery Address
                    VStack(alignment: .leading, spacing: 12) {
                        HStack {
                            Image(systemName: "location.fill")
                                .foregroundColor(.blue)
                            Text("Delivery Address")
                                .font(.headline)
                        }
                        Text("John Doe\n123 Main St\nSan Francisco, CA 94101")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(Color(.systemBackground))
                    )
                    .padding(.horizontal)

                    // Order Items
                    VStack(alignment: .leading, spacing: 12) {
                        Text("Order Items")
                            .font(.headline)
                        ForEach(orderItems) { item in
                            OrderItemRow(item: item)
                        }
                    }
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(Color(.systemBackground))
                    )
                    .padding(.horizontal)
                }
                .padding(.bottom, 32)
            }
            .navigationTitle("Track Order")
            .navigationBarTitleDisplayMode(.inline)
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

// MARK: - Tracking Steps
struct TrackingStep: Identifiable {
    let id = UUID()
    let title: String
    let description: String
    let timestamp: String
    let isCompleted: Bool
    let icon: String
}

let trackingSteps: [TrackingStep] = [
    .init(title: "Order Placed", description: "Your order has been confirmed", timestamp: "May 25, 2:30 PM", isCompleted: true, icon: "checkmark.circle.fill"),
    .init(title: "Processing", description: "Preparing your order for shipment", timestamp: "May 26, 9:15 AM", isCompleted: true, icon: "gearshape.fill"),
    .init(title: "Shipped", description: "Your order is on its way", timestamp: "May 27, 3:45 PM", isCompleted: true, icon: "truck.box.fill"),
    .init(title: "Out for Delivery", description: "Your package will arrive today", timestamp: "May 30, 8:00 AM", isCompleted: false, icon: "bicycle")
]

struct TrackingStepRow: View {
    let step: TrackingStep
    let isLast: Bool
    
    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            ZStack {
                Circle()
                    .fill(step.isCompleted ? Color.blue : Color(.systemGray5))
                    .frame(width: 32, height: 32)
                Image(systemName: step.icon)
                    .font(.system(size: 16))
                    .foregroundColor(step.isCompleted ? .white : .gray)
            }
            
            VStack(alignment: .leading, spacing: 4) {
                Text(step.title)
                    .font(.headline)
                    .foregroundColor(step.isCompleted ? .primary : .secondary)
                Text(step.description)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                Text(step.timestamp)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            
            Spacer()
        }
        .padding(.vertical, 8)
        
        if !isLast {
            HStack {
                Circle()
                    .fill(Color(.systemGray5))
                    .frame(width: 2, height: 2)
                    .padding(.leading, 15)
                Spacer()
            }
        }
    }
}

// MARK: - Order Items
struct OrderItems: Identifiable {
    let id = UUID()
    let name: String
    let icon: String
    let qty: Int
    let price: Double
}

let orderItems: [OrderItems] = [
    .init(name: "Wireless Earbuds", icon: "earbuds", qty: 1, price: 150.0),
    .init(name: "Charging Cable", icon: "cable.connector", qty: 2, price: 30.0)
]

struct OrderItemRow: View {
    let item: OrderItems
    var body: some View {
        HStack(spacing: 12) {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(Color(.systemGray6))
                    .frame(width: 40, height: 40)
                Image(systemName: item.icon)
                    .font(.system(size: 20))
                    .foregroundColor(.blue)
            }
            VStack(alignment: .leading, spacing: 2) {
                Text(item.name)
                    .font(.subheadline)
                Text("\(item.qty)x")
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            Spacer()
            Text(String(format: "$%.2f", item.price * Double(item.qty)))
                .font(.subheadline)
        }
        .padding(.vertical, 4)
    }
}

#Preview {
    OrderTrackingTemplate()
}