@extends('layouts.app')

@section('content')
    @php
        $defaultPaymentMethod = old('payment_method', array_key_first($paymentMethods));
    @endphp

    <section class="shop-section" style="padding-top: 62px;">
        <div class="container">
            <div class="shop-filter-bar">
                <div>
                    <span class="shop-muted-label">Gast-Checkout</span>
                    <h1 class="shop-page-title" style="font-size: clamp(2.7rem, 6vw, 4.6rem); margin-bottom: 18px;">Bestellung in <span>wenigen Schritten.</span></h1>
                    <p class="shop-copy">Adresse eintragen, Vorkasse-Zahlart festlegen und die Bestellung direkt f&uuml;r den Deutschland-Versand absenden.</p>
                </div>
                <a href="{{ route('shop.cart.index') }}" class="shop-button-light">
                    <i class="fas fa-arrow-left"></i>
                    Zur&uuml;ck zum Warenkorb
                </a>
            </div>

            @if ($errors->any())
                <div class="flash-banner flash-banner-error" style="margin-bottom: 24px;">
                    Bitte pr&uuml;fe die markierten Felder im Checkout.
                </div>
            @endif

            <div class="shop-cart-grid">
                <form method="POST" action="{{ route('shop.checkout.store') }}" class="shop-form-panel reveal active">
                    @csrf

                    <div class="shop-form-grid">
                        <div class="shop-field">
                            <label for="customer_first_name">Vorname</label>
                            <input id="customer_first_name" type="text" name="customer_first_name" value="{{ old('customer_first_name') }}" class="shop-input">
                            @error('customer_first_name')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field">
                            <label for="customer_last_name">Nachname</label>
                            <input id="customer_last_name" type="text" name="customer_last_name" value="{{ old('customer_last_name') }}" class="shop-input">
                            @error('customer_last_name')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field">
                            <label for="customer_email">E-Mail</label>
                            <input id="customer_email" type="email" name="customer_email" value="{{ old('customer_email') }}" class="shop-input">
                            @error('customer_email')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field">
                            <label for="customer_phone">Telefon</label>
                            <input id="customer_phone" type="text" name="customer_phone" value="{{ old('customer_phone') }}" class="shop-input">
                            @error('customer_phone')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field shop-field-full">
                            <label>Versand</label>
                            <div class="shop-radio-card shop-info-card">
                                <strong>Deutschland-Versand</strong>
                                <span class="shop-note">Pauschal {{ number_format(($shippingConfig['flat_rate_cents'] ?? 0) / 100, 2, ',', '.') }} EUR, kostenlos ab {{ number_format(($shippingConfig['free_from_cents'] ?? 0) / 100, 2, ',', '.') }} EUR.</span>
                            </div>
                        </div>

                        <div class="shop-field shop-field-full">
                            <label for="shipping_name">Empf&auml;ngername</label>
                            <input id="shipping_name" type="text" name="shipping_name" value="{{ old('shipping_name') }}" class="shop-input">
                            @error('shipping_name')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field shop-field-full">
                            <label for="street">Stra&szlig;e und Hausnummer</label>
                            <input id="street" type="text" name="street" value="{{ old('street') }}" class="shop-input">
                            <div class="shop-note">Bitte gib die vollst&auml;ndige Lieferadresse innerhalb Deutschlands an.</div>
                            @error('street')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field">
                            <label for="postal_code">PLZ</label>
                            <input id="postal_code" type="text" name="postal_code" value="{{ old('postal_code') }}" class="shop-input">
                            @error('postal_code')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field">
                            <label for="city">Ort</label>
                            <input id="city" type="text" name="city" value="{{ old('city') }}" class="shop-input">
                            @error('city')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field shop-field-full">
                            <label>Vorkasse-Zahlart</label>
                            <div class="shop-radio-grid">
                                @foreach ($paymentMethods as $paymentKey => $paymentMethod)
                                    <label class="shop-radio-card">
                                        <input type="radio" name="payment_method" value="{{ $paymentKey }}" {{ $defaultPaymentMethod === $paymentKey ? 'checked' : '' }}>
                                        <strong>{{ $paymentMethod['label'] }}</strong>
                                        <span class="shop-note">{{ $paymentMethod['description'] }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @error('payment_method')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="shop-field shop-field-full">
                            <label for="notes">Hinweise zur Bestellung</label>
                            <textarea id="notes" name="notes" class="shop-textarea">{{ old('notes') }}</textarea>
                            @error('notes')<div class="validation-error">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="shop-form-actions" style="margin-top: 24px;">
                        <button type="submit" class="shop-button">Bestellung absenden</button>
                        <a href="{{ route('shop.cart.index') }}" class="shop-button-light">Warenkorb bearbeiten</a>
                    </div>
                </form>

                <aside class="shop-summary-card reveal">
                    <span class="shop-muted-label">Bestell&uuml;bersicht</span>
                    <h2 style="font-size: 2rem; margin: 14px 0 18px;">Dein Checkout</h2>

                    <ul class="shop-summary-list">
                        @foreach ($summary['items'] as $item)
                            <li>
                                <span>{{ $item['product']->name }} x {{ $item['quantity'] }}</span>
                                <strong>{{ $item['line_total_formatted'] }}</strong>
                            </li>
                        @endforeach
                    </ul>

                    <div class="shop-summary-total">
                        <ul class="shop-summary-list">
                            <li>
                                <span>Zwischensumme</span>
                                <strong>{{ $summary['subtotal_formatted'] }}</strong>
                            </li>
                            <li>
                                <span>Versand</span>
                                <strong>{{ $summary['shipping_formatted'] }}</strong>
                            </li>
                        </ul>
                        <div class="shop-inline-meta" style="margin-top: 18px;">
                            <span class="shop-muted-label">Gesamt</span>
                            <strong class="shop-price-current">{{ $summary['total_formatted'] }}</strong>
                        </div>
                    </div>

                    <div style="margin-top: 24px;">
                        <span class="shop-muted-label">So geht es weiter</span>
                        <ul class="shop-check-list" style="margin-top: 14px;">
                            <li>
                                <i class="fas fa-receipt"></i>
                                <span>Die Bestellung wird sofort erfasst und f&uuml;r die Bearbeitung vorbereitet.</span>
                            </li>
                            <li>
                                <i class="fas fa-credit-card"></i>
                                <span>Die gew&auml;hlte Vorkasse-Zahlart zeigt dir anschlie&szlig;end die passenden Zahlungsdaten an.</span>
                            </li>
                            <li>
                                <i class="fas fa-box"></i>
                                <span>Lagerbestand wird beim Absenden direkt reduziert.</span>
                            </li>
                            <li>
                                <i class="fas fa-envelope"></i>
                                <span>Bestellbest&auml;tigung per E-Mail und optional per SMS wird sofort ausgel&ouml;st.</span>
                            </li>
                            <li>
                                <i class="fas fa-truck"></i>
                                <span>Der Versand erfolgt nach Zahlungseingang innerhalb Deutschlands.</span>
                            </li>
                        </ul>
                    </div>
                </aside>
            </div>
        </div>
    </section>
@endsection