@extends('layouts.app')

@section('title', 'Werbe-Testseite (intern)')
@section('meta_description', 'Interne Sandbox zum Testen der Werbeformate.')
@section('robots', 'noindex, nofollow')

@php
    $dlUrl    = (string) config('propellerads.direct_link', '');
    $variants = config('propellerads.variants', []);
    $formats  = config('propellerads.test_formats', []);
    $pushZone = (string) config('propellerads.push_zone', '');
    // Direct-Link-Fläche: Varianten oft genug wiederholen für eine volle Wand.
    $fill = [];
    for ($i = 0; $i < 18 && $variants; $i++) { $fill[] = $variants[$i % count($variants)]; }
@endphp

@section('content')
<style>
    .wt-wrap { max-width: 1180px; margin: 0 auto; padding: 110px 16px 60px; }
    .wt-head h1 { font-size: clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-.03em; margin:0 0 8px; color:#0f172a; }
    .wt-note { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:14px; padding:14px 18px; font-size:.92rem; margin:14px 0 28px; }
    .wt-panel { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:22px; box-shadow:0 10px 30px -18px rgba(15,23,42,.2); margin-bottom:36px; }
    .wt-panel h2 { font-size:1.15rem; font-weight:800; margin:0 0 4px; color:#0f172a; }
    .wt-panel .sub { color:#64748b; font-size:.88rem; margin:0 0 18px; }
    .wt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
    .wt-fmt { border:1px solid #e2e8f0; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
    .wt-fmt .t { font-weight:800; color:#0f172a; }
    .wt-fmt .n { color:#64748b; font-size:.8rem; line-height:1.4; flex:1; }
    .wt-btn { border:0; cursor:pointer; border-radius:999px; padding:.6rem 1rem; font-weight:800; font-size:.85rem;
        color:#fff; background:linear-gradient(135deg, var(--primary,#2563eb), var(--accent-2,#FF5D2E)); }
    .wt-btn:disabled { background:#e2e8f0; color:#94a3b8; cursor:not-allowed; }
    .wt-btn.is-on { background:#16a34a; }
    .wt-miss { font-size:.72rem; font-weight:800; color:#dc2626; text-transform:uppercase; letter-spacing:.06em; }
    .wt-ok   { font-size:.72rem; font-weight:800; color:#16a34a; text-transform:uppercase; letter-spacing:.06em; }
    /* Direct-Link-Wand */
    .wt-section-label { font-size:.62rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#94a3b8; margin:0 0 10px; }
    .wt-fill { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
    .wt-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; text-decoration:none;
        padding:18px 14px; border-radius:14px; border:1px solid #e2e8f0; background:linear-gradient(160deg,#fff,#f8fafc);
        transition:transform .15s ease, box-shadow .15s ease; }
    .wt-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(15,23,42,.22); }
    .wt-card-art { width:50px; height:50px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:1.4rem;
        background:linear-gradient(135deg, var(--primary,#2563eb), var(--accent-2,#FF5D2E)); }
    .wt-card .ct { font-weight:800; color:#0f172a; font-size:.9rem; line-height:1.25; }
    .wt-card .cs { color:#64748b; font-size:.74rem; }
    .wt-card .cc { font-weight:800; color:var(--primary,#2563eb); font-size:.78rem; }
    .wt-bar { width:100%; margin:18px 0; padding:18px 20px; border-radius:16px; text-decoration:none; display:flex; align-items:center; gap:16px;
        color:#fff; background:linear-gradient(135deg, var(--primary,#2563eb), var(--accent-2,#FF5D2E)); font-weight:800; }
</style>

<div class="wt-wrap">
    <div class="wt-head">
        <h1>🧪 Werbe-Testseite</h1>
        <p style="color:#64748b;margin:0;">Sandbox — hier kannst du jedes Monetag-Format einzeln zünden und beobachten.</p>
    </div>

    <div class="wt-note">
        <strong>Hinweis:</strong> Diese Seite ist <strong>noindex</strong> (nicht bei Google) und nur zum Testen.
        Schick keinen echten Traffic hierher. Die schweren Formate werden erst per Klick geladen.
    </div>

    {{-- ── Steuerpanel: jedes Format per Knopf ── --}}
    <div class="wt-panel">
        <h2>Formate einzeln laden</h2>
        <p class="sub">Klick auf „Laden" zündet das jeweilige Format. Fehlt der Tag, ist der Knopf grau — dann im Monetag-Dashboard die Zone anlegen und mir den Tag schicken.</p>
        <div class="wt-grid">
            @foreach($formats as $key => $f)
                @php $ready = !empty($f['src']); @endphp
                <div class="wt-fmt">
                    <div class="t">{{ $f['label'] }} @if($ready)<span class="wt-ok">● Tag da</span>@else<span class="wt-miss">● Tag fehlt</span>@endif</div>
                    <div class="n">{{ $f['note'] ?? '' }}</div>
                    <button class="wt-btn" type="button"
                        @if($ready) data-src="{{ $f['src'] }}" @if(!empty($f['zone'])) data-zone="{{ $f['zone'] }}" @endif onclick="wtLoad(this)" @else disabled @endif>
                        {{ $ready ? 'Laden ▶' : 'Tag fehlt' }}
                    </button>
                </div>
            @endforeach

            {{-- Push separat (Service Worker) --}}
            <div class="wt-fmt">
                <div class="t">Push Notifications @if($pushZone)<span class="wt-ok">● Tag da</span>@else<span class="wt-miss">● Tag fehlt</span>@endif</div>
                <div class="n">Browser-Benachrichtigungen über Service Worker. Zahlt pro Abo/Klick. Läuft im Hintergrund.</div>
                <button class="wt-btn" type="button" @if($pushZone) onclick="wtPush(this)" @else disabled @endif>
                    {{ $pushZone ? 'Push aktivieren ▶' : 'Tag fehlt' }}
                </button>
            </div>
        </div>
    </div>

    {{-- ── Direct-Link-Wand (immer sichtbar, passiv, zahlt pro Klick) ── --}}
    @if($dlUrl !== '')
    <p class="wt-section-label">Anzeige · Direct-Link-Banner (zahlen pro Klick)</p>

    <a class="wt-bar" href="{{ $dlUrl }}" target="_blank" rel="sponsored nofollow noopener">
        <i class="fa-solid fa-bullhorn"></i> Angebote unserer Partner — jetzt ansehen &rarr;
    </a>

    <div class="wt-fill">
        @foreach($fill as $v)
            <a class="wt-card" href="{{ $dlUrl }}" target="_blank" rel="sponsored nofollow noopener">
                <span class="wt-card-art"><i class="fa-solid {{ $v['i'] }}"></i></span>
                <span class="ct">{{ $v['t'] }}</span>
                <span class="cs">{{ $v['c'] }}</span>
                <span class="cc">Jetzt ansehen &rarr;</span>
            </a>
        @endforeach
    </div>

    <a class="wt-bar" href="{{ $dlUrl }}" target="_blank" rel="sponsored nofollow noopener">
        <i class="fa-solid fa-gift"></i> Top-Angebote für dich — ein Blick lohnt sich &rarr;
    </a>
    @endif
</div>

<script>
    function wtLoad(btn) {
        var src = btn.getAttribute('data-src');
        if (!src) return;
        var s = document.createElement('script');
        s.src = src;
        var z = btn.getAttribute('data-zone');
        if (z) s.dataset.zone = z;
        s.async = true;
        s.setAttribute('data-cfasync', 'false');
        (document.body || document.documentElement).appendChild(s);
        btn.classList.add('is-on');
        btn.textContent = 'Geladen ✓';
        btn.disabled = true;
    }
    function wtPush(btn) {
        if (!('serviceWorker' in navigator)) { alert('Service Worker nicht verfügbar.'); return; }
        navigator.serviceWorker.register('/sw.js').then(function () {
            btn.classList.add('is-on'); btn.textContent = 'Aktiviert ✓'; btn.disabled = true;
        }).catch(function (e) { alert('Push-Fehler: ' + e); });
    }
</script>
@endsection