<x-layouts.dashboard :title="'Order '.$order->order_number">
    <section class="card gts-order-detail">
        <div>
            <p class="eyebrow">GTS Order Detail</p>
            <h2>{{ $order->service?->name }}</h2>
            <p>{{ $order->target_link }}</p>
        </div>
        <span class="badge status-{{ str($order->status)->slug() }}">{{ str($order->status)->headline() }}</span>
    </section>

    <div class="grid two gts-client-panels">
        <section class="card">
            <h3>Order Data</h3>
            <div class="gts-detail-list">
                <span><b>Order ID</b>{{ $order->order_number }}</span>
                <span><b>Quantity</b>{{ number_format($order->quantity) }}</span>
                <span><b>Charge</b>PKR {{ number_format($order->charge) }}</span>
                <span><b>Created</b>{{ $order->created_at->format('M j, Y') }}</span>
            </div>
        </section>
        <section class="card">
            <h3>Delivery Timeline</h3>
            <div class="gts-track-timeline compact">
                @php($nextActiveShown = false)
                @foreach(['Queued' => 10, 'Processing' => 45, 'Partial' => 75, 'Completed' => 100] as $state => $point)
                    @php($isDone = $order->progress >= $point)
                    @php($isActive = ! $isDone && ! $nextActiveShown)
                    @php($nextActiveShown = $nextActiveShown || $isActive)
                    <span @class(['done' => $isDone, 'active' => $isActive])><b></b>{{ $state }}</span>
                @endforeach
            </div>
            <div class="progress"><i style="width:{{ $order->progress }}%"></i></div>
        </section>
    </div>
</x-layouts.dashboard>
