@extends('layouts.app')

@section('title', 'Feedback geben - KOTSCH.TECH')
@section('meta_description', 'Feedback, Kritik, Verbesserungen und Wünsche zu Apps, Software, Websites und Web-Tools von KOTSCH.TECH senden.')

@push('head')
<style>
    .fb-shell { padding: 118px 20px 96px; position: relative; overflow: hidden;
        background:
            radial-gradient(70% 55% at 82% -8%, rgba(255,93,46,.14), transparent 60%),
            radial-gradient(60% 50% at 8% 4%, rgba(37,99,235,.12), transparent 60%),
            #f6f8fc;
    }
    .fb-wrap { max-width: 940px; margin: 0 auto; display: grid; gap: 30px; position: relative; z-index: 1; }

    .fb-hero { text-align: center; max-width: 720px; margin: 0 auto; display: grid; gap: 15px; }
    .fb-kicker { display:inline-flex; align-items:center; gap:8px; justify-self:center; color: var(--primary);
        font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem;
        background:#fff; border:1px solid #e2e8f0; padding:7px 14px; border-radius:999px; box-shadow:0 6px 18px -12px rgba(15,23,42,.4); }
    .fb-hero h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -.03em; font-weight: 800;
        background: linear-gradient(120deg,#0f172a 30%, var(--primary) 70%, var(--accent-2) 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .fb-hero p { margin: 0; color: #475569; font-size: 1.1rem; line-height: 1.65; }

    .fb-panel { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid #e6ebf3; border-radius: 26px;
        padding: clamp(22px, 4vw, 38px); box-shadow: 0 40px 90px -50px rgba(15,23,42,.55), 0 2px 6px -3px rgba(15,23,42,.08); }

    /* Typ-Karten */
    .fb-block-label { color:#0f172a; font-weight:800; font-size:1.06rem; letter-spacing:-.01em; margin:0 0 13px; display:flex; align-items:center; gap:9px; }
    .fb-block-label .n { width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent-2));color:#fff;font-size:.78rem;font-weight:800; }
    .fb-types { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
    .fb-type { border:1.5px solid #e2e8f0; background:#fff; border-radius:16px; padding:16px 12px; cursor:pointer; text-align:center;
        display:grid; gap:9px; justify-items:center; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
    .fb-type:hover { transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(15,23,42,.4); }
    .fb-type i { font-size:1.35rem; color:#64748b; transition:color .14s; }
    .fb-type span { font-weight:800; font-size:.9rem; color:#334155; }
    .fb-type.is-on { border-color:transparent; background:linear-gradient(135deg,#eef3fe,#fff1ec);
        box-shadow:0 0 0 2px var(--primary) inset, 0 16px 34px -20px rgba(37,99,235,.6); }
    .fb-type.is-on i, .fb-type.is-on span { color:var(--primary); }

    .fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .fb-field { display: grid; gap: 8px; }
    .fb-field-full { grid-column: 1 / -1; }
    .fb-label { color: #334155; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
    .fb-input, .fb-select, .fb-textarea { width: 100%; border: 1.5px solid #dbe3ef; border-radius: 13px; background: #fff; color: #0f172a; font: inherit; padding: 13px 15px; outline: none; transition: border-color .18s, box-shadow .18s; }
    .fb-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
    .fb-input:focus, .fb-select:focus, .fb-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.16); }
    .fb-help { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.5; }
    .fb-error { color: #b91c1c; font-size: .85rem; margin: 0; font-weight:600; }
    .fb-errors { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 14px; padding: 15px 18px; }
    .fb-errors ul { margin:8px 0 0; padding-left:18px; }

    /* Sterne */
    .fb-stars { display:flex; gap:8px; align-items:center; }
    .fb-star { font-size:1.9rem; color:#dbe3ef; cursor:pointer; transition:transform .1s, color .12s; line-height:1; }
    .fb-star:hover { transform:scale(1.15); }
    .fb-star.is-lit { color:#f59e0b; }
    .fb-stars-hint { color:#64748b; font-size:.9rem; font-weight:700; margin-left:6px; }

    .fb-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
    .fb-button { border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: #fff; padding: 16px 26px; font: inherit; font-size:1.05rem; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 11px; box-shadow:0 18px 40px -16px rgba(37,99,235,.65); transition:transform .15s, filter .15s; }
    .fb-button:hover { transform:translateY(-2px); filter:brightness(1.04); }
    .fb-note { display: flex; gap: 10px; align-items: flex-start; color: #64748b; font-size: .86rem; max-width: 460px; }
    .fb-hidden { display: none !important; }
    @media (max-width: 720px) {
        .fb-shell { padding-top: 92px; }
        .fb-types { grid-template-columns: repeat(2,1fr); }
        .fb-grid { grid-template-columns: 1fr; }
        .fb-actions { flex-direction:column-reverse; align-items:stretch; }
        .fb-button { justify-content:center; }
    }
</style>
@endpush

@section('content')
<section class="fb-shell">
    <div class="fb-wrap">
        <div class="fb-hero">
            <span class="fb-kicker"><i class="fas fa-comment-dots"></i> Feedback</span>
            <h1>Sag uns, was du denkst.</h1>
            <p>Ob Fehler, Idee, Kritik oder Lob — dein Feedback macht die Apps, Tools und Websites von KOTSCH.TECH besser. Dauert keine Minute.</p>
        </div>

        @if ($errors->any())
            <div class="fb-errors" role="alert">
                <strong>Bitte korrigiere die markierten Eingaben.</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form class="fb-panel" method="POST" action="{{ route('feedback.store') }}" data-feedback-form>
            @csrf
            <div style="position:absolute;left:-9999px;" aria-hidden="true">
                <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
            </div>

            {{-- Feedback-Typ als Karten --}}
            @php $typeIcons = ['improvement'=>'fa-arrow-trend-up','criticism'=>'fa-comment-dots','bug'=>'fa-bug','wish'=>'fa-lightbulb','praise'=>'fa-star','other'=>'fa-ellipsis']; @endphp
            <p class="fb-block-label"><span class="n">1</span> Worum geht's?</p>
            <input type="hidden" name="feedback_type" id="feedback_type" value="{{ old('feedback_type', 'improvement') }}">
            <div class="fb-types" data-type-cards>
                @foreach($types as $value => $label)
                    <button type="button" class="fb-type" data-type="{{ $value }}" aria-pressed="false">
                        <i class="fas {{ $typeIcons[$value] ?? 'fa-comment' }}" aria-hidden="true"></i>
                        <span>{{ $label }}</span>
                    </button>
                @endforeach
            </div>
            @error('feedback_type')<p class="fb-error" style="margin:-16px 0 16px">{{ $message }}</p>@enderror

            <p class="fb-block-label"><span class="n">2</span> Wozu?</p>
            <div class="fb-grid">
                <div class="fb-field">
                    <label class="fb-label" for="category">Bereich</label>
                    <select class="fb-select" id="category" name="category" data-feedback-category required>
                        @foreach($catalog['categories'] as $category)
                            <option value="{{ $category['value'] }}" @selected(old('category', 'apps') === $category['value'])>{{ $category['label'] }}</option>
                        @endforeach
                    </select>
                    @error('category')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field" data-platform-wrap>
                    <label class="fb-label" for="platform">Plattform</label>
                    <select class="fb-select" id="platform" name="platform" data-feedback-platform>
                        @foreach($catalog['platforms'] as $platform)
                            <option value="{{ $platform['value'] }}" @selected(old('platform') === $platform['value'])>{{ $platform['label'] }}</option>
                        @endforeach
                    </select>
                    @error('platform')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field fb-field-full">
                    <label class="fb-label" for="target_key">Konkretes Ziel</label>
                    <select class="fb-select" id="target_key" name="target_key" data-feedback-target data-old-target="{{ old('target_key') }}"></select>
                    <p class="fb-help">Die Liste passt sich an Bereich und Plattform an.</p>
                    @error('target_key')<p class="fb-error">{{ $message }}</p>@enderror
                </div>
            </div>

            <p class="fb-block-label" style="margin-top:26px"><span class="n">3</span> Erzähl's uns</p>
            <div class="fb-grid">
                <div class="fb-field fb-field-full">
                    <label class="fb-label" for="message">Dein Feedback</label>
                    <textarea class="fb-textarea" id="message" name="message" required placeholder="Was funktioniert nicht gut, was fehlt, was sollte besser werden?">{{ old('message') }}</textarea>
                    @error('message')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field fb-field-full">
                    <label class="fb-label" for="wished_feature">Wunsch oder Idee <span style="color:#94a3b8;font-weight:600;text-transform:none;letter-spacing:0">· optional</span></label>
                    <textarea class="fb-textarea" id="wished_feature" name="wished_feature" style="min-height:100px" placeholder="Welche Funktion wünschst du dir?">{{ old('wished_feature') }}</textarea>
                    @error('wished_feature')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field fb-field-full">
                    <label class="fb-label">Wie zufrieden bist du? <span style="color:#94a3b8;font-weight:600;text-transform:none;letter-spacing:0">· optional</span></label>
                    <input type="hidden" name="rating" id="rating" value="{{ old('rating') }}">
                    <div class="fb-stars" data-stars role="radiogroup" aria-label="Bewertung">
                        @for($i = 1; $i <= 5; $i++)
                            <span class="fb-star" data-star="{{ $i }}" role="radio" aria-label="{{ $i }} von 5" tabindex="0">★</span>
                        @endfor
                        <span class="fb-stars-hint" data-stars-hint></span>
                    </div>
                    @error('rating')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field">
                    <label class="fb-label" for="contact_name">Name <span style="color:#94a3b8;font-weight:600;text-transform:none;letter-spacing:0">· optional</span></label>
                    <input class="fb-input" id="contact_name" type="text" name="contact_name" maxlength="120" value="{{ old('contact_name') }}" placeholder="Wie heißt du?">
                    @error('contact_name')<p class="fb-error">{{ $message }}</p>@enderror
                </div>

                <div class="fb-field">
                    <label class="fb-label" for="contact_email">E-Mail <span style="color:#94a3b8;font-weight:600;text-transform:none;letter-spacing:0">· optional</span></label>
                    <input class="fb-input" id="contact_email" type="email" name="contact_email" maxlength="190" value="{{ old('contact_email') }}" placeholder="Für Rückfragen">
                    @error('contact_email')<p class="fb-error">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="fb-actions">
                <div class="fb-note">
                    <i class="fas fa-lock" aria-hidden="true"></i>
                    <span>Keine Passwörter oder Lizenzschlüssel eintragen. Kontaktangaben sind freiwillig.</span>
                </div>
                <button class="fb-button" type="submit"><i class="fas fa-paper-plane" aria-hidden="true"></i> Feedback abschicken</button>
            </div>
        </form>
    </div>
</section>

<script>
    (function () {
        var catalog = @json($catalog);

        // ── Typ-Karten ──
        var typeInput = document.getElementById('feedback_type');
        var cards = Array.prototype.slice.call(document.querySelectorAll('[data-type-cards] .fb-type'));
        function selectType(value) {
            typeInput.value = value;
            cards.forEach(function (c) {
                var on = c.getAttribute('data-type') === value;
                c.classList.toggle('is-on', on);
                c.setAttribute('aria-pressed', on ? 'true' : 'false');
            });
        }
        cards.forEach(function (c) { c.addEventListener('click', function () { selectType(c.getAttribute('data-type')); }); });
        selectType(typeInput.value || 'improvement');

        // ── Deep-Link-Prefill: Query-Parameter aus den App-SEO-Seiten
        //    (…/feedback?category=apps&target=app:{slug}&type=wish). Wirkt wie old().
        var fbParams = new URLSearchParams(location.search);
        if (fbParams.get('type')) { selectType(fbParams.get('type')); }

        // ── Sterne (1–5 → rating 2..10) ──
        var ratingInput = document.getElementById('rating');
        var stars = Array.prototype.slice.call(document.querySelectorAll('[data-stars] .fb-star'));
        var hint = document.querySelector('[data-stars-hint]');
        var labels = { 1:'Schlecht', 2:'Naja', 3:'Okay', 4:'Gut', 5:'Top!' };
        function paint(n) { stars.forEach(function (s, i) { s.classList.toggle('is-lit', i < n); }); hint.textContent = n ? labels[n] : ''; }
        function setStars(n) { ratingInput.value = n ? n * 2 : ''; paint(n); }
        stars.forEach(function (s, i) {
            s.addEventListener('mouseenter', function () { paint(i + 1); });
            s.addEventListener('click', function () { setStars(i + 1); });
            s.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setStars(i + 1); } });
        });
        document.querySelector('[data-stars]').addEventListener('mouseleave', function () {
            var cur = parseInt(ratingInput.value || '0', 10); paint(cur ? cur / 2 : 0);
        });
        if (ratingInput.value) { setStars(Math.round(parseInt(ratingInput.value, 10) / 2)); }

        // ── Kaskade Kategorie → Plattform → Ziel ──
        var category = document.querySelector('[data-feedback-category]');
        var platform = document.querySelector('[data-feedback-platform]');
        var platformWrap = document.querySelector('[data-platform-wrap]');
        var target = document.querySelector('[data-feedback-target]');
        if (!category || !platform || !target) return;

        var oldTarget = target.getAttribute('data-old-target') || '';
        var oldPlatform = @json(old('platform'));
        // Deep-Link-Prefill (App-SEO-Wunsch-Links): ?category=&platform=&target=.
        // Nur setzen, wenn valide — sonst normaler Kaskaden-Default (kein Invalid-Submit).
        if (fbParams.get('category') && Array.prototype.some.call(category.options, function (o) { return o.value === fbParams.get('category'); })) {
            category.value = fbParams.get('category');
        }
        if (fbParams.get('platform')) { oldPlatform = fbParams.get('platform'); }
        if (fbParams.get('target')) { oldTarget = fbParams.get('target'); }
        var platformLabels = {};
        catalog.platforms.forEach(function (item) { platformLabels[item.value] = item.label; });

        function platformsFor(categoryValue) {
            var targets = catalog.targets[categoryValue] || [];
            var seen = {};
            targets.forEach(function (item) { (item.platforms || ['all']).forEach(function (p) { seen[p] = true; }); });
            return Object.keys(seen).sort(function (a, b) {
                if (a === 'all') return -1; if (b === 'all') return 1;
                return (platformLabels[a] || a).localeCompare(platformLabels[b] || b);
            });
        }
        function fillPlatforms() {
            var values = platformsFor(category.value);
            platform.innerHTML = '';
            values.forEach(function (value) {
                var option = document.createElement('option');
                option.value = value; option.textContent = platformLabels[value] || value; platform.appendChild(option);
            });
            platformWrap.classList.toggle('fb-hidden', values.length <= 1 && values[0] === 'all');
            if (oldPlatform && values.indexOf(oldPlatform) !== -1) { platform.value = oldPlatform; }
        }
        function fillTargets() {
            var categoryTargets = catalog.targets[category.value] || [];
            var platformValue = platform.value;
            var filtered = categoryTargets.filter(function (item) {
                var platforms = item.platforms || ['all'];
                return platforms.indexOf('all') !== -1 || !platformValue || platforms.indexOf(platformValue) !== -1;
            });
            target.innerHTML = '';
            filtered.forEach(function (item) {
                var option = document.createElement('option');
                option.value = item.key; option.textContent = item.label; target.appendChild(option);
            });
            if (oldTarget && filtered.some(function (item) { return item.key === oldTarget; })) { target.value = oldTarget; }
        }
        category.addEventListener('change', function () { oldTarget = ''; oldPlatform = ''; fillPlatforms(); fillTargets(); });
        platform.addEventListener('change', function () { oldTarget = ''; fillTargets(); });
        fillPlatforms(); fillTargets();
    })();
</script>
@endsection