@extends('web.layouts.web-master')

@section('title', __('static.cancellation.meta_title'))
@section('meta_description', __('static.cancellation.meta_description'))

{{--
    Bestätigungsseite des gesetzlichen Kündigungsbuttons (§ 312k BGB).
    Öffentlich ohne Login erreichbar; erfasst Art der Kündigung (Grund nur
    bei außerordentlicher Kündigung), Zuordnungsdaten und den gewünschten
    Beendigungszeitpunkt. Die Bestätigungsschaltfläche trägt gesetzeskonform
    die Aufschrift „jetzt kündigen". Der Zugang wird sofort automatisch per
    E-Mail bestätigt (TerminationController).
--}}

@section('content')
    <x-web.static-page
        :eyebrow="__('static.legal.eyebrow')"
        :title="__('static.cancellation.title')"
        :breadcrumb="__('static.cancellation.breadcrumb')"
        :lead="__('static.cancellation.lead')"
    >
        <div class="max-w-[680px]">
            @if (session('termination-status'))
                <div class="border border-bg-rule bg-bg-elev p-6" role="status">
                    <div class="section-eyebrow mb-3">{{ __('static.cancellation.received_eyebrow') }}</div>
                    <h2 class="text-[19px] font-bold text-ink tracking-[-0.3px] m-0 mb-2">{{ __('static.cancellation.received_heading') }}</h2>
                    <p class="text-[13.5px] text-ink-2 leading-[1.6] m-0">
                        {{ session('termination-status') }}
                    </p>
                </div>
            @else
                <form method="POST" action="{{ route('kuendigung.store', ['edition' => 'de']) }}" novalidate
                    x-data="{
                        kind: @js(old('kind', 'ordentlich')),
                        terminateMode: @js(old('terminate_mode', 'asap')),
                    }">
                    @csrf

                    {{-- Art der Kündigung --}}
                    <fieldset class="border border-bg-rule p-5 m-0">
                        <legend class="text-[12px] font-semibold text-ink px-2">{{ __('static.cancellation.kind_legend') }}</legend>

                        <div class="space-y-3">
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="radio" name="kind" value="ordentlich" x-model="kind" class="mt-0.5">
                                <span>
                                    <span class="block text-[13.5px] font-semibold text-ink">{{ __('static.cancellation.kind_ordinary') }}</span>
                                    <span class="block text-[12.5px] text-ink-3 leading-[1.5]">{{ __('static.cancellation.kind_ordinary_desc') }}</span>
                                </span>
                            </label>
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="radio" name="kind" value="ausserordentlich" x-model="kind" class="mt-0.5">
                                <span>
                                    <span class="block text-[13.5px] font-semibold text-ink">{{ __('static.cancellation.kind_extraordinary') }}</span>
                                    <span class="block text-[12.5px] text-ink-3 leading-[1.5]">{{ __('static.cancellation.kind_extraordinary_desc') }}</span>
                                </span>
                            </label>
                        </div>
                        @error('kind', 'termination')
                            <p class="mt-2 text-[12px] text-red-600">{{ $message }}</p>
                        @enderror

                        <div x-show="kind === 'ausserordentlich'" x-cloak class="mt-4">
                            <label for="termination-reason" class="block text-[12px] font-semibold text-ink mb-1.5">{{ __('static.cancellation.label_reason') }}</label>
                            <textarea id="termination-reason" name="reason" rows="3"
                                class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub">{{ old('reason') }}</textarea>
                            @error('reason', 'termination')
                                <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- Zuordnung des Vertrags --}}
                    <fieldset class="border border-bg-rule p-5 m-0 mt-6">
                        <legend class="text-[12px] font-semibold text-ink px-2">{{ __('static.cancellation.who_legend') }}</legend>

                        <div class="space-y-4">
                            <div>
                                <label for="termination-name" class="block text-[12px] font-semibold text-ink mb-1.5">{{ __('static.cancellation.label_name') }}</label>
                                <input id="termination-name" type="text" name="name" value="{{ old('name') }}" required autocomplete="name"
                                    class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                                @error('name', 'termination')
                                    <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="termination-email" class="block text-[12px] font-semibold text-ink mb-1.5">{{ __('static.cancellation.label_email') }} <span class="text-ink-3 font-normal">{{ __('static.cancellation.label_email_hint') }}</span></label>
                                <input id="termination-email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email"
                                    class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                                @error('email', 'termination')
                                    <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="termination-reference" class="block text-[12px] font-semibold text-ink mb-1.5">
                                    {{ __('static.cancellation.label_reference') }} <span class="text-ink-3 font-normal">{{ __('static.cancellation.label_reference_hint') }}</span>
                                </label>
                                <input id="termination-reference" type="text" name="contract_reference" value="{{ old('contract_reference') }}"
                                    class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                                @error('contract_reference', 'termination')
                                    <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </fieldset>

                    {{-- Beendigungszeitpunkt --}}
                    <fieldset class="border border-bg-rule p-5 m-0 mt-6">
                        <legend class="text-[12px] font-semibold text-ink px-2">{{ __('static.cancellation.when_legend') }}</legend>

                        <div class="space-y-3">
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="radio" name="terminate_mode" value="asap" x-model="terminateMode">
                                <span class="text-[13.5px] text-ink">{{ __('static.cancellation.mode_asap') }}</span>
                            </label>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="radio" name="terminate_mode" value="date" x-model="terminateMode">
                                <span class="text-[13.5px] text-ink">{{ __('static.cancellation.mode_date') }}</span>
                            </label>
                        </div>
                        @error('terminate_mode', 'termination')
                            <p class="mt-2 text-[12px] text-red-600">{{ $message }}</p>
                        @enderror

                        <div x-show="terminateMode === 'date'" x-cloak class="mt-4">
                            <label for="termination-date" class="block text-[12px] font-semibold text-ink mb-1.5">{{ __('static.cancellation.label_date') }}</label>
                            <input id="termination-date" type="date" name="terminate_at" value="{{ old('terminate_at') }}"
                                class="border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
                            @error('terminate_at', 'termination')
                                <p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- Bot-Schutz: versteckte Honeypot-Felder (siehe TerminationController). --}}
                    <div class="hidden" aria-hidden="true">
                        <label for="termination-website">Website</label>
                        <input id="termination-website" type="text" name="website" tabindex="-1" autocomplete="off" value="{{ old('website') }}" />
                        <label for="termination-homepage">Homepage</label>
                        <input id="termination-homepage" type="text" name="homepage" tabindex="-1" autocomplete="off" value="{{ old('homepage') }}" />
                    </div>

                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-7">
                        <p class="text-[11px] text-ink-3 leading-[1.5] m-0 max-w-[380px]">
                            {!! __('static.cancellation.privacy_note', ['url' => route('datenschutz', ['edition' => 'de'])]) !!}
                        </p>
                        {{-- § 312k BGB: Bestätigungsschaltfläche, Aufschrift „jetzt kündigen". --}}
                        <button type="submit"
                            class="inline-flex items-center justify-center px-6 py-3 text-[14px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
                            {{ __('static.cancellation.submit') }}
                        </button>
                    </div>
                </form>

                <p class="text-[12px] text-ink-3 leading-[1.6] mt-8 mb-0">
                    {{ __('static.cancellation.account_hint') }}
                </p>
            @endif
        </div>
    </x-web.static-page>
@endsection