@extends('layouts.app')

@section('title', 'Fehler melden')

@section('nav')
    <a href="{{ route('tickets.listed') }}">Schon gemeldete Fehler</a>
@endsection

@php
    $campaign = config('bugportal.campaign');
    $endsAt = $campaign['ends_at'] ? \Illuminate\Support\Carbon::parse($campaign['ends_at']) : null;
    $running = ! $endsAt || $endsAt->isFuture();
@endphp

@section('content')
    <h1 class="page-title">Fehler gefunden? Dann her damit.</h1>
    <p class="page-intro">
        Wir haben unseren Shop neu gebaut. Ein Umbau dieser Größe läuft nie ohne Fehler –
        und Sie sehen Dinge, die uns entgehen. Melden Sie, was Ihnen auffällt.
    </p>

    @if ($running)
        <div class="promo">
            <div class="promo__figure">
                <span class="promo__num">{{ $campaign['percent_per_bug'] }}&thinsp;%</span>
                <span class="promo__unit">je bestätigtem Fehler</span>
            </div>
            <div class="promo__text">
                <p>
                    Für jeden bestätigten Fehler, den noch niemand gemeldet hat, schreiben wir Ihnen
                    <strong>{{ $campaign['percent_per_bug'] }}&nbsp;%</strong> auf Ihr Fehlerkonto gut –
                    kumulativ bis <strong>{{ $campaign['max_percent'] }}&nbsp;%</strong> bei
                    {{ intdiv($campaign['max_percent'], $campaign['percent_per_bug']) }} Fehlern,
                    einlösbar bei Ihrer nächsten Bestellung.
                </p>
                <ul class="promo__rules">
                    <li>Es zählt die <strong>erste</strong> Meldung – <a href="{{ route('tickets.listed') }}">schauen Sie kurz in die Liste</a>, ob der Fehler schon drin ist.</li>
                    <li>Wir melden uns innerhalb von {{ $campaign['response_workdays'] }} Werktagen. Erst unsere Bestätigung schreibt gut.</li>
                    <li>Für die Gutschrift brauchen Sie ein Kundenkonto im Shop und einen bestätigten Newsletter.</li>
                    <li>Wünsche und Geschmacksfragen sind willkommen, aber nicht rabattfähig.</li>
                    @if ($endsAt)<li>Die Aktion läuft bis zum {{ $endsAt->format('d.m.Y') }}.</li>@endif
                </ul>
            </div>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert--error">
            <strong>Bitte prüfen Sie noch diese Angaben:</strong>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($listed->isNotEmpty())
        <details class="peek">
            <summary>Zuletzt gemeldet – ist Ihr Fehler schon dabei? ({{ $listed->count() }} von vielen)</summary>
            <ul class="peek__list">
                @foreach ($listed as $item)
                    <li>
                        <span class="badge badge--{{ ['new'=>'new','confirmed'=>'accepted','in_progress'=>'progress','waiting_customer'=>'waiting','fixed'=>'done'][$item->status] ?? 'muted' }}">{{ $item->publicStatusLabel() }}</span>
                        <span>{{ $item->title }}</span>
                    </li>
                @endforeach
            </ul>
            <p><a href="{{ route('tickets.listed') }}">Vollständige Liste ansehen und durchsuchen</a></p>
        </details>
    @endif

    <form method="POST" action="{{ route('tickets.store') }}" enctype="multipart/form-data" novalidate id="report-form">
        @csrf
        <input type="hidden" name="rendered_at" value="{{ time() }}">
        <input type="hidden" name="channel" value="{{ $channel }}">
        @foreach ($utm as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach
        <div class="honeypot" aria-hidden="true">
            <label>Website (bitte frei lassen)
                <input type="text" name="website" value="" tabindex="-1" autocomplete="off">
            </label>
        </div>

        <div class="card">
            <h2 class="card__title">1. Worum geht es?</h2>
            <p class="card__hint">Damit wir Ihre Meldung richtig einsortieren.</p>

            <fieldset class="fieldset">
                <legend>Art der Meldung</legend>
                <div class="choice-grid choice-grid--three">
                    <label class="choice">
                        <input type="radio" name="type" value="bug" data-type
                               @checked(old('type', 'bug') === 'bug')>
                        <span>
                            <strong>Fehler</strong>
                            <span>Etwas funktioniert nicht oder stimmt nicht.</span>
                            <span class="choice__tag choice__tag--pay">{{ $campaign['percent_per_bug'] }} % möglich</span>
                        </span>
                    </label>
                    <label class="choice">
                        <input type="radio" name="type" value="feature" data-type
                               @checked(old('type') === 'feature')>
                        <span>
                            <strong>Wunsch</strong>
                            <span>Etwas fehlt oder könnte besser sein.</span>
                            <span class="choice__tag">ohne Rabatt</span>
                        </span>
                    </label>
                    <label class="choice">
                        <input type="radio" name="type" value="security" data-type
                               @checked(old('type') === 'security')>
                        <span>
                            <strong>Sicherheitsproblem</strong>
                            <span>Daten oder Konten sind gefährdet.</span>
                            <span class="choice__tag choice__tag--care">vertraulich</span>
                        </span>
                    </label>
                </div>
                @error('type') <p class="error">{{ $message }}</p> @enderror
            </fieldset>

            <div class="note note--security" data-when="security" hidden>
                <strong>Danke, dass Sie uns das vertraulich melden.</strong>
                Sicherheitsmeldungen gehen nur an unser Technikteam, erscheinen nie in der öffentlichen
                Liste und werden erst nach der Behebung erwähnt – ohne technische Details. Bitte schildern
                Sie den Weg möglichst genau und veröffentlichen Sie ihn nirgends.
            </div>

            <div class="note note--wish" data-when="feature" hidden>
                Wünsche lesen wir alle und viele setzen wir um. Rabattfähig sind laut Aktionsbedingungen
                aber nur Fehler – Geschmacksfragen zum Design, Sortimentswünsche und das Preisniveau
                zählen nicht dazu.
            </div>

            <fieldset class="fieldset" data-when="bug">
                <legend>Was für ein Fehler ist es?</legend>
                <div class="choice-grid">
                    @foreach (\App\Models\Ticket::CATEGORIES as $value => $label)
                        <label class="choice">
                            <input type="radio" name="category" value="{{ $value }}"
                                   @checked(old('category') === $value)>
                            <span>
                                <strong>{{ $label }}</strong>
                                <span>{{ \App\Models\Ticket::CATEGORY_HINTS[$value] }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
                @error('category') <p class="error">{{ $message }}</p> @enderror
            </fieldset>

            <div class="field">
                <label for="title">Kurz in einem Satz</label>
                <input type="text" id="title" name="title" maxlength="150" required
                       placeholder="z. B. Warenkorb ist nach dem Anmelden leer"
                       value="{{ old('title') }}">
                @error('title') <p class="error">{{ $message }}</p> @enderror
            </div>

            <div class="field">
                <label for="description">Beschreibung</label>
                <p class="field__hint">Was ist passiert – und was hatten Sie stattdessen erwartet?</p>
                <textarea id="description" name="description" maxlength="5000" required
                          placeholder="Beschreiben Sie möglichst konkret, was Sie beobachtet haben.">{{ old('description') }}</textarea>
                @error('description') <p class="error">{{ $message }}</p> @enderror
            </div>

            <div class="field">
                <label for="steps">Was haben Sie gemacht, bevor es passiert ist? <span class="muted">(optional, hilft uns sehr)</span></label>
                <p class="field__hint">Am besten Schritt für Schritt – so können wir es bei uns nachstellen.</p>
                <textarea id="steps" name="steps" maxlength="5000"
                          placeholder="1. Liquid in den Warenkorb gelegt&#10;2. Auf „Zur Kasse“ geklickt&#10;3. Angemeldet – Warenkorb war leer">{{ old('steps') }}</textarea>
                @error('steps') <p class="error">{{ $message }}</p> @enderror
            </div>

            <fieldset class="fieldset">
                <legend>Wie sehr stört Sie das beim Einkaufen?</legend>
                <div class="choice-grid">
                    @foreach (\App\Models\Ticket::IMPACTS as $value => $label)
                        <label class="choice">
                            <input type="radio" name="impact" value="{{ $value }}"
                                   @checked(old('impact', 'normal') === $value)>
                            <span><strong>{{ $label }}</strong></span>
                        </label>
                    @endforeach
                </div>
                @error('impact') <p class="error">{{ $message }}</p> @enderror
            </fieldset>
        </div>

        <div class="card">
            <h2 class="card__title">2. Wo tritt es auf?</h2>
            <p class="card__hint">Optional – spart uns aber oft viel Suchzeit.</p>

            <div class="grid-2">
                <div class="field">
                    <label for="page_url">Auf welcher Seite war das?</label>
                    <input type="text" id="page_url" name="page_url" maxlength="500"
                           placeholder="www.riccardo-zigarette.de/warenkorb" value="{{ old('page_url') }}">
                    @error('page_url') <p class="error">{{ $message }}</p> @enderror
                </div>
                <div class="field">
                    <label for="environment">Gerät und Browser</label>
                    <input type="text" id="environment" name="environment" maxlength="255"
                           placeholder="z. B. iPhone / Safari oder Windows / Chrome"
                           value="{{ old('environment') }}">
                    @error('environment') <p class="error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="field">
                <label for="attachments">Screenshots oder Dateien</label>
                <p class="field__hint">
                    Bis zu 5 Dateien, je maximal 10 MB. Ein Screenshot oder Foto vom Bildschirm ist
                    meistens der schnellste Weg zur Lösung.
                </p>
                <input type="file" id="attachments" name="attachments[]" multiple
                       accept="image/*,video/mp4,video/webm,application/pdf,.txt,.log">
                @error('attachments') <p class="error">{{ $message }}</p> @enderror
                @error('attachments.*') <p class="error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="card">
            <h2 class="card__title">3. Wie erreichen wir Sie?</h2>
            <p class="card__hint">Damit wir nachfragen können und Sie Bescheid bekommen, sobald es behoben ist.</p>

            <div class="grid-2">
                <div class="field">
                    <label for="reporter_name">Ihr Name</label>
                    <input type="text" id="reporter_name" name="reporter_name" maxlength="100" required
                           value="{{ old('reporter_name') }}" autocomplete="name">
                    @error('reporter_name') <p class="error">{{ $message }}</p> @enderror
                </div>
                <div class="field">
                    <label for="reporter_email">E-Mail-Adresse</label>
                    <p class="field__hint">Am besten die Adresse Ihres Newsletters – darüber läuft das Fehlerkonto.</p>
                    <input type="email" id="reporter_email" name="reporter_email" maxlength="150" required
                           value="{{ old('reporter_email') }}" autocomplete="email">
                    @error('reporter_email') <p class="error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="grid-2">
                <div class="field">
                    <label for="customer_number">Kundennummer <span class="muted">(für die Gutschrift)</span></label>
                    <p class="field__hint">Steht in Ihrem Kundenkonto und in jeder Bestellbestätigung.</p>
                    <input type="text" id="customer_number" name="customer_number" maxlength="60"
                           value="{{ old('customer_number') }}">
                    @error('customer_number') <p class="error">{{ $message }}</p> @enderror
                </div>
                <div class="field">
                    <label for="order_number">Bestellnummer <span class="muted">(optional)</span></label>
                    <p class="field__hint">Falls es um eine konkrete Bestellung geht.</p>
                    <input type="text" id="order_number" name="order_number" maxlength="60"
                           value="{{ old('order_number') }}">
                    @error('order_number') <p class="error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="field" data-when="bug feature">
                <label class="check">
                    <input type="checkbox" name="publish_consent" value="1" data-consent @checked(old('publish_consent'))>
                    <span>
                        Sie dürfen mich in der öffentlichen Fehlerliste nennen – mit Vorname und Ort.
                        <span class="muted">Freiwillig. Ohne Häkchen erscheint Ihre Meldung anonym.</span>
                    </span>
                </label>
            </div>

            <div class="field" data-consent-city hidden>
                <label for="publish_city">Ort für die Nennung</label>
                <input type="text" id="publish_city" name="publish_city" maxlength="80"
                       placeholder="z. B. Essen" value="{{ old('publish_city') }}">
                @error('publish_city') <p class="error">{{ $message }}</p> @enderror
            </div>

            <div class="field">
                <label class="check">
                    <input type="checkbox" name="privacy" value="1" @checked(old('privacy'))>
                    <span>
                        Ich bin damit einverstanden, dass meine Angaben zur Bearbeitung dieser Meldung
                        gespeichert und verarbeitet werden.
                    </span>
                </label>
                @error('privacy') <p class="error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn--primary">Meldung absenden</button>
            <p>Sie erhalten anschließend eine Vorgangsnummer und eine Bestätigung per E-Mail.</p>
        </div>
    </form>

    <script>
        // Zeigt nur, was zur gewählten Art passt. Ohne JavaScript bleibt alles
        // sichtbar und der Server prüft die Pflichtfelder genauso.
        (function () {
            var form = document.getElementById('report-form');
            if (!form) return;

            var conditional = form.querySelectorAll('[data-when]');
            var consent = form.querySelector('[data-consent]');
            var cityField = form.querySelector('[data-consent-city]');

            function currentType() {
                var checked = form.querySelector('[data-type]:checked');
                return checked ? checked.value : 'bug';
            }

            function sync() {
                var type = currentType();
                conditional.forEach(function (el) {
                    el.hidden = el.dataset.when.split(' ').indexOf(type) === -1;
                });
                if (cityField && consent) {
                    cityField.hidden = !consent.checked;
                }
            }

            form.querySelectorAll('[data-type]').forEach(function (input) {
                input.addEventListener('change', sync);
            });
            if (consent) consent.addEventListener('change', sync);

            sync();
        })();
    </script>
@endsection