@extends('layouts.admin')
@section('title', __('app.orders'))

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-brand-900">{{ __('app.orders') }}</h1>
        <p class="text-sm text-brand-400 mt-0.5">{{ __('app.total') }}: {{ $orders->total() }}</p>
    </div>
</div>

<form method="GET" class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-5 mb-6 flex flex-wrap gap-3 items-end">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('app.search') }}" class="input-luxury !w-48 text-sm">
    <select name="status" class="input-luxury !w-48 text-sm">
        <option value="">{{ __('app.order_status') }}</option>
        @foreach(['pending','confirmed','shipped','delivered','cancelled'] as $s)
            <option value="{{ $s }}" @selected(request('status') == $s)>{{ __('app.' . $s) }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn-primary !py-2.5 !px-5 text-sm">{{ __('app.filter') }}</button>
</form>

<div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 overflow-hidden">
    <div class="overflow-x-auto">
        <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.order_number') }}</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.customer') }}</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.phone') }}</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>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.order_status') }}</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.order_date') }}</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.actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-100/50">
                @foreach($orders as $order)
                <tr class="hover:bg-cream-50/50 transition-colors">
                    <td class="px-5 py-4 font-mono text-xs font-bold text-brand-600">{{ $order->order_number }}</td>
                    <td class="px-5 py-4 font-bold text-brand-800">{{ $order->customer_name }}</td>
                    <td class="px-5 py-4 text-brand-500">{{ $order->customer_phone }}</td>
                    <td class="px-5 py-4 font-bold text-brand-800 tabular-nums">{{ number_format($order->total, 2) }} {{ __('app.jod') }}</td>
                    <td class="px-5 py-4">
                        @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>
                    </td>
                    <td class="px-5 py-4 text-brand-400">{{ $order->created_at->format('Y-m-d') }}</td>
                    <td class="px-5 py-4">
                        <a href="{{ route('admin.orders.show', $order) }}" class="text-brand-500 hover:text-brand-700 font-semibold transition-colors text-xs">{{ __('app.order_details') }}</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="p-5 border-t border-brand-100/50">{{ $orders->links() }}</div>
</div>
@endsection