@extends('layouts.shop')
@section('title', 'Kontoeinstellungen')
@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 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 bg-blue-50 text-blue-700 font-semibold">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">
        <div class="bg-white border rounded-lg p-6">
            <h2 class="font-semibold mb-4">Persönliche Daten</h2>
            <form method="POST" action="{{ route('account.settings.update') }}" class="space-y-4">
                @csrf @method('PUT')
                <div>
                    <label class="block text-sm font-medium mb-1">Name *</label>
                    <input type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">E-Mail-Adresse *</label>
                    <input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <hr>
                <p class="text-sm text-gray-500">Passwort ändern — leer lassen, wenn Sie es nicht ändern möchten.</p>
                <div>
                    <label class="block text-sm font-medium mb-1">Neues Passwort</label>
                    <input type="password" name="password" autocomplete="new-password"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Passwort bestätigen</label>
                    <input type="password" name="password_confirmation" autocomplete="new-password"
                           class="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                @if($errors->any())
                <div class="bg-red-50 border border-red-200 rounded p-3 text-sm text-red-700">
                    @foreach($errors->all() as $e)<p>• {{ $e }}</p>@endforeach
                </div>
                @endif
                <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded hover:bg-blue-700 text-sm">
                    Speichern
                </button>
            </form>
        </div>
    </div>
</div>
@endsection