@extends('layouts.app')

@section('title', 'Photovoltaik-Planer | Energietec-Plus')
@section('description', 'Planen Sie Ihre Photovoltaikanlage in wenigen verständlichen Schritten und senden Sie Ihre Gebäudedaten direkt an Energietec-Plus.')
@section('robots', 'noindex,follow')

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

            <header class="pv-config-progress">
                <div><span>PV</span><p><strong>Photovoltaik-Planer</strong><small data-config-progress-label>Schritt 1 von 6</small></p></div>
                <ol aria-label="Fortschritt">
                    @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="5"><i>06</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 pv-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="pv-config-motion" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
                            <small>Ihre Angaben dienen der Vorbereitung. Die technische Prüfung erfolgt immer am konkreten Gebäude.</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'] }}" @if($question['dependency']) data-config-dependency="{{ $question['dependency'] }}" hidden @endif>
                                    <legend>{{ $question['title'] }} @if($question['required'])<span>*</span>@endif</legend>
                                    <p>{{ $question['description'] }}</p>
                                    @if($question['type'] === 'text')
                                        <label class="pv-config-text-field"><span>{{ $question['title'] }}</span><input @if($question['inputMode'] === 'number') type="number" min="0" max="10000000" inputmode="numeric" @else type="text" @endif 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, old($question['name'], []), true) : $oldValue === $option;
                                                    $optionHint = $question['name'] === 'building_status'
                                                        ? ($option === 'Neubau' ? 'Planung von Beginn an' : 'Nachrüstung oder Erweiterung')
                                                        : ($question['type'] === 'checkbox' ? 'Mehrfachauswahl möglich' : 'Auswählen');
                                                @endphp
                                                <label data-config-option="{{ $option }}"><input type="{{ $question['type'] }}" name="{{ $question['name'] }}{{ $isArray ? '[]' : '' }}" value="{{ $option }}" @checked($checked) @if($question['required']) data-config-required @endif @if($hasError) aria-invalid="true" @endif><span>@include('services.partials.pv-config-icon', ['name' => $question['name'], 'option' => $option])<i aria-hidden="true"></i><strong>{{ $option }}</strong><small>{{ $optionHint }}</small></span></label>
                                            @endforeach
                                        </div>
                                    @endif
                                    <small class="pv-config-field-error" data-config-error hidden>Bitte treffen Sie eine Auswahl.</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="5" hidden aria-labelledby="config-final-title">
                    <aside class="pv-config-panel-aside pv-config-visual-final">
                        <span>06</span><p>Fast geschafft</p><h2>Ihre Anfrage im Überblick</h2>
                        <div class="pv-config-motion" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></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>Ihre Konfiguration ist vorbereitet. Ergänzen Sie jetzt Ihre Kontaktdaten und prüfen Sie anschließend alle Angaben.</span></header>
                        <div class="pv-config-contact-grid">
                            <label><span>Ihr Name *</span><input type="text" name="name" value="{{ old('name') }}" autocomplete="name" data-config-required @error('name') aria-invalid="true" @enderror></label>
                            <label><span>Telefonnummer</span><input type="tel" name="phone" value="{{ old('phone') }}" autocomplete="tel"></label>
                            <label class="span-full"><span>E-Mail-Adresse *</span><input type="email" name="email" value="{{ old('email') }}" autocomplete="email" data-config-required @error('email') aria-invalid="true" @enderror></label>
                            <label><span>Straße</span><input type="text" name="street" value="{{ old('street') }}" autocomplete="address-line1"></label>
                            <label><span>Hausnummer</span><input type="text" name="street_number" value="{{ old('street_number') }}" autocomplete="address-line2"></label>
                            <label><span>PLZ</span><input type="text" name="postal_code" value="{{ old('postal_code') }}" autocomplete="postal-code"></label>
                            <label><span>Stadt</span><input type="text" name="city" value="{{ old('city') }}" autocomplete="address-level2"></label>
                        </div>

                        <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" data-config-submit>Konfiguration senden <span>↗</span></button></footer>
                    </div>
                </section>
            </div>
        </form>
    </section>
@endsection
