@extends('layouts.storefront')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-10">
    <h1 class="text-2xl font-bold text-primary mb-6">تفاصيل الطلب</h1>

    <div class="bg-base-100 p-6 rounded-xl shadow mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <p class="text-sm text-gray-500">رقم الطلب:</p>
                <p class="font-semibold">#{{ $order->id }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">تاريخ الطلب:</p>
                <p class="font-semibold">{{ $order->created_at->format('Y-m-d H:i') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">الحالة:</p>
                <p class="font-semibold">{{ __($order->status) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">الإجمالي:</p>
                <p class="font-semibold">{{ $order->total }} ﷼</p>
            </div>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-xl shadow overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">المنتج</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">الكمية</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">السعر</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">المجموع</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach ($order->items as $item)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $item->product->name ?? 'منتج محذوف' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $item->quantity }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $item->price }} ﷼</td>
                        <td class="px-6 py-4 whitespace-nowrap">{{ $item->price * $item->quantity }} ﷼</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection