@extends('admin.layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">تفاصيل الطلب: {{ $order->order_number }}</h2>
        <a href="{{ route('admin.orders.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded shadow hover:bg-gray-600 transition">
            <i class="fas fa-arrow-right"></i> عودة للقائمة
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Customer Info -->
        <div class="md:col-span-2 space-y-6">
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="font-bold text-lg mb-4 border-b pb-2">بيانات العميل</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-gray-500 text-sm block">الاسم:</span>
                        <strong>{{ $order->customer_name }}</strong>
                    </div>
                    <div>
                        <span class="text-gray-500 text-sm block">رقم الهاتف:</span>
                        <strong>{{ $order->customer_phone }}</strong>
                    </div>
                    <div class="col-span-2">
                        <span class="text-gray-500 text-sm block">البريد الإلكتروني:</span>
                        <strong>{{ $order->customer_email ?: 'غير متوفر' }}</strong>
                    </div>
                    <div class="col-span-2">
                        <span class="text-gray-500 text-sm block">ملاحظات:</span>
                        <p class="bg-gray-50 p-3 rounded border italic">{{ $order->notes ?: 'لا توجد ملاحظات' }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="font-bold text-lg mb-4 border-b pb-2">المنتجات المطلوبة (مرتبة حسب المورد)</h3>
                
                @php
                    $groupedItems = $order->items->groupBy(function($item) {
                        return $item->product && $item->product->user ? $item->product->user->name : 'المخزن الرئيسي';
                    });
                @endphp

                @foreach($groupedItems as $merchantName => $items)
                    <div class="mb-6 last:mb-0">
                        <h4 class="bg-gray-100 p-2 font-bold text-blue-700 rounded mb-2 border-r-4 border-blue-500">مورد: {{ $merchantName }}</h4>
                        <table class="w-full text-right border-collapse mb-2">
                            <thead>
                                <tr class="bg-gray-50 text-xs text-gray-400">
                                    <th class="p-2 border">المنتج</th>
                                    <th class="p-2 border">الكمية</th>
                                    <th class="p-2 border">السعر</th>
                                    <th class="p-2 border">الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $item)
                                <tr>
                                    <td class="p-2 border text-sm">{{ $item->product ? $item->product->name : 'منتج محذوف' }}</td>
                                    <td class="p-2 border text-sm">{{ $item->quantity }}</td>
                                    <td class="p-2 border text-sm">{{ number_format($item->price, 2) }} ج.م</td>
                                    <td class="p-2 border text-sm font-bold">{{ number_format($item->price * $item->quantity, 2) }} ج.م</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
                
                <div class="mt-4 p-3 bg-blue-50 rounded border border-blue-200 flex justify-between items-center font-bold">
                    <span class="text-blue-800">إجمالي قيمة الطلب:</span>
                    <span class="text-xl text-blue-600">{{ number_format($order->total_amount, 2) }} ج.م</span>
                </div>
            </div>
        </div>

        <!-- Order Actions -->
        <div class="space-y-6">
            <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-blue-500">
                <h3 class="font-bold text-lg mb-4">حالة الطلب</h3>
                <form action="{{ route('admin.orders.update_status', $order->id) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <select name="status" class="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none">
                            <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>قيد الانتظار</option>
                            <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>جاري التنفيذ</option>
                            <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>مكتمل</option>
                            <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>ملغي</option>
                        </select>
                    </div>
                    <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition font-bold shadow-md">
                        تحديث الحالة
                    </button>
                </form>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg border border-dashed border-gray-300">
                <div class="text-sm text-gray-500 mb-1">تاريخ الإنشاء:</div>
                <div class="font-bold">{{ $order->created_at->format('Y/m/d H:i') }}</div>
                <div class="text-sm text-gray-500 mt-3 mb-1">المستخدم المسجل:</div>
                <div class="font-bold">{{ $order->user ? $order->user->name : 'زائر' }}</div>
            </div>
        </div>
    </div>
</div>
@endsection