@extends('layouts.app')

@section('title', $configurator['title'].' | Energietec-Plus')
@section('description', $configurator['label'].' in verständlichen Schritten für Ihr Gebäude konfigurieren und direkt an Energietec-Plus senden.')
@section('robots', 'noindex,follow')

@section('content')
    @php
        $steps = $configurator['steps'];
        $finalStep = count($steps);
    @endphp
    <section class="pv-config-section has-configurator-switcher service-config-section service-config-{{ $configurator['slug'] }}">
        @include('services.partials.configurator-switcher', ['activeConfigurator' => $configurator['slug']])
        <form class="pv-configurator" action="{{ route('service-configurator.store', $configurator['service']) }}" method="post" data-service-configurator data-start-step="{{ $errors->any() ? $finalStep : 0 }}" data-config-dependencies='@json($configurator['dependencies'])' data-config-summary-definition='@json($configurator['summary'])' novalidate>
            @csrf
            <input class="honeypot" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">

            <header class="pv-config-progress">
                <div><span>{{ $configurator['mark'] }}</span><p><strong>{{ $configurator['title'] }}</strong><small data-config-progress-label>Schritt 1 von {{ $finalStep + 1 }}</small></p></div>
                <ol aria-label="Fortschritt" style="--config-steps: {{ $finalStep + 1 }}">
                    @foreach($steps as $step)
                        <li data-config-step-indicator="{{ $loop->index }}"><i>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</i><span>{{ $step['short_title'] }}</span></li>
                    @endforeach
                    <li data-config-step-indicator="{{ $finalStep }}"><i>{{ str_pad((string) $finalStep + 1, 2, '0', STR_PAD_LEFT) }}</i><span>Abschluss</span></li>
                </ol>
                <div class="pv-config-progress-line"><i data-config-progress-line></i></div>
            </header>

            @if($errors->any())
                <div class="pv-config-alert" role="alert"><strong>Bitte prüfen Sie die markierten Angaben.</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
            @endif

            <div class="pv-config-stage">
                @foreach($steps as $step)
                    <section class="pv-config-panel" data-config-panel="{{ $loop->index }}" @if(!$loop->first) hidden @endif aria-labelledby="config-step-title-{{ $loop->index }}">
                        <aside class="pv-config-panel-aside service-config-aside service-config-visual-{{ $step['visual'] }}">
                            <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <p>{{ $step['eyebrow'] }}</p>
                            <h2>{{ $step['title'] }}</h2>
                            <div class="service-config-motion" aria-hidden="true">
                                <i>@include('services.partials.visual-icon', ['icon' => $configurator['icon']])</i><span></span><span></span><span></span>
                            </div>
                            <small>Sie müssen nicht alles wissen. Unbekannte optionale Angaben können Sie einfach offenlassen.</small>
                        </aside>
                        <div class="pv-config-panel-content">
                            <header><p>Schritt {{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</p><h3 id="config-step-title-{{ $loop->index }}" tabindex="-1">{{ $step['title'] }}</h3><span>{{ $step['intro'] }}</span></header>
                            @foreach($step['questions'] as $question)
                                @php
                                    $oldValue = old($question['name'], $question['default']);
                                    $isArray = $question['type'] === 'checkbox';
                                    $hasError = $errors->has($question['name']) || $errors->has($question['name'].'.*');
                                @endphp
                                <fieldset class="pv-config-question pv-config-question-{{ $question['style'] }}" data-config-question="{{ $question['name'] }}" data-config-initial="{{ $question['initial'] }}" @if($question['initial'] === 'none') hidden @endif>
                                    <legend>{{ $question['title'] }} @if($question['required'])<span>*</span>@endif</legend>
                                    @if($question['description'])<p>{{ $question['description'] }}</p>@endif
                                    @if($question['type'] === 'text')
                                        <label class="pv-config-text-field"><span>{{ $question['title'] }}</span><input type="text" name="{{ $question['name'] }}" value="{{ old($question['name']) }}" placeholder="{{ $question['placeholder'] }}" @if($question['required']) data-config-required @endif @if($hasError) aria-invalid="true" @endif></label>
                                    @else
                                        <div class="pv-config-options">
                                            @foreach($question['options'] as $option)
                                                @php $checked = $isArray ? in_array($option['value'], old($question['name'], []), true) : $oldValue === $option['value']; @endphp
                                                <label data-config-option-id="{{ $option['id'] }}"><input type="{{ $question['type'] }}" name="{{ $question['name'] }}{{ $isArray ? '[]' : '' }}" value="{{ $option['value'] }}" @checked($checked) @if($question['required']) data-config-required @endif @if($hasError) aria-invalid="true" @endif><span><b class="service-config-option-icon {{ $option['icon'] ? 'is-original' : 'is-generic' }}" aria-hidden="true">@if($option['icon']){!! $option['icon'] !!}@else @include('services.partials.visual-icon', ['icon' => $configurator['icon']]) @endif</b><i aria-hidden="true"></i><strong>{{ $option['value'] }}</strong><small>{{ $question['type'] === 'checkbox' ? 'Mehrfachauswahl möglich' : 'Auswählen' }}</small></span></label>
                                            @endforeach
                                        </div>
                                    @endif
                                    <small class="pv-config-field-error" data-config-error hidden>Bitte ergänzen Sie diese Angabe.</small>
                                </fieldset>
                            @endforeach
                            <footer><button class="pv-config-back" type="button" data-config-back @if($loop->first) disabled @endif><span>←</span> Zurück</button><button class="button button-primary" type="button" data-config-next>Weiter <span>→</span></button></footer>
                        </div>
                    </section>
                @endforeach

                <section class="pv-config-panel pv-config-final" data-config-panel="{{ $finalStep }}" hidden aria-labelledby="config-final-title">
                    <aside class="pv-config-panel-aside service-config-aside service-config-visual-{{ $configurator['icon'] }}">
                        <span>{{ str_pad((string) $finalStep + 1, 2, '0', STR_PAD_LEFT) }}</span><p>Fast geschafft</p><h2>Ihre Anfrage im Überblick</h2>
                        <div class="service-config-motion" aria-hidden="true"><i>@include('services.partials.visual-icon', ['icon' => $configurator['icon']])</i><span></span><span></span><span></span></div>
                        <small>Nach dem Absenden erhalten Sie automatisch eine vollständige Kopie Ihrer Konfiguration per E-Mail.</small>
                    </aside>
                    <div class="pv-config-panel-content">
                        <header><p>Abschluss</p><h3 id="config-final-title" tabindex="-1">Persönliche Angaben</h3><span>Prüfen Sie Ihre Auswahl und ergänzen Sie die Kontaktdaten für unsere persönliche Rückmeldung.</span></header>
                        @include('services.partials.configurator-contact-fields')
                        <section class="pv-config-summary" aria-labelledby="config-summary-title"><header><div><p>Ihre Konfiguration</p><h3 id="config-summary-title">Übersicht Ihrer Angaben</h3></div><button type="button" data-config-edit-first>Angaben bearbeiten</button></header><div data-config-summary></div></section>
                        <label class="pv-config-consent"><input type="checkbox" name="consent" value="1" @checked(old('consent')) data-config-required @error('consent') aria-invalid="true" @enderror><span>Ich habe die <a href="{{ route('privacy') }}" target="_blank" rel="noopener noreferrer">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zur Bearbeitung dieser Anfrage zu. *</span></label>
                        <p class="pv-config-submit-note"><span>✓</span> Unverbindliche Anfrage · Keine automatische Beauftragung · Kopie an Ihre E-Mail-Adresse</p>
                        <footer><button class="pv-config-back" type="button" data-config-back><span>←</span> Zurück</button><button class="button button-primary" type="submit">Konfiguration senden <span>↗</span></button></footer>
                    </div>
                </section>
            </div>
        </form>
    </section>
@endsection
