@extends('layouts.shop')
@section('title', 'Bestellung ' . $order->order_number)
@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 space-y-5">

        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Bestellnummer</p>
                <h2 class="text-lg font-mono font-bold">{{ $order->order_number }}</h2>
            </div>
            <span class="px-3 py-1 rounded-full text-sm font-medium
                {{ 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>
        </div>

        {{-- Artikel --}}
        <div class="bg-white border rounded-lg overflow-hidden">
            <div class="px-4 py-3 bg-gray-50 border-b text-sm font-semibold">Bestellte Artikel</div>
            <table class="w-full text-sm">
                <tbody class="divide-y">
                    @foreach($order->items as $item)
                    <tr>
                        <td class="px-4 py-3">
                            <p class="font-medium">{{ $item->product_name }}</p>
                            @if($item->variant_label)
                                <p class="text-gray-400 text-xs">{{ $item->variant_label }}</p>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-center">{{ $item->qty }}×</td>
                        <td class="px-4 py-3 text-right font-medium">{{ number_format($item->price * $item->qty, 2, ',', '.') }} €</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="border-t bg-gray-50 text-sm">
                    <tr>
                        <td colspan="2" class="px-4 py-2 text-gray-500">Versand</td>
                        <td class="px-4 py-2 text-right">{{ number_format($order->shipping_cost, 2, ',', '.') }} €</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="px-4 py-2 font-bold">Gesamt</td>
                        <td class="px-4 py-2 text-right font-bold text-lg">{{ number_format($order->total, 2, ',', '.') }} €</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        {{-- Tracking --}}
        @if($order->tracking_code)
        <div class="bg-indigo-50 border border-indigo-200 rounded-lg px-4 py-3 text-sm">
            <p class="font-semibold text-indigo-800">Sendungsverfolgung</p>
            <p class="text-indigo-700 font-mono mt-1">{{ $order->tracking_code }}</p>
        </div>
        @endif

        {{-- Zahlungshinweis Vorkasse --}}
        @if($order->payment_method === 'vorkasse' && in_array($order->status, ['new']))
        <div class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-4 text-sm">
            <p class="font-semibold text-amber-800 mb-2">Bitte überweisen Sie den Betrag auf folgendes Konto:</p>
            <dl class="grid grid-cols-2 gap-1 text-amber-700">
                <dt class="font-medium">Empfänger:</dt><dd>{{ \App\Models\Setting::get('shop_owner') }}</dd>
                <dt class="font-medium">IBAN:</dt><dd class="font-mono">{{ \App\Models\Setting::get('bank_iban') }}</dd>
                <dt class="font-medium">BIC:</dt><dd class="font-mono">{{ \App\Models\Setting::get('bank_bic') }}</dd>
                <dt class="font-medium">Bank:</dt><dd>{{ \App\Models\Setting::get('bank_name') }}</dd>
                <dt class="font-medium">Verwendungszweck:</dt><dd class="font-mono">{{ $order->order_number }}</dd>
                <dt class="font-medium">Betrag:</dt><dd class="font-semibold">{{ number_format($order->total, 2, ',', '.') }} €</dd>
            </dl>
        </div>
        @endif

        {{-- Adressen --}}
        <div class="grid grid-cols-2 gap-4 text-sm">
            @php
                $billing  = $order->addresses->firstWhere('type', 'billing');
                $shipping = $order->addresses->firstWhere('type', 'shipping');
            @endphp
            @if($billing)
            <div class="bg-white border rounded-lg p-4">
                <p class="text-xs text-gray-400 font-semibold uppercase mb-2">Rechnungsadresse</p>
                <p class="font-medium">{{ $billing->first_name }} {{ $billing->last_name }}</p>
                @if($billing->company)<p class="text-gray-500">{{ $billing->company }}</p>@endif
                <p class="text-gray-700">{{ $billing->street }}</p>
                <p class="text-gray-700">{{ $billing->zip }} {{ $billing->city }}</p>
            </div>
            @endif
            @if($shipping)
            <div class="bg-white border rounded-lg p-4">
                <p class="text-xs text-gray-400 font-semibold uppercase mb-2">Lieferadresse</p>
                <p class="font-medium">{{ $shipping->first_name }} {{ $shipping->last_name }}</p>
                @if($shipping->company)<p class="text-gray-500">{{ $shipping->company }}</p>@endif
                <p class="text-gray-700">{{ $shipping->street }}</p>
                <p class="text-gray-700">{{ $shipping->zip }} {{ $shipping->city }}</p>
            </div>
            @endif
        </div>

        <a href="{{ route('account.orders') }}" class="inline-block text-sm text-gray-500 hover:text-blue-600">← Alle Bestellungen</a>
    </div>
</div>
@endsection