@extends('layouts.shop')
@section('title', 'Mein Konto')
@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">
    <div class="space-y-1 text-sm">
        <a href="{{ route('account.index') }}" class="block px-3 py-2 rounded {{ request()->routeIs('account.index') ? 'bg-blue-50 text-blue-700 font-semibold' : 'hover:bg-gray-50' }}">Übersicht</a>
        <a href="{{ route('account.orders') }}" class="block px-3 py-2 rounded hover:bg-gray-50">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>
    <div class="md:col-span-3">
        <div class="bg-white border rounded-lg p-6 mb-6">
            <p class="text-gray-600">Hallo, <strong>{{ auth()->user()->name }}</strong>!</p>
        </div>
        @if($orders->count())
        <h2 class="font-semibold mb-3">Letzte Bestellungen</h2>
        <div class="bg-white border rounded-lg overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50"><tr><th class="px-4 py-2 text-left">Bestellnr.</th><th class="px-4 py-2 text-left">Status</th><th class="px-4 py-2 text-right">Betrag</th><th class="px-4 py-2"></th></tr></thead>
                <tbody class="divide-y">
                    @foreach($orders as $o)
                    <tr>
                        <td class="px-4 py-2 font-mono">{{ $o->order_number }}</td>
                        <td class="px-4 py-2">{{ $o->status_label }}</td>
                        <td class="px-4 py-2 text-right">{{ number_format($o->total, 2, ',', '.') }} €</td>
                        <td class="px-4 py-2"><a href="{{ route('account.order', $o) }}" class="text-blue-600 text-xs hover:underline">Details</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>
@endsection