@extends('layouts.dashboard')

@section('page_title', 'My Service Orders')

@section('dashboard_content')
<div class="glass-panel rounded-3xl overflow-hidden">
    <table class="w-full text-left">
        <thead>
            <tr class="border-bottom border-white/5 bg-white/5">
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Order #</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Service</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Status</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Total</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40">Date</th>
                <th class="px-8 py-5 text-xs font-black uppercase tracking-[0.2em] text-white/40 text-right">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
            @forelse($orders ?? [] as $order)
                <tr class="group hover:bg-white/[0.02] transition-colors">
                    <td class="px-8 py-6 font-bold text-white">#{{ $order->order_number }}</td>
                    <td class="px-8 py-6">
                        <div class="text-white font-medium">{{ $order->service->name ?? 'Compliance Service' }}</div>
                        <div class="text-[10px] text-white/20 uppercase tracking-widest mt-0.5">{{ $order->package->name ?? 'Custom' }}</div>
                    </td>
                    <td class="px-8 py-6">
                        <span class="badge {{ $order->status === 'completed' ? 'badge-success' : 'badge-pending' }}">
                            {{ $order->status }}
                        </span>
                    </td>
                    <td class="px-8 py-6 text-white font-medium">{{ number_format($order->total_amount) }} {{ $order->currency }}</td>
                    <td class="px-8 py-6 text-white/40 text-sm">{{ $order->created_at->format('M d, Y') }}</td>
                    <td class="px-8 py-6 text-right">
                        <a href="{{ route('user.orders.show', $order) }}" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-emerald hover:underline">
                            Details
                            <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.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="px-8 py-20 text-center text-white/20 italic">You haven't placed any orders yet.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if($orders->hasPages())
    <div class="mt-8">
        {{ $orders->links() }}
    </div>
@endif
@endsection