@extends('layouts.app')

@php
    $reg = new \App\Support\SubdomainRegistry();
    $en  = $reg->currentLocale() === 'en';
    $lc  = $en ? 'en' : 'de';
    $t   = fn ($de, $enT) => $en ? $enT : $de;
    $lbl = fn (array $o) => $en ? $o[2] : $o[1]; // [value, de, en]
@endphp

@section('title', $t('Ein Problem schildern — ProblemRadar', 'Report a problem — ProblemRadar'))
@section('meta_description', $t('Schildere kurz ein konkretes Problem aus deinem Alltag. Anonym und freiwillig.', 'Briefly describe a specific problem from your daily life. Anonymous and voluntary.'))

@section('content')
@include('umfrage._shell')

<div class="u-progress"><div class="u-progress-bar" data-progress-bar></div></div>

<section class="u-shell" style="padding:48px 0 90px;">
    <div class="u-container" style="max-width:680px;">
        <span class="u-eyebrow"><span class="u-dot"></span> {{ $t('Schnell-Eingabe', 'Quick report') }}</span>
        <h1 class="u-display" style="font-size:clamp(2rem,5vw,3.4rem); margin-top:16px;">
            {{ $t('Ein Problem,', 'One problem,') }} <span class="u-grad-text">{{ $t('das dich nervt', 'that bugs you') }}</span>
        </h1>
        <p class="u-lead">{{ $t('Kurz und ohne langen Fragebogen. Alle Angaben sind freiwillig und anonym.', 'Short and without a long questionnaire. All details are voluntary and anonymous.') }}</p>

        @if ($errors->any())
            <div class="u-errs" role="alert">
                <strong>{{ $t('Bitte korrigiere folgende Eingaben:', 'Please correct the following:') }}</strong>
                <ul>@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        <form class="u-panel u-reveal" method="POST" action="{{ route('umfrage.problem.store') }}" data-progress-form style="padding:30px; margin-top:26px;">
            @csrf
            <input type="hidden" name="lang" value="{{ $lc }}">
            <div style="position:absolute;left:-9999px;" aria-hidden="true">
                <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
            </div>

            <div class="u-q" style="margin-top:0;">
                <label class="u-label" for="pa">{{ $t('Problembereich', 'Problem area') }} <span class="u-req">*</span></label>
                <select class="u-select @error('problem_area') u-invalid @enderror" id="pa" name="problem_area" data-other-select="problem_area">
                    <option value="">{{ $t('Bitte wählen …', 'Please choose …') }}</option>
                    @foreach ($areas as $a)
                        <option value="{{ $a[0] }}" @selected(old('problem_area') === $a[0])>{{ $lbl($a) }}</option>
                    @endforeach
                </select>
                @php $paOther = old('problem_area') === 'andere'; @endphp
                <div class="u-other-wrap" data-other-wrap="problem_area" style="margin-top:12px;{{ $paOther ? '' : 'display:none;' }}">
                    <input class="u-input" type="text" name="problem_area_other" maxlength="255" value="{{ old('problem_area_other') }}"
                           placeholder="{{ $t('Welcher Bereich? Bitte kurz benennen …', 'Which area? Please name it briefly …') }}"
                           aria-label="{{ $t('Anderer Bereich — bitte benennen', 'Other area — please name it') }}" {{ $paOther ? '' : 'disabled' }}>
                </div>
                @error('problem_area')<p class="u-field-err"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>@enderror
            </div>

            <div class="u-q">
                <label class="u-label" for="pd">{{ $t('Was funktioniert schlecht?', 'What works badly?') }} <span class="u-req">*</span></label>
                <textarea class="u-textarea @error('problem_description') u-invalid @enderror" id="pd" name="problem_description" placeholder="{{ $t('Beschreibe möglichst konkret, was dich stört, Zeit kostet oder zu Fehlern führt.', 'Describe as concretely as possible what bothers you, costs time or causes errors.') }}">{{ old('problem_description') }}</textarea>
                @error('problem_description')<p class="u-field-err"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>@enderror
                <p class="u-help" style="margin:10px 0 0;">{{ $t('Bitte keine Passwörter, vollständigen Adressen, Diagnosen oder vertraulichen Firmendaten eingeben.', 'Please do not enter passwords, full addresses, diagnoses or confidential company data.') }}</p>
            </div>

            <div class="u-q">
                <label class="u-label" for="pf">{{ $t('Wie häufig tritt das Problem auf?', 'How often does it occur?') }} <span class="u-req">*</span></label>
                <select class="u-select @error('problem_frequency') u-invalid @enderror" id="pf" name="problem_frequency">
                    <option value="">{{ $t('Bitte wählen …', 'Please choose …') }}</option>
                    @foreach ($frequencies as $f)
                        <option value="{{ $f[0] }}" @selected(old('problem_frequency') === $f[0])>{{ $lbl($f) }}</option>
                    @endforeach
                </select>
                @error('problem_frequency')<p class="u-field-err"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>@enderror
            </div>

            <div class="u-q">
                <label class="u-label">{{ $t('Wie stark stört dich das Problem?', 'How much does it bother you?') }} <span class="u-req">*</span> <span class="u-opt">(0–10)</span></label>
                <div class="u-sev" style="margin-top:8px;">
                    <input type="range" name="severity_score" min="0" max="10" value="{{ old('severity_score', 5) }}"
                           data-sev="prSev" data-sev-labels="{{ $t('kaum|spürbar|nervig|stark|sehr stark', 'minor|noticeable|annoying|strong|severe') }}">
                    <span class="u-sev-val"><b id="prSev">{{ old('severity_score', 5) }}</b><span id="prSev_l"></span></span>
                </div>
            </div>

            <div class="u-q">
                <label class="u-label" for="cs">{{ $t('Wie löst du es aktuell?', 'How do you currently solve it?') }} <span class="u-opt">({{ $t('freiwillig', 'optional') }})</span></label>
                <textarea class="u-textarea" id="cs" name="current_solution_description" placeholder="{{ $t('Welche Apps, Tabellen, Zettel oder Methoden nutzt du derzeit?', 'Which apps, spreadsheets, notes or methods do you use?') }}">{{ old('current_solution_description') }}</textarea>
            </div>

            <div class="u-q">
                <label class="u-label" for="on">{{ $t('Name oder Vorname', 'Name or first name') }} <span class="u-opt">({{ $t('freiwillig', 'optional') }})</span></label>
                <input class="u-input" id="on" type="text" name="optional_name" maxlength="120" value="{{ old('optional_name') }}">
                <p class="u-help" style="margin:10px 0 0;">{{ $t('Du kannst vollständig ohne Namen absenden. Dein Name erscheint nie in Statistiken.', 'You can submit completely without a name. Your name never appears in statistics.') }}</p>
            </div>

            <div class="u-q">
                <label class="u-label" for="ag">{{ $t('Altersgruppe', 'Age group') }} <span class="u-opt">({{ $t('freiwillig', 'optional') }})</span></label>
                <select class="u-select" id="ag" name="age_group">
                    <option value="">{{ $t('keine Angabe', 'prefer not to say') }}</option>
                    @foreach ($ageGroups as $g)
                        <option value="{{ $g[0] }}" @selected(old('age_group') === $g[0])>{{ $lbl($g) }}</option>
                    @endforeach
                </select>
            </div>

            <button type="submit" class="u-btn u-btn-primary" style="margin-top:22px;"><i class="fa-solid fa-paper-plane"></i> {{ $t('Problem absenden', 'Submit problem') }}</button>
            <div class="u-note" style="margin-top:16px;">
                <i class="fa-solid fa-lock"></i>
                <span>{{ $t('Mit dem Absenden stimmst du der anonymen, statistischen Auswertung zu. Es wird keine E-Mail-Adresse abgefragt.', 'By submitting you agree to anonymous, statistical evaluation. No email address is requested.') }}</span>
            </div>
        </form>
    </div>
</section>
@endsection