@extends('layouts.app')

@section('content')
    <section class="shop-section" style="padding-top: 62px;">
        <div class="container">
            <div class="shop-filter-bar">
                <div>
                    <span class="shop-muted-label">Warenkorb</span>
                    <h1 class="shop-page-title" style="font-size: clamp(2.7rem, 6vw, 4.6rem); margin-bottom: 18px;">Bereit f&uuml;r den <span>Checkout.</span></h1>
                    <p class="shop-copy">Du kannst Mengen anpassen, Produkte entfernen und direkt als Gast bestellen.</p>
                </div>
                <a href="{{ route('shop.index') }}" class="shop-button-light">
                    <i class="fas fa-arrow-left"></i>
                    Weiter shoppen
                </a>
            </div>

            @if ($summary['count'] === 0)
                <div class="shop-empty-state">
                    <i class="fas fa-basket-shopping"></i>
                    <h2 style="font-size: 2rem; margin-bottom: 12px;">Dein Warenkorb ist leer</h2>
                    <p class="shop-copy" style="margin-bottom: 24px;">Lege zuerst ein Produkt in den Warenkorb, um mit dem Checkout weiterzumachen.</p>
                    <a href="{{ route('shop.index') }}" class="shop-button">Zum Shop</a>
                </div>
            @else
                <div class="shop-cart-grid">
                    <div class="shop-cart-items">
                        @foreach ($summary['items'] as $item)
                            <article class="shop-cart-item reveal">
                                <div class="shop-cart-item-media">
                                    <img src="{{ $item['product']->image_url }}" alt="{{ $item['product']->name }}">
                                </div>

                                <div class="shop-cart-item-body">
                                    <div class="shop-inline-meta">
                                        <div>
                                            <div class="shop-muted-label">{{ $item['product']->category ?: 'Produkt' }}</div>
                                            <h2 class="shop-card-title" style="font-size: 1.5rem; margin-top: 8px;">
                                                <a href="{{ route('shop.show', $item['product']) }}" style="color: inherit; text-decoration: none;">
                                                    {{ $item['product']->name }}
                                                </a>
                                            </h2>
                                        </div>
                                        <strong class="shop-price-current" style="font-size: 1.4rem;">{{ $item['line_total_formatted'] }}</strong>
                                    </div>

                                    <p class="shop-copy">{{ $item['product']->short_description }}</p>

                                    <div class="shop-cart-item-actions">
                                        <form method="POST" action="{{ route('shop.cart.update', $item['product']) }}" class="shop-inline-form">
                                            @csrf
                                            @method('PATCH')
                                            <input type="number" name="quantity" min="0" max="{{ $item['product']->stock_quantity }}" value="{{ $item['quantity'] }}" class="shop-qty-input">
                                            <button type="submit" class="shop-button-light">Aktualisieren</button>
                                        </form>

                                        <form method="POST" action="{{ route('shop.cart.destroy', $item['product']) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="shop-button-secondary">Entfernen</button>
                                        </form>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <aside class="shop-summary-card reveal">
                        <span class="shop-muted-label">Zusammenfassung</span>
                        <h2 style="font-size: 2rem; margin: 14px 0 18px;">Deine Bestellung</h2>

                        <ul class="shop-summary-list">
                            <li>
                                <span>Positionen</span>
                                <strong>{{ $summary['count'] }}</strong>
                            </li>
                            <li>
                                <span>Zwischensumme</span>
                                <strong>{{ $summary['subtotal_formatted'] }}</strong>
                            </li>
                            <li>
                                <span>Versand</span>
                                <strong>{{ $summary['shipping_formatted'] }}</strong>
                            </li>
                        </ul>

                        <div class="shop-summary-total">
                            <div class="shop-inline-meta">
                                <span class="shop-muted-label">Gesamt</span>
                                <strong class="shop-price-current">{{ $summary['total_formatted'] }}</strong>
                            </div>
                        </div>

                        <p class="shop-note" style="margin: 18px 0 24px;">
                            Kostenloser Versand ab {{ number_format(($shippingConfig['free_from_cents'] ?? 0) / 100, 2, ',', '.') }} EUR.
                            Gast-Checkout und Deutschland-Versand sind bereits eingebaut.
                        </p>

                        <div class="shop-form-actions">
                            <a href="{{ route('shop.checkout.create') }}" class="shop-button" style="width: 100%;">Zum Checkout</a>
                            <a href="{{ route('shop.index') }}" class="shop-button-light" style="width: 100%;">Mehr Produkte ansehen</a>
                        </div>
                    </aside>
                </div>
            @endif
        </div>
    </section>
@endsection