@extends('admin::layouts.master')

@section('title', "Order #{$order->order_number}")

@section('content')
    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold">Order #{{ $order->order_number }}</h1>
            <p class="text-gray-500 text-sm">{{ $order->created_at->format('d M Y H:i') }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('admin.orders.edit', $order->id) }}" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 text-sm">Full Edit</a>
            <a href="{{ route('admin.orders.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 text-sm">Back</a>
        </div>
    </div>

    @php
        $statusFlow = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
        $currentIdx = array_search($order->status, $statusFlow);
        $isCancelled = $order->status === 'cancelled';
    @endphp

    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex items-center justify-between mb-2">
            <h3 class="font-bold text-lg">Order Progress</h3>
            @if($isCancelled)
                <span class="px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">Cancelled</span>
            @elseif($currentIdx === count($statusFlow) - 1)
                <span class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Delivered</span>
            @endif
        </div>
        @if(!$isCancelled)
            <div class="flex items-center justify-between mt-4">
                @foreach($statusFlow as $i => $st)
                    <div class="flex flex-col items-center flex-1 relative">
                        @if($i > 0)
                            <div class="absolute top-4 left-0 w-full h-0.5 -translate-y-1/2 {{ $i <= $currentIdx ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                        @endif
                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold z-10 {{ $i < $currentIdx ? 'bg-green-500 text-white' : ($i === $currentIdx ? 'bg-blue-600 text-white ring-4 ring-blue-100' : 'bg-gray-200 text-gray-500') }}">
                            {{ $i < $currentIdx ? '✓' : ($i + 1) }}
                        </div>
                        <span class="text-xs mt-1 {{ $i <= $currentIdx ? 'font-semibold text-gray-800' : 'text-gray-400' }}">{{ ucfirst($st) }}</span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-lg mb-4">Order Items</h3>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Unit</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Price</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Qty</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y">
                            @foreach($order->orderItems as $item)
                                <tr>
                                    <td class="px-4 py-3">
                                        <p class="font-medium">{{ $item->product_name }}</p>
                                        @if($item->product_id)
                                            <p class="text-xs text-gray-500">ID: {{ $item->product_id }}</p>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-sm">{{ $item->unit ?? '-' }}</td>
                                    <td class="px-4 py-3 text-right">&euro;{{ number_format($item->price, 2) }}</td>
                                    <td class="px-4 py-3 text-right">{{ $item->quantity }}</td>
                                    <td class="px-4 py-3 text-right font-medium">&euro;{{ number_format($item->subtotal, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-lg mb-4">Notes</h3>
                <p class="text-gray-700">{{ $order->notes ?? 'No notes.' }}</p>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-lg mb-4">Financial Summary</h3>
                <div class="space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Subtotal</span>
                        <span>&euro;{{ number_format($order->subtotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Delivery Fee</span>
                        <span>&euro;{{ number_format($order->delivery_fee, 2) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Service Fee</span>
                        <span>&euro;{{ number_format($order->service_fee, 2) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">VAT</span>
                        <span>&euro;{{ number_format($order->vat_amount, 2) }}</span>
                    </div>
                    <hr>
                    <div class="flex justify-between font-bold text-lg">
                        <span>Total</span>
                        <span>&euro;{{ number_format($order->total, 2) }}</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-lg mb-4">Order Info</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Session</span>
                        <span class="text-xs font-mono">{{ $order->session_id }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Status</span>
                        @php
                            $sc = ['pending' => 'yellow', 'confirmed' => 'blue', 'processing' => 'indigo', 'shipped' => 'purple', 'delivered' => 'green', 'cancelled' => 'red'];
                            $c = $sc[$order->status] ?? 'gray';
                        @endphp
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $c }}-100 text-{{ $c }}-800">{{ ucfirst($order->status) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Payment</span>
                        @php
                            $pc = ['paid' => 'green', 'pending' => 'yellow', 'failed' => 'red', 'refunded' => 'gray'];
                            $p = $pc[$order->payment_status] ?? 'gray';
                        @endphp
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $p }}-100 text-{{ $p }}-800">{{ ucfirst($order->payment_status) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Payment Method</span>
                        <span>{{ $order->payment_method ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Created</span>
                        <span>{{ $order->created_at->format('d M Y H:i') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Updated</span>
                        <span>{{ $order->updated_at->format('d M Y H:i') }}</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="font-bold text-lg mb-4">Quick Update</h3>
                <form method="POST" action="{{ route('admin.orders.update', $order->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                            <select name="status" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @foreach($statuses as $st)
                                    <option value="{{ $st }}" {{ $order->status === $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Payment</label>
                            <select name="payment_status" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @foreach($paymentStatuses as $ps)
                                    <option value="{{ $ps }}" {{ $order->payment_status === $ps ? 'selected' : '' }}>{{ ucfirst($ps) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Notes</label>
                            <textarea name="notes" rows="2" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ $order->notes }}</textarea>
                        </div>
                        <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded text-sm hover:bg-blue-700">Update Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection