@extends('layouts.mobile')

@section('title', 'Track Order - Gletra')

@section('content')
<header class="app-header">
    <a href="{{ route('mobile.orders.show', $order->id) }}" class="d-flex align-items-center text-white text-decoration-none" style="font-size: 20px;">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div style="flex: 1; margin-left: 15px; font-weight: 600;">Track Order</div>
</header>

<div style="margin-top: var(--header-height); padding: 15px; padding-bottom: calc(var(--nav-height) + 20px);">
    <div style="background: white; border-radius: 8px; padding: 15px; margin-bottom: 12px;">
        <div style="font-size: 12px; color: #878787; margin-bottom: 4px;">Order ID</div>
        <div style="font-size: 15px; font-weight: 700;">{{ $order->order_number }}</div>
        <div style="margin-top: 10px; font-size: 12px; color: #878787;">Courier: {{ $tracking['courier'] }}</div>
        <div style="font-size: 12px; color: #878787;">AWB: {{ $tracking['awb'] }}</div>
        <div style="margin-top: 8px;">
            <span style="background: #fb641b; color: white; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px;">
                {{ $tracking['status_label'] }}
            </span>
        </div>
    </div>

    <div style="background: white; border-radius: 8px; padding: 15px;">
        <h6 style="font-size: 13px; font-weight: 700; color: #878787; text-transform: uppercase; margin-bottom: 15px;">Delivery Timeline</h6>
        @foreach($tracking['steps'] as $step)
        <div style="display: flex; gap: 12px; margin-bottom: 16px; opacity: {{ ($step['completed'] ?? false) ? '1' : '0.55' }};">
            <div style="width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: {{ ($step['active'] ?? false) ? '#2874f0' : (($step['completed'] ?? false) ? '#388e3c' : '#ddd') }}; flex-shrink: 0;"></div>
            <div>
                <div style="font-size: 14px; font-weight: {{ ($step['active'] ?? false) ? '700' : '600' }}; color: #212121;">{{ $step['title'] }}</div>
                <div style="font-size: 12px; color: #878787; margin-top: 2px;">{{ $step['time'] }}</div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection