@extends('layouts.admin')
@section('title', 'Attribute')
@section('content')
<div class="grid grid-cols-2 gap-6">
    {{-- Neues Attribut --}}
    <div class="bg-white rounded shadow p-6">
        <h3 class="font-semibold mb-4">Neues Attribut</h3>
        <form method="POST" action="{{ route('admin.attributes.store') }}" class="flex gap-2">
            @csrf
            <input type="text" name="name" placeholder="z.B. Größe, Farbe" class="flex-1 border rounded px-3 py-2 text-sm" required>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">Erstellen</button>
        </form>
    </div>
</div>

<div class="mt-6 grid grid-cols-2 gap-6">
    @foreach($attributes as $attr)
    <div class="bg-white rounded shadow p-5">
        <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold">{{ $attr->name }}</h3>
            <form method="POST" action="{{ route('admin.attributes.destroy', $attr) }}" onsubmit="return confirm('Attribut und alle Werte löschen?')">
                @csrf @method('DELETE')
                <button class="text-red-500 text-sm hover:underline">Löschen</button>
            </form>
        </div>

        <div class="space-y-1 mb-4">
            @foreach($attr->values as $val)
            <div class="flex justify-between items-center text-sm py-1 border-b">
                <span>{{ $val->value }}</span>
                <form method="POST" action="{{ route('admin.attribute-values.destroy', $val) }}">
                    @csrf @method('DELETE')
                    <button class="text-red-400 hover:text-red-600 text-xs">✕</button>
                </form>
            </div>
            @endforeach
            @if($attr->values->isEmpty())
                <p class="text-xs text-gray-400">Keine Werte.</p>
            @endif
        </div>

        <form method="POST" action="{{ route('admin.attributes.values.store', $attr) }}" class="flex gap-2">
            @csrf
            <input type="text" name="value" placeholder="Neuer Wert" class="flex-1 border rounded px-2 py-1.5 text-sm" required>
            <button class="bg-gray-100 px-3 py-1.5 rounded text-sm hover:bg-gray-200">+ Hinzufügen</button>
        </form>
    </div>
    @endforeach
</div>
@endsection