@extends('layouts.app')

@section('content')
    @includeIf('shop._flash')

    <div class="shx">

        {{-- ===== CHECKOUT HEADER (Bereichs-Muster, zentriert) ===== --}}
        <header class="shx-hero">
            <div class="shx-hero-grid" aria-hidden="true"></div>
            <div class="shx-hero-inner">
                <span class="shx-kicker">
                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2 4 6v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V6l-8-4z"/><path d="m9 12 2 2 4-4"/></svg>
                    Shop · Kasse
                </span>
                <h1 class="shx-h1">
                    Sicher
                    <span>zur Kasse.</span>
                </h1>
                <p class="shx-lead">
                    <strong>Zahlung per Vorkasse.</strong> Du erhältst die Zahlungsdaten direkt nach der Bestellung per E-Mail — Zugang sofort nach Zahlungseingang.
                </p>
                <span class="shx-livecount">
                    <span class="shx-dot" aria-hidden="true"></span>
                    {{ $summary['count'] }} {{ $summary['count'] === 1 ? 'Artikel' : 'Artikel' }} · {{ $summary['total_formatted'] }}
                </span>
                <div style="margin-top:22px;">
                    <a href="{{ route('shop.cart.index') }}" class="shxko-back">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
                        Zurück zum Warenkorb
                    </a>
                </div>
            </div>
        </header>

        {{-- ===== CHECKOUT FORM ===== --}}
        <section class="shxko-section">
            <div class="container">
                <form method="POST" action="{{ route('shop.checkout.store') }}">
                    @csrf
                    <div class="shxko-layout">

                        {{-- Left: address + payment --}}
                        <div class="shxko-form-card">
                            <h2 class="shxko-section-title">Kontakt &amp; Lieferadresse</h2>

                            <div class="shxko-grid">
                                <label class="shxko-field">
                                    <span class="shxko-label">Vorname *</span>
                                    <input type="text" name="customer_first_name" value="{{ old('customer_first_name') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field">
                                    <span class="shxko-label">Nachname *</span>
                                    <input type="text" name="customer_last_name" value="{{ old('customer_last_name') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field">
                                    <span class="shxko-label">E-Mail *</span>
                                    <input type="email" name="customer_email" value="{{ old('customer_email') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field">
                                    <span class="shxko-label">Telefon</span>
                                    <input type="tel" name="customer_phone" value="{{ old('customer_phone') }}" class="shxko-input">
                                </label>
                                <label class="shxko-field shxko-span-2">
                                    <span class="shxko-label">Straße &amp; Hausnummer *</span>
                                    <input type="text" name="street" value="{{ old('street') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field">
                                    <span class="shxko-label">PLZ *</span>
                                    <input type="text" name="postal_code" value="{{ old('postal_code') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field">
                                    <span class="shxko-label">Ort *</span>
                                    <input type="text" name="city" value="{{ old('city') }}" required class="shxko-input">
                                </label>
                                <label class="shxko-field shxko-span-2">
                                    <span class="shxko-label">Land *</span>
                                    <input type="text" name="country" value="{{ old('country', config('shop.default_country', 'Deutschland')) }}" required class="shxko-input">
                                </label>
                            </div>

                            <h2 class="shxko-section-title" style="margin-top:32px;">Zahlart</h2>
                            <div class="shxko-payment-grid">
                                @foreach ($paymentMethods as $key => $method)
                                    <label class="shxko-radio-card">
                                        <input type="radio" name="payment_method" value="{{ $key }}" {{ old('payment_method', array_key_first($paymentMethods)) === $key ? 'checked' : '' }} required>
                                        <div class="shxko-radio-body">
                                            <strong>{{ $method['label'] }}</strong>
                                            <span>{{ $method['description'] }}</span>
                                        </div>
                                    </label>
                                @endforeach
                            </div>

                            <label class="shxko-field" style="margin-top:22px;">
                                <span class="shxko-label">Anmerkungen (optional)</span>
                                <textarea name="notes" rows="3" class="shxko-input">{{ old('notes') }}</textarea>
                            </label>

                            <label class="shxko-terms">
                                <input type="checkbox" name="accept_terms" value="1" {{ old('accept_terms') ? 'checked' : '' }}>
                                <span>Ich akzeptiere die <a href="/agb" target="_blank">AGB</a> und habe die <a href="/datenschutz" target="_blank">Datenschutzerklärung</a> gelesen. *</span>
                            </label>

                            <label class="shxko-terms">
                                <input type="checkbox" name="accept_withdrawal_waiver" value="1" {{ old('accept_withdrawal_waiver') ? 'checked' : '' }}>
                                <span>Ich verlange ausdrücklich, dass mit der Ausführung des Vertrags vor Ablauf der Widerrufsfrist begonnen wird. Mir ist bekannt, dass mein <strong>Widerrufsrecht mit Beginn der Ausführung</strong> bei digitalen Inhalten <strong>erlischt</strong> (§ 356 Abs. 5 BGB). *</span>
                            </label>
                        </div>

                        {{-- Right: order summary --}}
                        <aside class="shxko-summary">
                            <h2 class="shxko-section-title">Deine Bestellung</h2>

                            <ul class="shxko-items">
                                @foreach ($summary['items'] as $item)
                                    <li class="shxko-item">
                                        <img src="{{ $item['product']->image_url ?: asset('img/logo-mark.png') }}"
                                             alt="{{ $item['product']->name }}"
                                             class="shxko-item-thumb"
                                             onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                                        <span class="shxko-item-name">{{ $item['product']->name }} &times; {{ $item['quantity'] }}</span>
                                        <strong class="shxko-item-price">{{ $item['line_total_formatted'] }}</strong>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="shxko-totals">
                                <div class="shxko-total-row">
                                    <span>Zwischensumme</span>
                                    <span>{{ $summary['subtotal_formatted'] }}</span>
                                </div>
                                <div class="shxko-total-row">
                                    <span>Versand</span>
                                    <span>{{ $summary['shipping_formatted'] }}</span>
                                </div>
                                <div class="shxko-total-row shxko-total-main">
                                    <span>Gesamt</span>
                                    <strong>{{ $summary['total_formatted'] }}</strong>
                                </div>
                            </div>

                            <button type="submit" class="shx-btn shx-btn-primary" style="width:100%;margin-top:22px;min-height:52px;font-size:1.04rem;">
                                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.1V12a10 10 0 1 1-5.9-9.1"/><path d="M22 4 12 14.01l-3-3"/></svg>
                                Zahlungspflichtig bestellen
                            </button>
                            <p class="shxko-note">Mit Klick auf „Zahlungspflichtig bestellen" gibst du eine verbindliche Bestellung ab.</p>

                            <ul class="shxko-trust">
                                <li>
                                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
                                    Sofortiger Zugang nach Zahlungseingang
                                </li>
                                <li>
                                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
                                    Lebenslange Updates inklusive
                                </li>
                            </ul>
                        </aside>

                    </div>
                </form>
            </div>
        </section>

    </div>

    @includeIf('shop._csrf')

    <style>
    /* ===== Checkout — shxko- scoped ===== */
    .shx{ --p:#0F8A4F;--p-dark:#0a6b3d;--p-light:#34b06f;--p-soft:rgba(15,138,79,.10);--g:#C8962B;--g-dark:#a87b1f;--g-light:#e3b653;--ink:var(--text-main,#0f172a);--muted:var(--text-muted,#64748b);--line:var(--border,#e2e8f0);--surface:#ffffff;--rad:22px;color:var(--ink);overflow-x:hidden; }
    .shx *{ box-sizing:border-box; }
    .shx .container{ width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px); }
    .shx a{ text-decoration:none; }

    /* shared components */
    .shx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 24px;border-radius:13px;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease; }
    .shx-btn-primary{ background:linear-gradient(135deg,var(--p),var(--p-dark));color:#fff;box-shadow:0 8px 22px rgba(15,138,79,.28); }
    .shx-btn-primary:hover{ transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 32px rgba(15,138,79,.36); }
    /* ---- Hero (Bereichs-Header-Muster — identisch zu shop/index) ---- */
    .shx-hero{
        position:relative;overflow:hidden;text-align:center;
        padding:clamp(96px,11vw,128px) 8% clamp(40px,5vw,56px);
        background:
            radial-gradient(120% 80% at 50% -10%, rgba(15,138,79,.10) 0%, rgba(15,138,79,0) 55%),
            #ffffff;
    }
    .shx-hero-grid{
        position:absolute;inset:0;pointer-events:none;
        background-image:
            linear-gradient(rgba(15,138,79,.05) 1px,transparent 1px),
            linear-gradient(90deg,rgba(15,138,79,.05) 1px,transparent 1px);
        background-size:56px 56px;
        -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
        mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
    }
    .shx-hero-inner{ position:relative;max-width:760px;margin:0 auto; }
    .shx-kicker{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:7px 14px;border-radius:999px;
        background:rgba(15,138,79,.10);color:var(--p-dark);
        font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
    }
    .shx-kicker svg{ flex:none; }
    .shx-h1{
        font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800;
        line-height:1.05;letter-spacing:-1.5px;color:var(--ink);margin:18px 0 0;
    }
    .shx-h1 span{ color:var(--p); }
    .shx-lead{
        max-width:560px;margin:16px auto 0;color:var(--muted);
        font-size:1.02rem;line-height:1.55;
    }
    .shx-lead strong{ color:var(--ink);font-weight:700; }
    .shx-livecount{
        display:inline-flex;align-items:center;gap:.5rem;margin-top:22px;
        padding:7px 15px;border-radius:999px;
        background:#ecfdf3;border:1px solid #b7e8cb;
        color:var(--p-dark);font-weight:700;font-size:.82rem;
    }
    .shx-dot{ width:.55rem;height:.55rem;border-radius:50%;background:var(--p);animation:shxPulse 2.2s ease-out infinite; }
    @keyframes shxPulse{ 0%{ box-shadow:0 0 0 0 rgba(15,138,79,.5); } 70%{ box-shadow:0 0 0 8px rgba(15,138,79,0); } 100%{ box-shadow:0 0 0 0 rgba(15,138,79,0); } }
    .shxko-back{ display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.88rem;font-weight:600;transition:color .15s; }
    .shxko-back:hover{ color:var(--p-dark); }

    /* ---- Layout ---- */
    .shxko-section{ padding:clamp(36px,6vw,64px) 0 clamp(48px,8vw,80px); }
    .shxko-layout{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(22px,3vw,36px);align-items:start; }
    @media(max-width:900px){ .shxko-layout{ grid-template-columns:1fr; } }

    /* ---- Form card ---- */
    .shxko-form-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:clamp(22px,3vw,32px);box-shadow:0 10px 30px -16px rgba(15,23,42,.14); }
    .shxko-section-title{ margin:0;font-size:1.48rem;font-weight:800;letter-spacing:-.015em;color:var(--ink); }
    .shxko-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px; }
    @media(max-width:600px){ .shxko-grid{ grid-template-columns:1fr; } }
    .shxko-span-2{ grid-column:1 / -1; }
    .shxko-field{ display:flex;flex-direction:column;gap:6px; }
    .shxko-label{ font-size:.84rem;font-weight:700;color:var(--muted); }
    .shxko-input{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s; }
    .shxko-input:focus{ outline:none;border-color:var(--p-light);box-shadow:0 0 0 3px rgba(15,138,79,.16); }
    textarea.shxko-input{ resize:vertical;min-height:80px; }

    /* ---- Payment options ---- */
    .shxko-payment-grid{ display:grid;gap:12px;margin-top:16px; }
    .shxko-radio-card{ display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s; }
    .shxko-radio-card:has(input:checked){ border-color:var(--p-light);background:rgba(15,138,79,.05); }
    .shxko-radio-card input{ margin-top:3px;accent-color:var(--p);flex:none; }
    .shxko-radio-body{ display:flex;flex-direction:column;gap:3px;min-width:0; }
    .shxko-radio-body strong{ font-size:.98rem;font-weight:800;color:var(--ink); }
    .shxko-radio-body span{ font-size:.88rem;color:var(--muted); }

    /* ---- Terms ---- */
    .shxko-terms{ display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:.88rem;color:var(--muted);line-height:1.5; }
    .shxko-terms input{ margin-top:3px;accent-color:var(--p);flex:none; }
    .shxko-terms a{ color:var(--p-dark);text-decoration:underline; }

    /* ---- Summary sidebar ---- */
    .shxko-summary{
        background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
        padding:clamp(20px,3vw,28px);position:sticky;top:84px;
        box-shadow:0 16px 48px -20px rgba(15,23,42,.18);
    }
    .shxko-summary .shxko-section-title{ font-size:1.28rem; }
    .shxko-items{ list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px; }
    .shxko-item{ display:flex;align-items:center;gap:12px;min-width:0; }
    .shxko-item-thumb{ width:46px;height:46px;border-radius:10px;object-fit:contain;background:#f3f8f5;border:1px solid var(--line);flex:none; }
    .shxko-item-name{ flex:1;min-width:0;font-size:.9rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .shxko-item-price{ flex:none;font-size:1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums; }
    .shxko-totals{ margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px; }
    .shxko-total-row{ display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.92rem;color:var(--muted); }
    .shxko-total-main{ border-top:1px solid var(--line);padding-top:12px;margin-top:2px; }
    .shxko-total-main span{ font-size:1rem;font-weight:700;color:var(--ink); }
    .shxko-total-main strong{ font-size:1.44rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums; }
    .shxko-note{ margin:12px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5; }
    .shxko-trust{ list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px; }
    .shxko-trust li{ display:flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;color:var(--muted); }
    .shxko-trust svg{ color:var(--p);flex:none; }

    @media(prefers-reduced-motion:reduce){ .shx-kicker-dot{ animation:none !important; } }
    </style>
@endsection