@extends('layouts.admin')

@section('page-title', 'Order #' . $order->order_number)

@section('content')
<div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold">Order #{{ $order->order_number }}</h2>
    <a href="{{ route('admin.orders.index') }}" class="royal-btn px-4 py-2 text-sm">Back to Orders</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <div class="royal-card p-6">
            <h4 class="font-semibold mb-4">Order Items</h4>
            <table class="w-full text-sm">
                <thead class="border-b"><tr><th class="text-left py-3">Product</th><th class="text-left py-3">Warehouse</th><th class="text-left py-3">Fulfillment</th><th class="text-center py-3">Qty</th><th class="text-right py-3">Price</th><th class="text-right py-3">Subtotal</th></tr></thead>
                <tbody>
                    @foreach($order->items as $item)
                        <tr class="border-b">
                            <td class="py-3">{{ $item->product_name ?? ($item->product?->name ?? 'Deleted') }}</td>
                            <td class="py-3">
                                @if(($item->warehouse ?? 'ghana') === 'china')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-red-50 text-red-700 text-xs font-medium rounded">🇨🇳 China</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-50 text-green-700 text-xs font-medium rounded">🇬🇭 Ghana</span>
                                @endif
                            </td>
                            <td class="py-3">
                                @php
                                    $fStatus = $item->fulfillment_status ?? 'pending';
                                    $fBadge = match($fStatus) {
                                        'pending' => 'bg-gray-100 text-gray-600',
                                        'in_transit' => 'bg-blue-100 text-blue-700',
                                        'arrived' => 'bg-amber-100 text-amber-700',
                                        'shipped' => 'bg-purple-100 text-purple-700',
                                        'delivered' => 'bg-green-100 text-green-700',
                                        default => 'bg-gray-100 text-gray-600'
                                    };
                                    $fLabel = match($fStatus) {
                                        'pending' => 'Pending',
                                        'in_transit' => 'In Transit',
                                        'arrived' => 'Arrived',
                                        'shipped' => 'Shipped',
                                        'delivered' => 'Delivered',
                                        default => 'Pending'
                                    };
                                @endphp
                                <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded {{ $fBadge }}">{{ $fLabel }}</span>
                                @if($item->expected_arrival && $fStatus === 'pending')
                                    <p class="text-[10px] text-gray-500 mt-1">ETA: {{ $item->expected_arrival->format('M d, Y') }}</p>
                                @endif
                            </td>
                            <td class="py-3 text-center">{{ $item->quantity }}</td>
                            <td class="py-3 text-right">${{ number_format($item->price, 2) }}</td>
                            <td class="py-3 text-right font-semibold">${{ number_format($item->subtotal, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if($order->hasMixedWarehouses())
                <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                    <p class="text-xs text-amber-700 font-medium">⚠️ Mixed warehouse order</p>
                    <p class="text-xs text-amber-600 mt-1">Ghana items can ship immediately. China items need freight processing first.</p>
                </div>
            @endif

            <div class="mt-4 text-right space-y-2">
                <p class="text-sm">Subtotal: <span class="font-semibold">${{ number_format($order->subtotal, 2) }}</span></p>
                @if($order->shipping_cost > 0) <p class="text-sm">Shipping: <span class="font-semibold">${{ number_format($order->shipping_cost, 2) }}</span></p> @endif
                @if($order->discount > 0) <p class="text-sm text-green-600">Discount: <span class="font-semibold">-${{ number_format($order->discount, 2) }}</span></p> @endif
                @if($order->tax > 0) <p class="text-sm">Tax: <span class="font-semibold">${{ number_format($order->tax, 2) }}</span></p> @endif
                <p class="text-lg font-bold">Total: ${{ number_format($order->total, 2) }}</p>
            </div>
        </div>

        @if($order->shipments->count() > 0)
        <div class="royal-card p-6">
            <h4 class="font-semibold mb-4">Shipments</h4>
            <div class="space-y-4">
                @foreach($order->shipments as $shipment)
                    <div class="p-4 border rounded-lg">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-3">
                                @if($shipment->warehouse === 'china')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-red-50 text-red-700 text-xs font-medium rounded">🇨🇳 China</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-50 text-green-700 text-xs font-medium rounded">🇬🇭 Ghana</span>
                                @endif
                                @php
                                    $sBadge = match($shipment->status) {
                                        'pending' => 'bg-gray-100 text-gray-600',
                                        'processing' => 'bg-amber-100 text-amber-700',
                                        'in_transit' => 'bg-blue-100 text-blue-700',
                                        'out_for_delivery' => 'bg-purple-100 text-purple-700',
                                        'delivered' => 'bg-green-100 text-green-700',
                                        default => 'bg-gray-100 text-gray-600'
                                    };
                                @endphp
                                <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded {{ $sBadge }}">{{ ucfirst(str_replace('_', ' ', $shipment->status)) }}</span>
                            </div>
                            @if($shipment->tracking_number)
                                <span class="text-xs font-mono text-gray-500">{{ $shipment->tracking_number }}</span>
                            @endif
                        </div>
                        @if($shipment->carrier)
                            <p class="text-xs text-gray-500 mt-2">Carrier: {{ $shipment->carrier }}</p>
                        @endif
                        @if($shipment->notes)
                            <p class="text-xs text-gray-500 mt-1">{{ $shipment->notes }}</p>
                        @endif
                        <form action="{{ route('admin.orders.shipments.update', [$order->order_number, $shipment->id]) }}" method="POST" class="mt-4 pt-4 border-t">
                            @csrf @method('PATCH')
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">Status</label>
                                    <select name="status" class="w-full px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <option value="pending" {{ $shipment->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="processing" {{ $shipment->status === 'processing' ? 'selected' : '' }}>Processing</option>
                                        <option value="in_transit" {{ $shipment->status === 'in_transit' ? 'selected' : '' }}>In Transit</option>
                                        <option value="out_for_delivery" {{ $shipment->status === 'out_for_delivery' ? 'selected' : '' }}>Out for Delivery</option>
                                        <option value="delivered" {{ $shipment->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">Carrier</label>
                                    <input type="text" name="carrier" value="{{ $shipment->carrier ?? '' }}" placeholder="e.g. DHL, FedEx" class="w-full px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">Tracking Number</label>
                                    <input type="text" name="tracking_number" value="{{ $shipment->tracking_number ?? '' }}" placeholder="Tracking #" class="w-full px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-500 mb-1 block">Notes</label>
                                    <input type="text" name="notes" value="{{ $shipment->notes ?? '' }}" placeholder="Optional note" class="w-full px-3 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                            </div>
                            <button type="submit" class="mt-3 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition">Update Shipment</button>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
        @endif

        @if($order->notes)
            <div class="royal-card p-6">
                <h4 class="font-semibold mb-2">Order Notes</h4>
                <p class="text-gray-600">{{ $order->notes }}</p>
            </div>
        @endif
    </div>

    <div class="space-y-6">
        <div class="royal-card p-6">
            <h4 class="font-semibold mb-4">Order Info</h4>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Status:</span>
                    <span class="px-2 py-1 rounded-full text-xs font-semibold
                        @if($order->status === 'pending') bg-yellow-100 text-yellow-800
                        @elseif($order->status === 'confirmed') bg-green-100 text-green-800
                        @elseif($order->status === 'processing') bg-blue-100 text-blue-800
                        @elseif($order->status === 'shipped') bg-purple-100 text-purple-800
                        @elseif($order->status === 'delivered') bg-emerald-100 text-emerald-800
                        @else bg-red-100 text-red-800 @endif">{{ ucfirst($order->status) }}</span>
                </div>
                <div class="flex justify-between"><span class="text-gray-500">Payment:</span><span class="capitalize">{{ $order->payment_status }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Date:</span><span>{{ $order->created_at->format('M d, Y') }}</span></div>
            </div>
        </div>

        <div class="royal-card p-6">
            <h4 class="font-semibold mb-4">Customer</h4>
            <p class="font-semibold">{{ $order->customer->name }}</p>
            <p class="text-sm text-gray-500">{{ $order->customer->email }}</p>
            <div class="flex items-center justify-between mt-2">
                <p class="text-sm text-gray-500">{{ $order->customer->phone ?: 'N/A' }}</p>
                @if($order->customer->phone)
                    <a href="tel:{{ $order->customer->phone }}" class="flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm hover:bg-blue-100 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        Call
                    </a>
                @endif
            </div>
        </div>

        <div class="royal-card p-6">
            <h4 class="font-semibold mb-4">Shipping Address</h4>
            @php
                $addr = is_array($order->shipping_address) ? $order->shipping_address : json_decode($order->shipping_address, true);
            @endphp
            @if($addr)
                <p class="text-sm">{{ $addr['first_name'] }} {{ $addr['last_name'] }}</p>
                <p class="text-sm">{{ $addr['address_line1'] }}</p>
                @if(!empty($addr['address_line2']))
                    <p class="text-sm">{{ $addr['address_line2'] }}</p>
                @endif
                <p class="text-sm">{{ $addr['city'] }}, {{ $addr['state'] }} {{ $addr['postal_code'] }}</p>
                <p class="text-sm">{{ $addr['country'] }}</p>
                @if(!empty($addr['phone']))
                    <p class="text-sm">Phone: {{ $addr['phone'] }}</p>
                @endif
            @else
                <p class="text-sm text-gray-500">No shipping address available</p>
            @endif
        </div>

        <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="royal-card p-6">
            @csrf
            @method('PATCH')
            <h4 class="font-semibold mb-4">Update Status</h4>
            <select name="status" class="w-full px-4 py-2 border rounded-lg mb-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
                <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="confirmed" {{ $order->status === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>Processing</option>
                <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped</option>
                <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                <option value="refunded" {{ $order->status === 'refunded' ? 'selected' : '' }}>Refunded</option>
            </select>
            <button type="submit" class="royal-btn w-full">Update Status</button>
        </form>

        @if($order->status === 'pending' && $order->payment_status === 'pending')
            <div class="royal-card p-6 space-y-3">
                <h4 class="font-semibold">Order Actions</h4>
                <div class="flex gap-3">
                    @if($order->shipping_address['phone'] ?? $order->customer?->phone)
                        <a href="tel:{{ $order->shipping_address['phone'] ?? $order->customer?->phone }}" class="flex-1 py-3 bg-blue-50 text-blue-700 text-center rounded-lg font-medium hover:bg-blue-100 transition flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                            Call Customer
                        </a>
                    @endif
                    <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex-1">
                        @csrf @method('PATCH')
                        <input type="hidden" name="status" value="confirmed">
                        <button type="submit" class="w-full py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Accept Order
                        </button>
                    </form>
                </div>
            </div>
        @endif

        @if($order->status === 'confirmed' && $order->payment_status === 'pending')
            <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="royal-card p-6">
                @csrf @method('PATCH')
                <input type="hidden" name="status" value="processing">
                <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    Process Order → POS Payment
                </button>
            </form>
        @endif

        @if($order->status === 'processing' && $order->payment_status === 'pending')
            <a href="{{ route('admin.pos.process', $order) }}" class="royal-card p-6 block hover:bg-gray-50 transition border-2 border-emerald-200">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <div>
                        <h4 class="font-semibold text-emerald-700">Process Payment in POS</h4>
                        <p class="text-sm text-gray-500">Complete payment for this order</p>
                    </div>
                    <svg class="w-5 h-5 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </div>
            </a>
        @endif
    </div>
</div>
@endsection