@extends('layouts.admin')

@section('title', 'Bestellingen | Jouwdriedee Beheer')

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="flex items-center justify-between pb-6 border-b border-slate-200/80">
        <div>
            <div class="inline-flex items-center space-x-1.5 text-xs text-slate-500 font-medium mb-1">
                <i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
                <span>Verkopen & Orders</span>
            </div>
            <h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestellingen ({{ $orders->total() }})</h1>
            <p class="text-xs text-slate-500 mt-1">Overzicht van binnengekomen bestellingen, orderstatussen en verzending.</p>
        </div>
    </div>

    <!-- Orders Table -->
    <div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-700">
                <thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-semibold border-b border-slate-200/70">
                    <tr>
                        <th class="py-3 px-4">Order #</th>
                        <th class="py-3 px-4">Datum</th>
                        <th class="py-3 px-4">Klant</th>
                        <th class="py-3 px-4">Items</th>
                        <th class="py-3 px-4">Totaal</th>
                        <th class="py-3 px-4">Status</th>
                        <th class="py-3 px-4 text-right">Details</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium">
                    @forelse($orders as $order)
                        <tr class="hover:bg-slate-50/60 transition">
                            <td class="py-3.5 px-4 font-mono font-bold text-slate-900">
                                {{ $order->order_number }}
                            </td>
                            <td class="py-3.5 px-4 text-slate-500">
                                {{ $order->created_at->format('d-m-Y H:i') }}
                            </td>
                            <td class="py-3.5 px-4">
                                <div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
                                <div class="text-[11px] text-slate-400 font-normal">{{ $order->customer_email }}</div>
                            </td>
                            <td class="py-3.5 px-4">
                                <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-[11px] font-medium">
                                    {{ $order->items->count() }} items
                                </span>
                            </td>
                            <td class="py-3.5 px-4">
                                <span class="font-bold text-slate-900">{{ $order->formatted_total }}</span>
                            </td>
                            <td class="py-3.5 px-4">
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
                                    @if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-50 text-emerald-700 border border-emerald-200/60
                                    @elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-50 text-sky-700 border border-sky-200/60
                                    @elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
                                    @else bg-amber-50 text-amber-700 border border-amber-200/60
                                    @endif">
                                    {{ $order->status_label }}
                                </span>
                            </td>
                            <td class="py-3.5 px-4 text-right">
                                <a href="{{ route('admin.orders.show', $order) }}" class="inline-flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-900 text-slate-700 hover:text-white text-xs font-medium transition">
                                    <span>Bekijken</span>
                                    <i data-lucide="chevron-right" class="w-3 h-3"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-12 text-center text-slate-400">
                                Nog geen bestellingen geplaatst.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($orders->hasPages())
            <div class="p-4 border-t border-slate-100">
                {{ $orders->links() }}
            </div>
        @endif
    </div>

</div>
@endsection