@extends('layouts.shop')
@section('title', 'Warenkorb')
@section('content')
<h1 class="text-2xl font-bold mb-6">Warenkorb</h1>

@if(empty($items))
<div class="text-center py-20 text-gray-400">
    <div class="text-6xl mb-4">🛒</div>
    <p class="text-lg mb-4">Ihr Warenkorb ist leer.</p>
    <a href="{{ route('shop.products.index') }}" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Weiter einkaufen</a>
</div>
@else
<form method="POST" action="{{ route('cart.update') }}">
    @csrf
    <div class="bg-white border rounded-lg overflow-hidden mb-6">
        <table class="w-full">
            <thead class="bg-gray-50 text-sm">
                <tr>
                    <th class="px-4 py-3 text-left">Artikel</th>
                    <th class="px-4 py-3 text-center">Menge</th>
                    <th class="px-4 py-3 text-right">Einzelpreis</th>
                    <th class="px-4 py-3 text-right">Gesamt</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @foreach($items as $key => $item)
                <tr>
                    <td class="px-4 py-4">
                        <div class="font-medium">{{ $item['product_name'] }}</div>
                        @if($item['variant_label'])<div class="text-sm text-gray-400">{{ $item['variant_label'] }}</div>@endif
                    </td>
                    <td class="px-4 py-4 text-center">
                        <input type="number" name="qty[{{ $key }}]" value="{{ $item['qty'] }}" min="0" class="w-16 border rounded px-2 py-1 text-sm text-center">
                    </td>
                    <td class="px-4 py-4 text-right text-sm">{{ number_format($item['price'], 2, ',', '.') }} €</td>
                    <td class="px-4 py-4 text-right font-semibold">{{ number_format($item['price'] * $item['qty'], 2, ',', '.') }} €</td>
                    <td class="px-4 py-4 text-center">
                        <form method="POST" action="{{ route('cart.remove', $key) }}">
                            @csrf
                            <button class="text-red-400 hover:text-red-600 text-xl">✕</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="flex justify-between items-center mb-6">
        <button type="submit" class="text-sm text-blue-600 hover:underline">Warenkorb aktualisieren</button>
    </div>
</form>

<div class="flex justify-end">
    <div class="w-80 bg-white border rounded-lg p-6">
        <div class="space-y-2 text-sm mb-4">
            <div class="flex justify-between"><span>Zwischensumme</span><span>{{ number_format($subtotal, 2, ',', '.') }} €</span></div>
            <div class="flex justify-between">
                <span>Versand</span>
                <span>
                    @if($shippingCost == 0 && $shippingRate)
                        <span class="text-green-600">Kostenlos</span>
                    @elseif($shippingRate)
                        {{ number_format($shippingCost, 2, ',', '.') }} €
                    @else
                        Wird berechnet
                    @endif
                </span>
            </div>
            @if($shippingRate && $shippingRate->free_from && $subtotal < $shippingRate->free_from)
            <p class="text-xs text-gray-400">Noch {{ number_format($shippingRate->free_from - $subtotal, 2, ',', '.') }} € bis kostenloser Versand</p>
            @endif
        </div>
        <div class="border-t pt-3 flex justify-between font-bold text-lg mb-5">
            <span>Gesamt</span><span>{{ number_format($total, 2, ',', '.') }} €</span>
        </div>
        <a href="{{ route('checkout.index') }}" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 font-semibold">
            Zur Kasse →
        </a>
    </div>
</div>
@endif
@endsection