@extends('layouts.app')

@section('robots', 'noindex,nofollow')

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

    <section class="shop-section" style="padding-top: 62px;">
        <div class="container">
            <div class="shop-cart-grid">
                <div class="shop-detail-card reveal active">
                    <div class="shop-inline-meta">
                        @if ($order->isPaid())
                            <span class="shop-badge"><i class="fas fa-circle-check"></i> Zahlung erhalten</span>
                        @else
                            <span class="shop-badge"><i class="fas fa-circle-check"></i> Bestellung eingegangen</span>
                        @endif
                        <span class="shop-note">Nr. {{ $order->order_number }}</span>
                    </div>
                    <h1 class="shop-page-title" style="font-size: clamp(2.4rem, 6vw, 3.8rem); margin: 14px 0 16px;">Danke f&uuml;r deine Bestellung!</h1>
                    @if ($owns)
                        @if ($order->isPaid())
                            <p class="shop-copy">Hallo {{ $order->customer_full_name }}, deine Zahlung ist eingegangen &ndash; vielen Dank! Eine Best&auml;tigung geht auch per E-Mail an <strong>{{ $order->customer_email }}</strong>.</p>
                        @else
                            <p class="shop-copy">Hallo {{ $order->customer_full_name }}, deine Bestellung wartet jetzt auf den Zahlungseingang. Du erh&auml;ltst alle Details auch per E-Mail an <strong>{{ $order->customer_email }}</strong>.</p>
                        @endif
                    @else
                        <p class="shop-copy">Deine Bestellung ist eingegangen. Alle Details &ndash; inklusive Bestell&uuml;bersicht und ggf. Downloads &ndash; haben wir dir per E-Mail geschickt.</p>
                    @endif

                    @if ($downloadLinks->isNotEmpty())
                        <div class="shop-summary-total" style="margin-top:22px;">
                            <h2 style="font-size: 1.3rem; margin: 0 0 12px;">Deine Downloads</h2>
                            @foreach ($downloadLinks as $link)
                                <a href="{{ $link['url'] }}" class="shop-button" style="display:inline-flex;margin:0 8px 8px 0;">
                                    <i class="fas fa-download"></i> {{ $link['name'] }}
                                </a>
                            @endforeach
                            <p class="shop-note" style="margin-top:10px;">Die Links sind {{ config('shop.digital.download_ttl_hours', 72) }} Stunden g&uuml;ltig und wurden dir auch per E-Mail geschickt.</p>
                        </div>
                    @endif

                    @if ($owns)
                    <h2 style="font-size: 1.5rem; margin: 26px 0 14px;">Bestell&uuml;bersicht</h2>
                    <ul class="shop-summary-list">
                        @foreach ($order->items as $item)
                            <li>
                                <span class="shop-line-item">
                                    <img class="shop-thumb" src="{{ $item->image_url }}" alt="{{ $item->product_name }}">
                                    <span>{{ $item->product_name }} &times; {{ $item->quantity }}</span>
                                </span>
                                <strong>{{ $item->line_total_formatted }}</strong>
                            </li>
                        @endforeach
                        <li><span>Zwischensumme</span><strong>{{ $order->subtotal_formatted }}</strong></li>
                        <li><span>Versand</span><strong>{{ $order->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">{{ $order->total_formatted }}</strong>
                        </div>
                    </div>
                    @endif

                    <a href="{{ route('shop.index') }}" class="shop-button-light" style="margin-top:24px;">
                        <i class="fas fa-arrow-left"></i> Weiter einkaufen
                    </a>
                </div>

                @if ($owns)
                <aside class="shop-summary-card reveal">
                    @if ($order->isPaid())
                        <span class="shop-muted-label">Zahlung abgeschlossen</span>
                        <h2 style="font-size: 1.7rem; margin: 14px 0 16px;">{{ $paymentMethod['label'] ?? 'Bezahlt' }}</h2>
                        <p class="shop-copy" style="margin-bottom:18px;">Deine Zahlung wurde erfolgreich verbucht. Es ist nichts weiter zu tun.</p>

                        <ul class="shop-summary-list">
                            <li><span>Bestellnummer</span><strong>{{ $order->order_number }}</strong></li>
                            <li><span>Bezahlt am</span><strong>{{ optional($order->paid_at)->format('d.m.Y H:i') }}</strong></li>
                            <li><span>Betrag</span><strong>{{ $order->total_formatted }}</strong></li>
                        </ul>
                    @else
                        <span class="shop-muted-label">Zahlung per Vorkasse</span>
                        <h2 style="font-size: 1.7rem; margin: 14px 0 16px;">{{ $paymentMethod['label'] ?? 'Vorkasse' }}</h2>
                        <p class="shop-copy" style="margin-bottom:18px;">{{ $paymentMethod['instructions'] ?? 'Bitte &uuml;berweise den Betrag vorab.' }}</p>

                        <ul class="shop-summary-list">
                            <li><span>Verwendungszweck</span><strong>{{ $order->order_number }}</strong></li>
                            <li><span>Betrag</span><strong>{{ $order->total_formatted }}</strong></li>
                        </ul>

                        <div style="margin-top:14px;">
                            <button type="button" id="bankRevealBtn"
                                data-url="{{ route('shop.checkout.payment-details', $order->order_number) }}"
                                data-token="{{ csrf_token() }}"
                                class="shop-button-light">
                                <i class="fas fa-building-columns"></i> Bankverbindung anzeigen
                            </button>
                            <ul class="shop-summary-list" id="bankDetails" style="display:none;margin-top:12px;"></ul>
                            <p class="shop-note" id="bankRevealError" style="display:none;color:#b91c1c;margin-top:10px;"></p>
                            <noscript><p class="shop-note" style="margin-top:10px;">Bitte aktiviere JavaScript &ndash; oder entnimm die Bankverbindung deiner Best&auml;tigungs-E-Mail.</p></noscript>
                        </div>

                        @if (($prepayment['paypal_address'] ?? false) || config('services.paypal.paypal_me'))
                            <p class="shop-note" style="margin-top:16px;">
                                Alternativ per PayPal:
                                @if (config('services.paypal.paypal_me'))
                                    <a href="{{ config('services.paypal.paypal_me') }}" target="_blank" rel="noopener">{{ config('services.paypal.paypal_me') }}</a>
                                @else
                                    {{ $prepayment['paypal_address'] }}
                                @endif
                                &ndash; bitte Bestellnummer im Verwendungszweck angeben.
                            </p>
                        @endif

                        <p class="shop-note" style="margin-top:16px;">Bitte gib unbedingt die Bestellnummer als Verwendungszweck an. Nach Zahlungseingang wird die Bestellung versendet.</p>
                    @endif
                </aside>
                @endif
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var btn = document.getElementById('bankRevealBtn');
            if (!btn) return;

            function escapeHtml(s) {
                return String(s).replace(/[&<>"']/g, function (c) {
                    return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
                });
            }
            function row(label, val) {
                return '<li><span>' + label + '</span><strong>' + escapeHtml(val) + '</strong></li>';
            }

            btn.addEventListener('click', function () {
                btn.disabled = true;
                btn.innerHTML = 'Lade &hellip;';

                fetch(btn.dataset.url, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': btn.dataset.token,
                        'Accept': 'application/json'
                    }
                }).then(function (r) {
                    if (!r.ok) throw new Error('http ' + r.status);
                    return r.json();
                }).then(function (d) {
                    var rows = '';
                    if (d.account_name) rows += row('Kontoinhaber', d.account_name);
                    if (d.iban) rows += row('IBAN', d.iban);
                    if (d.bic) rows += row('BIC', d.bic);
                    if (d.bank_name) rows += row('Bank', d.bank_name);
                    var el = document.getElementById('bankDetails');
                    el.innerHTML = rows;
                    el.style.display = '';
                    btn.style.display = 'none';
                }).catch(function () {
                    var e = document.getElementById('bankRevealError');
                    e.textContent = 'Bankdaten konnten nicht geladen werden. Bitte sieh in deine Bestätigungs-E-Mail.';
                    e.style.display = '';
                    btn.disabled = false;
                    btn.innerHTML = 'Erneut versuchen';
                });
            });
        });
    </script>
@endsection