@extends('layouts.user')

@section('page-title', __('My Orders'))

@section('content')
<div class="mb-6 flex items-center justify-between">
    <h2 class="text-xl font-bold">{{ __('Order History') }}</h2>
    <a href="{{ route('user.orders.create') }}" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('New Order') }}</a>
</div>

<form method="GET" class="mb-4">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('Search by code or link...') }}"
           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
</form>

<div class="bg-white rounded-xl border border-gray-200 overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Order') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Service') }}</th>
                <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Qty') }}</th>
                <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Charge') }}</th>
                <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Status') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Date') }}</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($orders as $order)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 font-mono text-xs">{{ $order->code }}</td>
                    <td class="px-4 py-3"><span class="line-clamp-1 max-w-[200px]">{{ $order->service->name }}</span></td>
                    <td class="px-4 py-3 text-right">{{ number_format($order->quantity) }}</td>
                    <td class="px-4 py-3 text-right font-semibold">{{ currency($order->charge) }}</td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-2 py-1 text-xs font-medium rounded-full
                            {{ $order->status === 'completed' ? 'bg-green-100 text-green-700' : '' }}
                            {{ in_array($order->status, ['pending','processing']) ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ $order->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : '' }}
                            {{ in_array($order->status, ['cancelled','failed','refunded']) ? 'bg-red-100 text-red-700' : '' }}
                            {{ $order->status === 'partial' ? 'bg-orange-100 text-orange-700' : '' }}">
                            {{ ucfirst(str_replace('_', ' ', $order->status)) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-500 whitespace-nowrap">{{ $order->created_at->format('M d, Y') }}</td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ route('user.orders.show', $order) }}" class="text-indigo-600 font-medium hover:underline">{{ __('View') }}</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-12 text-center text-gray-500">{{ __('No orders found') }}</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $orders->links() }}</div>
@endsection