@extends('layouts.app')

@section('content')
    <section class="shop-section" style="padding-top: 62px;">
        <div class="container">
            <a href="{{ route('shop.index') }}" class="shop-button-light" style="margin-bottom: 24px;">
                <i class="fas fa-arrow-left"></i>
                Zur&uuml;ck zum Shop
            </a>

            <div class="shop-detail-grid">
                <div class="shop-gallery-card reveal active">
                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}">

                    @if (count($product->gallery_urls) > 0)
                        <div class="shop-gallery-stack">
                            <div class="shop-gallery-thumb">
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
                            </div>
                            @foreach ($product->gallery_urls as $galleryUrl)
                                <div class="shop-gallery-thumb">
                                    <img src="{{ $galleryUrl }}" alt="{{ $product->name }} Galerie">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="shop-detail-card reveal">
                    <div class="shop-inline-meta">
                        @if ($product->badge)
                            <span class="shop-badge">{{ $product->badge }}</span>
                        @endif
                        @if ($product->category)
                            <span class="shop-muted-label">{{ $product->category }}</span>
                        @endif
                    </div>

                    <h1 class="shop-page-title" style="font-size: clamp(2.8rem, 7vw, 4.8rem); margin-bottom: 22px;">{{ $product->name }}</h1>
                    <p class="lead" style="margin-bottom: 28px;">{{ $product->short_description }}</p>

                    <div class="shop-price-row" style="margin-bottom: 10px;">
                        <strong class="shop-price-current">{{ $product->price_formatted }}</strong>
                        @if ($product->compare_at_price_formatted)
                            <span class="shop-price-compare">{{ $product->compare_at_price_formatted }}</span>
                        @endif
                    </div>

                    <div class="shop-note" style="margin-bottom: 22px;">{{ $product->stock_label }}</div>

                    <div class="shop-form-actions">
                        <form method="POST" action="{{ route('shop.cart.store', $product) }}" class="shop-inline-form">
                            @csrf
                            <input type="number" name="quantity" min="1" max="{{ max(1, $product->stock_quantity) }}" value="1" class="shop-qty-input">
                            <button type="submit" class="shop-button" {{ $product->is_in_stock ? '' : 'disabled' }}>
                                <i class="fas fa-bag-shopping"></i>
                                In den Warenkorb
                            </button>
                        </form>

                        <form method="POST" action="{{ route('shop.cart.store', $product) }}" class="shop-inline-form">
                            @csrf
                            <input type="hidden" name="quantity" value="1">
                            <input type="hidden" name="redirect_to" value="checkout">
                            <button type="submit" class="shop-button-secondary" {{ $product->is_in_stock ? '' : 'disabled' }}>
                                Direkt zum Checkout
                            </button>
                        </form>
                    </div>

                    <div class="shop-key-facts" style="margin-top: 28px;">
                        <div class="shop-key-fact">
                            <span class="shop-muted-label">SKU</span>
                            <strong>{{ $product->sku ?: 'noch offen' }}</strong>
                        </div>
                        <div class="shop-key-fact">
                            <span class="shop-muted-label">Versand</span>
                            <strong>
                                @if (($product->shipping_cost_cents ?? 0) > 0)
                                    {{ number_format($product->shipping_cost_cents / 100, 2, ',', '.') }} EUR
                                @else
                                    Kostenlos
                                @endif
                            </strong>
                        </div>
                        <div class="shop-key-fact">
                            <span class="shop-muted-label">Zahlarten</span>
                            <strong>{{ count($paymentMethods) }} Optionen</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shop-section" style="padding-top: 0;">
        <div class="container shop-detail-grid">
            <div class="shop-detail-card reveal">
                <span class="shop-muted-label">Beschreibung</span>
                <h2 style="font-size: 2rem; margin: 14px 0 18px;">Was dieses Produkt ausmacht</h2>
                <div class="shop-copy">
                    {!! nl2br(e($product->description ?: $product->short_description)) !!}
                </div>

                @if ($product->highlights)
                    <div style="margin-top: 24px;">
                        <span class="shop-muted-label">Highlights</span>
                        <ul class="shop-highlight-list" style="margin-top: 14px;">
                            @foreach ($product->highlights as $highlight)
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    <span>{{ $highlight }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            <div class="shop-summary-card reveal">
                <span class="shop-muted-label">Versand &amp; Zahlung</span>
                <h2 style="font-size: 2rem; margin: 14px 0 18px;">Bestellung f&uuml;r Deutschland</h2>
                <ul class="shop-summary-list">
                    <li>
                        <span>Versandpauschale</span>
                        <strong>{{ number_format(($shippingConfig['flat_rate_cents'] ?? 0) / 100, 2, ',', '.') }} EUR</strong>
                    </li>
                    <li>
                        <span>Kostenlos ab</span>
                        <strong>{{ number_format(($shippingConfig['free_from_cents'] ?? 0) / 100, 2, ',', '.') }} EUR</strong>
                    </li>
                    <li>
                        <span>Versandgebiet</span>
                        <strong>Deutschland</strong>
                    </li>
                </ul>

                <div style="margin-top: 24px;">
                    <span class="shop-muted-label">Vorkasse-Zahlarten</span>
                    <ul class="shop-check-list" style="margin-top: 14px;">
                        @foreach ($paymentMethods as $method)
                            <li>
                                <i class="fas fa-circle-check"></i>
                                <span>
                                    <strong>{{ $method['label'] }}</strong><br>
                                    <span class="shop-note">{{ $method['description'] }}</span>
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

    @if ($relatedProducts->isNotEmpty())
        <section class="shop-section" style="padding-top: 0;">
            <div class="container">
                <div class="shop-filter-bar" style="margin-bottom: 24px;">
                    <div>
                        <span class="shop-muted-label">Mehr im Sortiment</span>
                        <h2 style="font-size: 2.2rem; margin-top: 12px;">Das passt ebenfalls gut dazu</h2>
                    </div>
                </div>

                <div class="shop-related-grid">
                    @foreach ($relatedProducts as $relatedProduct)
                        <article class="shop-card reveal">
                            <div class="shop-card-media">
                                <img src="{{ $relatedProduct->image_url }}" alt="{{ $relatedProduct->name }}">
                            </div>
                            <div class="shop-card-body">
                                <div class="shop-inline-meta">
                                    @if ($relatedProduct->badge)
                                        <span class="shop-badge">{{ $relatedProduct->badge }}</span>
                                    @endif
                                    <span class="shop-note">{{ $relatedProduct->stock_label }}</span>
                                </div>
                                <h3 class="shop-card-title">{{ $relatedProduct->name }}</h3>
                                <p class="shop-card-copy">{{ $relatedProduct->short_description }}</p>
                                <div class="shop-inline-meta">
                                    <strong class="shop-price-current" style="font-size: 1.45rem;">{{ $relatedProduct->price_formatted }}</strong>
                                    <a href="{{ route('shop.show', $relatedProduct) }}" class="shop-button-light">Ansehen</a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection