@extends('layouts.app')
@section('title', 'Order #' . $order->order_number . ' — Details')
@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">
{{-- Breadcrumb --}}
<nav class="text-sm text-gray-500 mb-6 flex items-center gap-2">
<a href="{{ route('home') }}" class="hover:text-primary-600">Home</a>
<span>/</span>
<a href="{{ route('orders.index') }}" class="hover:text-primary-600">My Orders</a>
<span>/</span>
<span class="text-gray-900 font-medium">Order #{{ $order->order_number }}</span>
</nav>
{{-- Header --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900">Order #{{ $order->order_number }}</h1>
<p class="text-gray-500 mt-1">Placed on {{ $order->created_at->format('d M Y, h:i A') }}</p>
@if($order->uuid)
<p class="text-xs text-gray-400 mt-0.5 font-mono">{{ $order->uuid }}</p>
@endif
</div>
<div class="flex items-center gap-3">
@auth
@if($order->user_id === auth()->id() || auth()->user()->hasAnyRole(['admin', 'super_admin', 'pharmacist']))
<a href="{{ route('orders.invoice', $order->order_number) }}" target="_blank"
class="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
🧾 Order Slip / Invoice
</a>
@endif
@endauth
@php
$statusColors = [
'pending' => 'bg-yellow-100 text-yellow-800',
'confirmed' => 'bg-blue-100 text-blue-800',
'processing' => 'bg-indigo-100 text-indigo-800',
'shipped' => 'bg-purple-100 text-purple-800',
'delivered' => 'bg-green-100 text-green-800',
'completed' => 'bg-green-100 text-green-800',
'cancelled' => 'bg-red-100 text-red-800',
'refunded' => 'bg-gray-100 text-gray-700',
];
$color = $statusColors[$order->status] ?? 'bg-gray-100 text-gray-800';
@endphp
<span class="px-4 py-1.5 rounded-full text-sm font-semibold {{ $color }}">
{{ ucfirst($order->status) }}
</span>
<a href="{{ route('orders.track', $order->uuid) }}"
class="text-sm text-primary-600 hover:underline font-medium">
Track Order →
</a>
</div>
</div>
{{-- Progress timeline --}}
@php
$steps = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
$current = array_search($order->status, $steps);
$current = ($current === false) ? 0 : $current;
@endphp
<div class="mt-6 flex items-center">
@foreach($steps as $i => $step)
<div class="flex items-center {{ $loop->last ? '' : 'flex-1' }}">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
{{ $i <= $current ? 'bg-primary-600 text-white' : 'bg-gray-200 text-gray-500' }}">
@if($i < $current)✓@else{{ $i + 1 }}@endif
</div>
<span class="text-xs mt-1 hidden sm:block {{ $i <= $current ? 'text-primary-600 font-medium' : 'text-gray-400' }}">
{{ ucfirst($step) }}
</span>
</div>
@unless($loop->last)
<div class="flex-1 h-1 mx-1 rounded {{ $i < $current ? 'bg-primary-600' : 'bg-gray-200' }}"></div>
@endunless
</div>
@endforeach
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
{{-- Left column: items + shipments + history --}}
<div class="lg:col-span-2 space-y-6">
{{-- Order Items --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Items Ordered</h2>
<div class="divide-y divide-gray-100">
@foreach($order->items as $item)
@php
$product = $item->product;
$thumb = $product?->thumbnail;
$name = $product?->name ?? $item->product_name ?? 'Product';
$variant = $item->variant;
@endphp
<div class="py-4 flex gap-4">
{{-- Thumbnail --}}
<div class="w-16 h-16 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0">
@if($thumb)
<img src="{{ $thumb }}" alt="{{ $name }}" class="w-full h-full object-cover">
@else
<div class="w-full h-full flex items-center justify-center text-gray-300">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10"/>
</svg>
</div>
@endif
</div>
{{-- Details --}}
<div class="flex-1 min-w-0">
<p class="font-semibold text-gray-900 text-sm leading-tight">{{ $name }}</p>
@if($variant)
<p class="text-xs text-gray-500 mt-0.5">{{ $variant->variant_label }}</p>
@endif
@if($item->sku ?? $product?->sku)
<p class="text-xs text-gray-400 mt-0.5 font-mono">SKU: {{ $item->sku ?? $product->sku }}</p>
@endif
<p class="text-xs text-gray-500 mt-1">Qty: {{ $item->quantity }}</p>
</div>
{{-- Price --}}
<div class="text-right flex-shrink-0">
<p class="font-semibold text-gray-900">
{{ format_price($item->unit_price * $item->quantity) }}
</p>
<p class="text-xs text-gray-400">{{ format_price($item->unit_price) }} each</p>
</div>
</div>
@endforeach
</div>
</div>
{{-- Shipments --}}
@if($order->shipments->count())
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Shipments</h2>
<div class="space-y-4">
@foreach($order->shipments as $shipment)
<div class="border border-gray-100 rounded-xl p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-semibold text-gray-800">{{ $shipment->provider ?? 'Courier' }}</span>
<span class="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 font-medium">
{{ ucfirst($shipment->status ?? 'Processing') }}
</span>
</div>
@if($shipment->awb)
<p class="text-xs text-gray-500">AWB: <span class="font-mono">{{ $shipment->awb }}</span></p>
@endif
@if($shipment->estimated_delivery)
<p class="text-xs text-gray-500 mt-1">
Est. delivery: {{ \Carbon\Carbon::parse($shipment->estimated_delivery)->format('d M Y') }}
</p>
@endif
</div>
@endforeach
</div>
</div>
@endif
{{-- Status History --}}
@if($order->statusHistories->count())
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Order History</h2>
<ol class="relative border-l border-gray-200 ml-3 space-y-4">
@foreach($order->statusHistories as $history)
<li class="ml-4">
<div class="absolute -left-1.5 mt-1.5 w-3 h-3 rounded-full border-2 border-white bg-primary-500"></div>
<time class="text-xs text-gray-400">
{{ $history->created_at->format('d M Y, h:i A') }}
</time>
<p class="text-sm font-medium text-gray-800 mt-0.5">
{{ ucfirst(str_replace('_', ' ', $history->status)) }}
</p>
@if($history->note ?? $history->comment)
<p class="text-xs text-gray-500 mt-0.5">{{ $history->note ?? $history->comment }}</p>
@endif
</li>
@endforeach
</ol>
</div>
@endif
</div>
{{-- Right column: summary + addresses + payment --}}
<div class="space-y-6">
{{-- Order Summary --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Order Summary</h2>
<dl class="space-y-2 text-sm">
<div class="flex justify-between">
<dt class="text-gray-500">Subtotal</dt>
<dd class="text-gray-900">{{ format_price($order->subtotal ?? $order->total_amount) }}</dd>
</div>
@if(($order->discount_amount ?? 0) > 0)
<div class="flex justify-between text-green-700">
<dt>Discount</dt>
<dd>− {{ format_price($order->discount_amount) }}</dd>
</div>
@endif
@if(($order->shipping_amount ?? 0) > 0)
<div class="flex justify-between">
<dt class="text-gray-500">Shipping</dt>
<dd class="text-gray-900">{{ format_price($order->shipping_amount) }}</dd>
</div>
@endif
@if(($order->tax_amount ?? 0) > 0)
<div class="flex justify-between">
<dt class="text-gray-500">Tax</dt>
<dd class="text-gray-900">{{ format_price($order->tax_amount) }}</dd>
</div>
@endif
<div class="border-t border-gray-100 pt-2 flex justify-between font-semibold text-base">
<dt>Total</dt>
<dd class="text-primary-700">{{ format_price($order->total_amount) }}</dd>
</div>
</dl>
{{-- Payment info --}}
@if($order->payments->count())
<div class="mt-4 pt-4 border-t border-gray-100">
<p class="text-xs text-gray-500 mb-2 font-medium uppercase tracking-wide">Payment</p>
@foreach($order->payments as $payment)
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-600 capitalize">{{ str_replace('_', ' ', $payment->method ?? $payment->gateway ?? 'Online') }}</span>
<span class="font-medium {{ $payment->status === 'paid' ? 'text-green-700' : 'text-gray-700' }}">
{{ ucfirst($payment->status ?? 'pending') }}
</span>
</div>
@endforeach
</div>
@endif
</div>
{{-- Shipping Address --}}
@if($order->shipping_address)
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
<h2 class="text-base font-semibold text-gray-900 mb-3">Shipping Address</h2>
@php $addr = is_array($order->shipping_address) ? $order->shipping_address : json_decode($order->shipping_address, true); @endphp
<address class="not-italic text-sm text-gray-700 leading-relaxed space-y-0.5">
@if($addr['name'] ?? null)<p class="font-medium">{{ $addr['name'] }}</p>@endif
@if($addr['line1'] ?? $addr['address_line_1'] ?? null)
<p>{{ $addr['line1'] ?? $addr['address_line_1'] }}</p>
@endif
@if($addr['line2'] ?? $addr['address_line_2'] ?? null)
<p>{{ $addr['line2'] ?? $addr['address_line_2'] }}</p>
@endif
<p>
{{ $addr['city'] ?? '' }}
@if($addr['state'] ?? null), {{ $addr['state'] }}@endif
@if($addr['postal_code'] ?? $addr['zip'] ?? null) — {{ $addr['postal_code'] ?? $addr['zip'] }}@endif
</p>
@if($addr['country'] ?? null)<p>{{ $addr['country'] }}</p>@endif
@if($addr['phone'] ?? null)
<p class="text-gray-500 mt-1">📞 {{ $addr['phone'] }}</p>
@endif
</address>
</div>
@endif
{{-- Actions --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-3">
<h2 class="text-base font-semibold text-gray-900 mb-3">Actions</h2>
<a href="{{ route('orders.track', $order->uuid) }}"
class="block w-full text-center py-2.5 px-4 bg-primary-600 text-white rounded-xl text-sm font-medium hover:bg-primary-700 transition">
Track Shipment
</a>
@if(in_array($order->status, ['pending', 'confirmed']))
<form action="{{ route('orders.cancel', $order->uuid) }}" method="POST"
onsubmit="return confirm('Are you sure you want to cancel this order?')">
@csrf
@method('DELETE')
<button type="submit"
class="w-full py-2.5 px-4 border border-red-200 text-red-600 rounded-xl text-sm font-medium hover:bg-red-50 transition">
Cancel Order
</button>
</form>
@endif
@if($order->status === 'delivered')
<a href="{{ route('orders.return.create', $order->uuid) }}"
class="block w-full text-center py-2.5 px-4 border border-gray-200 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-50 transition">
Request Return / Refund
</a>
@endif
<a href="{{ route('orders.index') }}"
class="block w-full text-center py-2.5 px-4 border border-gray-200 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-50 transition">
← Back to My Orders
</a>
</div>
</div>
</div>
</div>
@endsection