@extends('layouts.admin')
@section('title', __('app.order_details') . ' - ' . $order->order_number)

@section('content')
<div class="max-w-4xl">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-brand-900 font-mono">{{ $order->order_number }}</h1>
            <p class="text-sm text-brand-400 mt-0.5">{{ $order->created_at->format('Y-m-d H:i') }}</p>
        </div>
        <a href="{{ route('admin.orders.index') }}" class="text-brand-400 hover:text-brand-600 font-medium transition-colors text-sm flex items-center gap-1">
            <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="M15 19l-7-7 7-7"/></svg>
            {{ __('app.back') }}
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6">
            <h3 class="font-bold text-brand-800 mb-4 flex items-center gap-2">
                <div class="w-8 h-8 bg-brand-50 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                </div>
                {{ __('app.order_details') }}
            </h3>
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.order_number') }}</dt><dd class="font-mono font-bold text-brand-700">{{ $order->order_number }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.order_date') }}</dt><dd class="text-brand-700">{{ $order->created_at->format('Y-m-d H:i') }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50">
                    <dt class="text-brand-400">{{ __('app.order_status') }}</dt>
                    <dd>
                        @php $sc = ['pending'=>'bg-amber-100 text-amber-700','confirmed'=>'bg-blue-100 text-blue-700','shipped'=>'bg-indigo-100 text-indigo-700','delivered'=>'bg-emerald-100 text-emerald-700','cancelled'=>'bg-red-100 text-red-700'][$order->status] ?? 'bg-gray-100 text-gray-700'; @endphp
                        <span class="badge-status {{ $sc }}">{{ __('app.' . $order->status) }}</span>
                    </dd>
                </div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.payment_method') }}</dt><dd class="text-brand-700">{{ __('app.cod') }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.payment_status') }}</dt><dd class="text-brand-700">{{ __('app.' . $order->payment_status) }}</dd></div>
                <div class="flex justify-between py-2"><dt class="text-brand-400">{{ __('app.total') }}</dt><dd class="font-extrabold text-brand-700 text-lg">{{ number_format($order->total, 2) }} {{ __('app.jod') }}</dd></div>
            </dl>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6">
            <h3 class="font-bold text-brand-800 mb-4 flex items-center gap-2">
                <div class="w-8 h-8 bg-brand-50 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                </div>
                {{ __('app.customer_info') }}
            </h3>
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.customer_name') }}</dt><dd class="font-bold text-brand-700">{{ $order->customer_name }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.phone') }}</dt><dd class="text-brand-700">{{ $order->customer_phone }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.customer_email') }}</dt><dd class="text-brand-700">{{ $order->customer_email ?? '—' }}</dd></div>
                <div class="flex justify-between py-2 border-b border-brand-50"><dt class="text-brand-400">{{ __('app.city') }}</dt><dd class="text-brand-700">{{ $order->city ?? '—' }}</dd></div>
                <div class="py-2"><dt class="text-brand-400 mb-1">{{ __('app.address') }}</dt><dd class="text-brand-700 bg-cream-50 rounded-lg p-3">{{ $order->shipping_address }}</dd></div>
                @if($order->notes)
                    <div class="py-2"><dt class="text-brand-400 mb-1">{{ __('app.notes') }}</dt><dd class="text-brand-700 bg-cream-50 rounded-lg p-3">{{ $order->notes }}</dd></div>
                @endif
            </dl>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 mb-6">
        <h3 class="font-bold text-brand-800 mb-4 flex items-center gap-2">
            <div class="w-8 h-8 bg-gold-50 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-gold-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            </div>
            {{ __('app.update_status') }}
        </h3>
        <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex items-center gap-3">
            @csrf @method('PATCH')
            <select name="status" class="input-luxury !w-48 text-sm">
                @foreach(['pending','confirmed','shipped','delivered','cancelled'] as $s)
                    <option value="{{ $s }}" @selected($order->status === $s)>{{ __('app.' . $s) }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn-primary !py-2.5 !px-5 text-sm">{{ __('app.save') }}</button>
        </form>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 overflow-hidden">
        <div class="px-6 py-5 border-b border-brand-100/50">
            <h3 class="font-bold text-brand-800 flex items-center gap-2">
                <svg class="w-5 h-5 text-brand-400" 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 4v10M4 7v10l8 4"/></svg>
                {{ __('app.products') }}
            </h3>
        </div>
        <table class="w-full text-sm">
            <thead class="bg-cream-50">
                <tr>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.product') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.sku') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.unit_price') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.quantity') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.total') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-100/50">
                @foreach($order->items as $item)
                <tr class="hover:bg-cream-50/50 transition-colors">
                    <td class="px-5 py-4 font-bold text-brand-800">{{ $item->product_name }}</td>
                    <td class="px-5 py-4 font-mono text-xs text-brand-400">{{ $item->product_sku }}</td>
                    <td class="px-5 py-4 text-brand-600 tabular-nums">{{ number_format($item->unit_price, 2) }} {{ __('app.jod') }}</td>
                    <td class="px-5 py-4 text-brand-600">{{ $item->quantity }}</td>
                    <td class="px-5 py-4 font-bold text-brand-800 tabular-nums">{{ number_format($item->total, 2) }} {{ __('app.jod') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-cream-50">
                <tr>
                    <td colspan="4" class="px-5 py-4 font-extrabold text-brand-800 text-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}">{{ __('app.total') }}</td>
                    <td class="px-5 py-4 font-extrabold text-brand-700 text-lg tabular-nums">{{ number_format($order->total, 2) }} {{ __('app.jod') }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endsection