@extends('layouts.shop')
@section('title', 'Meine Bestellungen')
@section('content')
<h1 class="text-2xl font-bold mb-6">Mein Konto</h1>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">

    {{-- Sidebar --}}
    <div class="space-y-1 text-sm">
        <a href="{{ route('account.index') }}" class="block px-3 py-2 rounded hover:bg-gray-50">Übersicht</a>
        <a href="{{ route('account.orders') }}" class="block px-3 py-2 rounded bg-blue-50 text-blue-700 font-semibold">Bestellungen</a>
        <a href="{{ route('account.addresses') }}" class="block px-3 py-2 rounded hover:bg-gray-50">Adressen</a>
        <a href="{{ route('account.settings') }}" class="block px-3 py-2 rounded hover:bg-gray-50">Einstellungen</a>
        <form method="POST" action="{{ route('logout') }}">@csrf
            <button class="w-full text-left px-3 py-2 rounded text-red-600 hover:bg-red-50">Abmelden</button>
        </form>
    </div>

    {{-- Content --}}
    <div class="md:col-span-3">
        @if($orders->count())
        <div class="bg-white border rounded-lg overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b text-left">
                    <tr>
                        <th class="px-4 py-3">Bestellnr.</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Zahlungsart</th>
                        <th class="px-4 py-3 text-right">Betrag</th>
                        <th class="px-4 py-3">Datum</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @foreach($orders as $order)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-mono font-medium">{{ $order->order_number }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 rounded text-xs
                                {{ match($order->status) {
                                    'new'              => 'bg-yellow-100 text-yellow-700',
                                    'payment_received' => 'bg-blue-100 text-blue-700',
                                    'processing'       => 'bg-purple-100 text-purple-700',
                                    'shipped'          => 'bg-indigo-100 text-indigo-700',
                                    'completed'        => 'bg-green-100 text-green-700',
                                    'cancelled'        => 'bg-red-100 text-red-700',
                                    default            => 'bg-gray-100 text-gray-600',
                                } }}">
                                {{ $order->status_label }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-500">{{ $order->payment_label }}</td>
                        <td class="px-4 py-3 text-right font-medium">{{ number_format($order->total, 2, ',', '.') }} €</td>
                        <td class="px-4 py-3 text-gray-400">{{ $order->created_at->format('d.m.Y') }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('account.order', $order) }}" class="text-blue-600 hover:underline text-xs">Details</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="px-4 py-3 border-t">{{ $orders->links() }}</div>
        </div>
        @else
        <div class="bg-white border rounded-lg p-10 text-center text-gray-400 text-sm">
            Sie haben noch keine Bestellungen aufgegeben.
        </div>
        @endif
    </div>
</div>
@endsection